<template>
  <div class="app-container">
    <div class="top-bar">
      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
      <!-- <el-button
        type="primary"
        @click.native="handleOperation({ type: 'add' })"
        icon="el-icon-plus"
      >
        发布</el-button
      >
    </div> -->
    </div>
    <TablePage
      :data="list.records"
      :tableTitle="tableTitle"
      :operates="tableOperates"
    >
      <template v-slot:status="data">
        <el-popconfirm
          :title="getStatusTitle(data.scope.status)"
          @confirm="handleChangeStatus(data.scope)"
        >
          <el-switch
            slot="reference"
            :value="Boolean(Number(data.scope.status))"
          ></el-switch>
        </el-popconfirm>
      </template>
      <template v-slot:displayType="data">
        {{ dicts.displayType[data.scope.type] }}
      </template>
      <template v-slot:faceImageUrl="data">
        <img
          :src="
            $getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
          "
          alt="暂无图片"
          v-if="
            $getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
          "
          style="cursor: pointer"
          width="100px"
          @click="handelPreviewImages(data.scope.faceImageUrl)"
        />
      </template>
      <template v-slot:operates="scope">
        <TableOperation
          :operations="tableOperations"
          :rawData="scope.scope.row"
          @handleOperation="handleOperation"
        ></TableOperation>
      </template>
    </TablePage>
    <el-pagination
      style="margin: 16px 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(list.current)"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="Number(list.size)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(list.total)"
      class="pagination"
    >
    </el-pagination>
    <PreviewCrDialog
      v-if="Object.keys(curPreviewObj).length > 0"
      :visible="previewDialogVisible"
      :displayDetail="curPreviewObj"
      @handleClose="handleClosePreviewDialog"
    />
    <!-- <CopyDialog
      :visible="copyDialogVisible"
      @handleClose="handleCloseCopyDialog"
      @handleCopySelect="handleCopySelect"
      :list="list"
    /> -->
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />
  </div>
</template>

<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import PreviewCrDialog from './components/PreviewCrDialog.vue'
import { crTabletitle, operates, operations } from "./config";
import {
  getListPer,
  getDisplayById,
  editDisplay,
} from "@/api/display";
import SearchBar from "@/components/SearchBar";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import { importZip } from "@/utils/file";
export default {
  components: {
    TablePage,
    TableOperation,
    SearchBar,
    PreviewCrDialog,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    let that = this;
    return {
      list: {
        record: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchForm: {
        name: "",
        status: "",
      },
      searchConfig: [
        {
          prop: "title",
          type: "input",
          label: "文物名称",
        },
        {
          prop: "status",
          type: "select",
          label: "状态",
          selectOptions: [
            {
              label: "已上线",
              value: "1",
            },
            {
              label: "已下线",
              value: "0",
            },
          ],
        },
      ],
      editDialogVisible: false,
      isAdd: true,
      form: {
        title: "", //标题
        type: "", //	类别(待定)--枚举值（社会、生活等）
        displayCharacter: "1", //展览性质(精品展2、布展1、文物展3)--此处填写布展类别
        keyword: "", //	关键词
        deptId: "", //展览单位id--暂填入用户自己的单位
        regionCode: "", //	所在地域--暂填入用户自己的地区
        intro: "", //展览介绍,
        themeType: "1", //模板主题--前端枚举
        literature: "", //关联文献。id1,id2,id3--接口查询
        remark: "", //备注
        status: 1, //上下架状态(0-下架，1-上架）
        faceImage: "", //	封面（图片1张)
        images: "", //展览图片
        videos: "", //展览视频
        audios: "", //展览音频
        exhibitionUnits: [], //布展单元
      },
      loading: false,
      imgViewerVisible: false,
      previewDialogVisible: false,
      curPreviewObj: {}, //当前预览的对象
      currentPageIds: [], //当前的id数组，用于给详情页切换用
      importZipUrl: process.env.VUE_APP_BASE_API + "/bizImport/importZip",
      headers: {
        authorization: getToken(),
      },
      multiUploadVisible: false, //控制批量上传弹窗显示
      importRecordVisible: false, //上传记录
      filesList: [], //上传当中的文件队列
      uploadCount: 0, //处于上传中的文件数量，当等于fileList的时候就关闭弹窗，请求完毕一个就++
      cancelUploadArr: [], //保存每个文件上传接口对应的取消请求的函数[fn,fn,fn...]
      isUpLoading: false,
    };
  },
  computed: {
    ...mapGetters(["dicts"]),
    tableTitle() {
      return crTabletitle;
    },
    tableOperates() {
      return operates;
    },
    tableOperations() {
      return operations;
    },
    getStatusTitle(status) {
      return (status) => {
        if (Number(status)) {
          return "是否确定要下架？";
        } else {
          return "是否确定要上架？";
        }
      };
    },
  },

  async created() {
    await this.$store.dispatch("dict/getDictList", ["displayType"]);
    this.loadData();
  },

  //watch部分
  watch: {
    //监听弹窗变化
    multiUploadVisible(val) {
      //弹窗关闭记得清空，开启执行批量上传
      if (val) {
        for (let i = 0; i < this.filesList.length; i++) {
          this.uploadSelf(this.filesList[i].file, i); //弹窗显示的时候，就根据文件队列的数量调用上传接口
        }
      } else {
        //弹窗关闭，还原数据到初始位置
        this.filesList = [];
        this.uploadCount = 0;
        this.cancelUploadArr = [];
      }
    },
  },
  methods: {
    async search(form) {
      var params = {
        page: 1,
        limit: this.list.size,
        ...form,
      };
      if (params.status == "") {
        delete params.status;
      }
      let res = await getListPer(params);
      if (res.code == 0) {
        this.list = res.data;
        this.currentPageIds = this.list.records.map((item) => {
          return item.exhibitionId;
        });
      }
    },
    reset() {
      this.loadData();
    },

    // 加载表格数据
    async loadData() {
      var params = {
        page: this.list.current,
        limit: this.list.size,
      };
      let res = await getListPer(params);
      if (res.code == 0) {
        this.list = res.data;
        this.currentPageIds = this.list.records.map((item) => {
          return item.exhibitionId;
        });
      }
    },

    async handleOperation(value, row) {
      console.log(value, row);
      // debugger
      switch (value.type) {
        case "approval":
          if (row) {
            this.previewDialogVisible = true;
            let res = await getDisplayById({ exhibitionId: row.exhibitionId });
            this.curPreviewObj = res.data;
          }
          break;
      }
    },

    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 改变页容量
    handleSizeChange(value) {
      this.list.size = value;
      this.loadData();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list.current = value;
      this.loadData();
    },

    // 关闭Dialog
    handleClose() {
      this.editDialogVisible = false;
      this.form = {
        status: 1,
        faceImage: "", //	封面（图片1张)
        images: "", //展览图片
        videos: "", //展览视频
        audios: "", //展览音频
        exhibitionUnits: [], //布展单元
      };
    },
    // 关闭预览图片
    closeImgViewer() {
      this.imgViewerVisible = false;
    },
    // 预览图片
    handelPreviewImages(images) {
      this.imgViewerVisible = true;
      this.imgList = [images];
    },

    handleClosePreviewDialog() {
      this.previewDialogVisible = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 68px;
}

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  .tools-item {
    display: flex;
    &:last-child {
      justify-content: flex-end;
    }
  }
  .upload-button {
    margin: 0 10px;
  }
}
</style>