<template>
  <div class="page">
    <a-page-header :ghost="false" title="常用菜谱">
      <div class="ele-text-secondary"> 发布分享和完善有菜谱库 </div>
      <template #footer>
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="家常菜谱" />
          <a-tab-pane key="2" tab="中国菜谱" />
          <a-tab-pane key="3" tab="烘焙" />
          <a-tab-pane key="4" tab="外国菜谱" />
          <a-tab-pane key="5" tab="食材大全" />
          <template #rightExtra v-if="activeKey === '1'">
            <div style="margin-bottom: 10px">
              <a-button
                type="primary"
                class="ele-btn-icon"
                v-permission="'shop:goods:save'"
                @click="add"
              >
                <template #icon>
                  <PlusOutlined />
                </template>
                <span>发布菜谱</span>
              </a-button>
              <a-input-search
                allow-clear
                style="width: 240px; margin-left: 10px"
                v-model:value="searchText"
                placeholder="请输入关键词"
                @search="query"
                @pressEnter="query"
              />
            </div>
          </template>
        </a-tabs>
      </template>
    </a-page-header>
    <div class="ele-body" v-if="activeKey === '1'">
      <Image :data="data" :where="where" @done="query" />
      <div class="ele-text-center" style="margin-top: 38px">
        <a-pagination
          :total="count"
          v-model:current="page"
          v-model:page-size="limit"
          show-quick-jumper
          :show-total="(total) => `共 ${total} 条`"
          @change="query"
        />
      </div>
    </div>
    <div class="ele-body" v-if="activeKey === '2'">
      <List :data="data" :where="where" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { FileRecord, FileRecordParam } from '@/api/system/file/model';
  import Image from './image.vue';
  import List from './list.vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { pageFiles, uploadFile } from '@/api/system/file';
  import { message } from 'ant-design-vue/es';

  const type = ref('name');
  const searchText = ref('');
  const data = ref<FileRecord[]>([]);
  // 当前选项卡
  const activeKey = ref('1');
  // 第几页
  const page = ref(1);
  // 每页多少条
  const limit = ref(12);
  // 总数量
  const count = ref(0);
  // 搜索表单
  const where = reactive<FileRecordParam>({
    name: '',
    createNickname: ''
  });

  /* 查询数据 */
  const query = () => {
    console.log('query()');
    if (type.value == 'name') {
      where.name = searchText.value;
    }
    if (type.value == 'createNickname') {
      where.createNickname = searchText.value;
    }
    where.page = page.value;
    where.limit = limit.value;
    where.contentType = 'image';
    console.log(where);
    pageFiles(where).then((res) => {
      count.value = Number(res?.count);
      data.value = res?.list;
    });
  };

  query();

  // 上传文件
  const onUpload = (item) => {
    const { file } = item;
    if (!file.type.startsWith('image')) {
      message.error('只能选择图片');
      return;
    }
    if (file.size / 1024 / 1024 > 10) {
      message.error('大小不能超过 10MB');
      return;
    }
    uploadFile(file)
      .then((data) => {
        message.success('发布成功');
        query();
      })
      .catch((e) => {
        message.error(e.message);
      });
  };
</script>

<script lang="ts">
  export default {
    name: 'PhotoIndex'
  };
</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>
