<template>
  <div class="picture">
    <div class="title-box-common">
      <h3>图片库</h3>
      <a-button
        type="primary"
        @click="
          uploadVisible = true;
          confirmLoading = false;
          $refs.upload.clearList();
        "
        >上传</a-button
      >
    </div>
    <div class="padding-box-common">
      <search :materialType="'picture'" @search="onSearch"></search>
      <common-table
        ref="commonTable"
        :materialType="'picture'"
        :searchForm="searchForm"
      ></common-table>
    </div>
    <a-modal
      width="40%"
      :title="`上传图片至${
        searchForm.is_public === 1 ? '公共素材' : '我的上传'
      }`"
      v-model:visible="uploadVisible"
      :confirm-loading="confirmLoading"
      @ok="onConfirmUpload"
    >
      <upload-image
        ref="upload"
        :searchForm="searchForm"
        @close="uploadVisible = false"
        @getList="$refs.commonTable.getList()"
      ></upload-image>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Search from "./component/search.vue";
import CommonTable from "./component/common-table.vue";
import UploadImage from "./component/upload-image.vue";
import usePagination from "@/hooks/usePagination";
import { defineComponent, reactive, toRefs, ref } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
// import { TableColumnOfYuewen } from "../_pageOptions/table_yuewen";
//getPromotionList
import { deletePromotion } from "@/api";
import { message } from "ant-design-vue";
const ImageLibrary = defineComponent({
  components: { Search, CommonTable, UploadImage },
  setup() {
    let { tablePageOptions } = usePagination();
    const formRef = ref();
    const state = reactive({
      searchForm: {},
      uploadVisible: false,
      confirmLoading: false, // 上传视频按钮loading
    });
    return { ...toRefs(state), formRef, tablePageOptions };
  },
  mounted() {},
  methods: {
    // 搜索条件回传
    onSearch(param: any) {
      this.searchForm = JSON.parse(JSON.stringify(param));
    },
    // 确定上传 触发组件上传视频
    onConfirmUpload() {
      let upload: any = this.$refs.upload;
      upload.onUploadImage();
      // this.confirmLoading = true;
    },
  },
});

export default ImageLibrary;
</script>
<style lang="scss" scoped>
@import "@/assets/common-style/frame.scss";
// .performance {
// }
</style>
