<template>
  <div class="app-container">
    <div class="top-bar">
      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
    </div>
    <TablePage
      :data="list.records"
      :tableTitle="approvleTableTitle"
      :operates="operates"
      v-loading="loading"
    >
      <template v-slot:checkStatus="data">
        <el-tag type="primary" v-if="data.scope.checkStatus == 0">
          {{
            $constantsTool.getLabelByValue(
              "checkStatus",
              data.scope.checkStatus
            )
          }}
        </el-tag>
        <el-tag type="success" v-if="data.scope.checkStatus == 1">
          {{
            $constantsTool.getLabelByValue(
              "checkStatus",
              data.scope.checkStatus
            )
          }}
        </el-tag>
        <el-tag type="danger" v-if="data.scope.checkStatus == -2">
          {{
            $constantsTool.getLabelByValue(
              "checkStatus",
              data.scope.checkStatus
            )
          }}
        </el-tag>
      </template>
      <template v-slot:operates="scope">
        <TableOperation
          :operations="getOperation(scope.scope.row)"
          :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>
    <PreviewDialog
      ref="PreviewDialog"
      :detail="aprrovalDetail"
      :prviewType="prviewType"
      :dicts="dicts"
      @handleClose="handleClosePreviewDialog"
      @refresh="loadData"
    />
  </div>
</template>

<script>
import PreviewDialog from "./components/PreviewDialog.vue";
import {
  approvleTableTitle,
  operates,
  viewButton,
  approvalButton,
  reSubmitButtton,
} from "./config";
import { getFlowListPagePer, getFlowDetailById } from "@/api/approval";
import { mapGetters } from "vuex";
import { operations } from "../boutique/config";
export default {
  components: {
    PreviewDialog,
  },
  data() {
    let that = this;
    return {
      list: {
        record: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchConfig: [
        {
          prop: "title",
          type: "input",
          label: "标题",
        },
        {
          prop: "sourceType",
          type: "select",
          label: "类别",
          selectOptions: [
            {
              label: "文物",
              value: "文物",
            },
            {
              label: "展览",
              value: "展览",
            },
          ],
        },
        {
          prop: "checkStatus",
          type: "select",
          label: "审核状态",
          selectOptions: this.$constantsTool.getList("checkStatus"),
        },
      ],
      loading: false,
      previewDialogVisible: false, //预览可见性
      aprrovalDetail: {}, //审核的相关信息
      prviewType: "view", //预览类型，view-查看详情，approval-审批
      operates,
      // operations,
      approvleTableTitle,
    };
  },
  computed: {
    ...mapGetters(["dicts", "userInfo"]),
    getOperation(row) {
      return (row) => {
        return [viewButton, approvalButton, reSubmitButtton];

        // const isAdmin = roles.find(item=>{
        //   return
        // })
        // 管理员2种
        // 1 查看详情和审批
        // 2 查看详情  管理员操作——已审核、被驳回的条目能够操作的
        // 普通人2种
        // 1 查看详情
        // 2 重传-当被驳回时
      };
    },
  },
  async created() {
    await this.$store.dispatch("dict/getDictList", ["displayType"]);
    this.loadData();
  },
  methods: {
    async search(form) {
      this.loadData(form);
    },
    reset() {
      this.loadData();
    },
    async loadData(form) {
      this.loading = true;
      const params = {
        page: this.list.current,
        limit: this.list.size,
        ...form,
      };
      let res = await getFlowListPagePer(params);
      if (res.code == 0) {
        this.list = res.data;
      }
      this.loading = false;
    },

    handleOperation(value, row) {
      const { type } = value;
      if (type == "view" || type == "approval") {
        this.viewOrApproval(type, row);
      } else {
        // 重新上传
        this.resubmit(row);
      }
    },
    // 编辑或者审核，（都要查看详情，审核多了个表单）
    async viewOrApproval(type, row) {
      this.prviewType = type;
      const { id } = row;
      const res = await getFlowDetailById(id);
      if (res.code == 0) {
        this.aprrovalDetail = res.data;
        this.$refs.PreviewDialog.visible = true;
      } else {
        return;
      }
    },

    resubmit(row) {
      const { addWay, sourceType } = row;
      // const isMultiCr = addWay==''
    },

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

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

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list[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>
