<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>
    <el-tabs v-model="activeName" type="border-card" ref="tabs">
      <el-tab-pane :label="item.label" :name="item.name" v-for="(item, tabIndex) in tabs" :key="tabIndex">
        <TablePage :data="dataList[tabIndex].records" :tableTitle="tableTitle" :operates="tableOperates" v-loading="loading">
          <template v-slot:checkStatus="data">
            <!-- {{ data.scope.checkStatus }} -->
            <el-tag type="primary" v-if="data.scope.checkStatus == 0">
              待审核
            </el-tag>
            <el-tag type="success" v-if="data.scope.checkStatus == 1">
              已通过
            </el-tag>
            <el-tag type="danger" v-if="data.scope.checkStatus == -2">
              已驳回
            </el-tag>
          </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(dataList[currentTabIndex].current)" :page-sizes="[10, 20, 50, 100]"
          :page-size="Number(dataList[currentTabIndex].size)" layout="total, sizes, prev, pager, next, jumper"
          :total="Number(dataList[currentTabIndex].total)" class="pagination">
        </el-pagination>
      </el-tab-pane>

    </el-tabs>

    <PreviewDisplayDialog v-if="Object.keys(curPreviewObj).length > 0" 
      :visible="previewDialogVisible"
      :displayDetail="curPreviewObj"  
      :loading="previewLoading" 
      @handleClose="handleClosePreviewDialog" 
      @refresh="loadData" />

    <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 PreviewDisplayDialog from './components/PreviewDisplayDialog.vue'
import { displayTabletitle, operates, approvalOperations, viewOperations } from "./config";
import {
  getListPer,
  getDisplayCheckById,
} from "@/api/display";
import SearchBar from "@/components/SearchBar";
import { mapGetters } from "vuex";
export default {
  components: {
    TablePage,
    TableOperation,
    SearchBar,
    PreviewDisplayDialog,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    let that = this;
    return {
      dataList: [
        {
          record: [],
          size: 10,
          current: 1,
          total: 0,
        },
        {
          record: [],
          size: 10,
          current: 1,
          total: 0,
        },
        {
          record: [],
          size: 10,
          current: 1,
          total: 0,
        }
      ],
      searchConfig: [
        {
          prop: "title",
          type: "input",
          label: "展览名称",
        },
      ],
      loading: false,
      imgViewerVisible: false,
      previewDialogVisible: false,
      curPreviewObj: {}, //当前预览的对象
      currentPageIds: [], //当前的id数组，用于给详情页切换用
      tabs: [{
        name: '0',
        label: '待审核'
      }, {
        name: '1',
        label: '已通过'
      },
      {
        name: '-2',
        label: '已驳回'
      }
      ],
      activeName: '0',
      currentTabIndex: 0,
      dialogLoading:false
    };
  },
  computed: {
    ...mapGetters(["dicts"]),
    tableTitle() {
      return displayTabletitle;
    },
    tableOperates() {
      return operates;
    },
    tableOperations() {
      if (this.activeName == '0') {
        return approvalOperations
      } else {
        return viewOperations
      }
    }
  },
  watch: {
    activeName(value) {
      this.currentTabIndex = Number(Math.abs(value)) //当前索引正好对应状态的绝对值
      this.loadData()
    }
  },

  async created() {
    await this.$store.dispatch("dict/getDictList", ["displayType"]);
    this.loadData();
  },
  methods: {
    async search(form) {
      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
      var params = {
        page: this.dataList[this.currentTabIndex].current,
        limit: this.dataList[this.currentTabIndex].size,
        checkStatus: Number(this.activeName)
      };
      let res = await getListPer(params);
      if (res.code == 0) {
        this.$set(this.dataList, this.currentTabIndex, res.data)
        // this.currentPageIds =  this.dataList[this.currentTabIndex].records.map((item) => {
        //   return item.exhibitionId;
        // });
      }
      this.loading = false
    },

    async handleOperation(value, row) {
      console.log(value, row);
      // debugger
      if (value.type == 'approval' || value.type == 'view') {
        this.previewLoading = true
        if (row) {
          this.previewDialogVisible = true;
          let res = await getDisplayCheckById({ exhibitionId: row.exhibitionId });
          this.curPreviewObj = res.data;
          this.previewLoading = false;
        }
      }

    },

    // 多选
    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>