<template>
  <div class="page">
    <a-row :gutter="20">
      <a-col
        v-for="(item, index) in data"
        :key="index"
        v-bind="
          styleResponsive
            ? { xl: 5, lg: 8, md: 12, sm: 12, xs: 24 }
            : { span: 6 }
        "
      >
        <a-card :bordered="false" hoverable style="margin-top: 16px" @click="openEdit(item)">
          <template #cover>
            <img :src="item.url" alt="" :width="120" :height="180" />
          </template>
          <a-card-meta :title="item.name">
            <template #description>
              <div
                class="project-list-desc"
                v-if="item.comments"
                :title="item.comments"
              >
                {{ item.comments }}
              </div>
            </template>
          </a-card-meta>
          <div class="ele-cell">
            <div class="ele-cell-content ele-text-secondary">
              <!--              <a-tooltip :title="item.createNickname" placement="top">-->
              <!--                <a-avatar :src="item.avatar" size="small" />-->
              <!--              </a-tooltip>-->
              {{ timeAgo(item.createTime) }}
            </div>
            <a-button type="primary" @click="openEdit(item)">
              加入菜品
            </a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- 编辑弹窗 -->
    <PhotoEdit v-model:visible="showEdit" :data="current" @done="query" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import { FileRecord, FileRecordParam } from '@/api/system/file/model';
  import PhotoEdit from './components/photo-edit.vue';
  import { timeAgo } from 'ele-admin-pro';

  const props = defineProps<{
    // 搜索关键字
    searchText: string;
    // 搜索条件
    where?: FileRecordParam | null;
    // 修改回显的数据
    data?: FileRecord | null;
  }>();

  // 当前编辑数据
  const current = ref<FileRecord | null>(null);
  // 是否显示编辑弹窗
  const showEdit = ref(false);

  const emit = defineEmits<{
    (e: 'done'): void;
  }>();

  /* 打开编辑弹窗 */
  const openEdit = (row?: FileRecord) => {
    current.value = row ?? null;
    showEdit.value = true;
  };

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const query = () => {
    emit('done');
  };

  watch(
    () => props.data,
    (visible) => {
      if (visible) {
        console.log(props.data);
      } else {
      }
    }
  );
</script>

<script lang="ts">
  export default {
    name: 'PhotoImage'
  };
</script>

<style lang="less" scoped>
  .project-list-desc {
    height: 44px;
    line-height: 22px;
    margin-bottom: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
