<template>
  <div class="app-container">
    <div class="top-bar">
      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
    </div>
    <TablePage
      :data="dataList.records"
      :tableTitle="approvleTableTitle"
      :operates="operates"
      v-loading="loading"
    >
      <template v-slot:status="data">
        <el-tag type="primary" v-if="data.scope.status == 0"> 待审核 </el-tag>
        <el-tag type="success" v-if="data.scope.status == 1"> 已通过 </el-tag>
        <el-tag type="danger" v-if="data.scope.status == -2"> 已驳回 </el-tag>
      </template>
      <!-- <template v-slot:displayType="data">
        {{ dicts.displayType[data.scope.type] }}
      </template> -->
      <template v-slot:operates="scope">
        <TableOperation
          :operations="operations"
          :rawData="scope.scope.row"
          @handleOperation="handleOperation"
        >
        </TableOperation>
      </template>
    </TablePage>
    <el-pagination
      style="margin: 16px 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(dataList.current)"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="Number(dataList.size)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(dataList.total)"
      class="pagination"
    >
    </el-pagination>
    <PreviewDialog
      ref="PreviewDialog"
      :aprrovalInfo="aprrovalInfo"
      :prviewType="prviewType"
      :dicts="dicts"
      @handleClose="handleClosePreviewDialog"
      @refresh="loadData"
    />
  </div>
</template>

<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import PreviewDialog from "./components/PreviewDialog.vue";
import { approvleTableTitle, operates, operations } from "./config";
import { getListPer } from "@/api/display";
import SearchBar from "@/components/SearchBar";
import { mapGetters } from "vuex";
import { approvalData } from "./mock";
export default {
  components: {
    TablePage,
    TableOperation,
    SearchBar,
    PreviewDialog,
  },
  data() {
    let that = this;
    return {
      dataList: {
        record: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchConfig: [
        {
          prop: "title",
          type: "input",
          label: "标题",
        },
        {
          prop: "type",
          type: "select",
          label: "类别",
          selectOptions: [
            {
              label: "文物",
              value: "1",
            },
            {
              label: "展览",
              value: "2",
            },
          ],
        },
        {
          prop: "status",
          type: "select",
          label: "审核状态",
          selectOptions: [
            {
              label: "已审核",
              value: "true",
            },
            {
              label: "待审核",
              value: "false",
            },
          ],
        },
      ],
      loading: false,
      previewDialogVisible: false, //预览可见性
      aprrovalInfo: {}, //审核的相关信息
      prviewType: "view", //预览类型，view-查看详情，approval-审批
      operates,
      operations,
      approvleTableTitle,
    };
  },
  computed: {
    ...mapGetters(["dicts"]),
  },
  async created() {
    await this.$store.dispatch("dict/getDictList", ["displayType"]);
    this.loadData();
  },
  methods: {
    async search(form) {
      this.loadData();
      // var params = {
      //   page: 1,
      //   limit: this.dataList[this.currentTabIndex].size,
      //   ...form,
      // };
      // if (params.status == "") {
      //   delete params.status;
      // }
      // let res = await getListPer(params);
      // if (res.code == 0) {
      //   this.$set(this.dataList, this.currentTabIndex, res.data);
      //   // this.dataList[this.currentTabIndex] = res.data
      //   // this.currentPageIds =  this.dataList[this.currentTabIndex].records.map((item) => {
      //   //   return item.exhibitionId;
      //   // });
      // }
    },
    reset() {
      this.loadData();
    },

    // 加载表格数据
    async loadData() {
      this.loading = true;
      this.dataList = approvalData;
      // var params = {
      //   page: this.dataList.current,
      //   limit: this.dataList.size,
      //   checkStatus: Number(this.activeName),
      // };
      // let res = await getListPer(params);
      // if (res.code == 0) {
      //   this.$set(this.dataList, this.currentTabIndex, res.data);
      // }
      this.loading = false;
    },

    async handleOperation(value, row) {
      console.log(value, row);
      const { type } = value;
      this.prviewType = type;
      this.aprrovalInfo = row;
      this.$refs.PreviewDialog.visible = true;
    },

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

    // 改变页容量
    handleSizeChange(value) {
      this.dataList[this.currentTabIndex].size = value;
      this.loadData();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      this.dataList[this.currentTabIndex].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;
    }
  }
}
</style>
