<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="{ scope }">
        <el-tag
          :type="
            $constantsTool.getTagTypeByValue('checkStatus', scope.checkStatus)
          "
          >{{
            $constantsTool.getLabelByValue("checkStatus", scope.checkStatus)
          }}</el-tag
        >
      </template>
      <template v-slot:operates="{ scope }">
        <TableOperation
          :operations="getOperation(scope)"
          :rawData="scope"
          @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"
    />
    <CrInfoEditDialog
      ref="CrInfo"
      :form="resubmitCrInfo"
      @refresh="loadData"
      :flowId="currentFlowId"
    />
    <DisplayInfoEditDialog
      ref="displayInfo"
      :form="resubmitDisplayInfo"
      @refresh="loadData"
    />
    <UploadDialog
      ref="UploadDialog"
      @update="loadData"
      :title="currentFlowTitle"
      :flowId="currentFlowId"
    />
  </div>
</template>

<script>
import PreviewDialog from "./components/PreviewDialog.vue";
import CrInfoEditDialog from "@/views/culturalRelic/components/InfoEditDialog";
import DisplayInfoEditDialog from "@/views/display/components/InfoEditDialog";
import UploadDialog from "@/components/UploadDialog";
import {
  approvleTableTitle,
  operates,
  viewButton,
  approvalButton,
  reSubmitButtton,
} from "./config";
import {
  getFlowListPagePer,
  getFlowDetailById,
  getSourceDetailById,
} from "@/api/approval";
import { mapGetters } from "vuex";

export default {
  components: {
    PreviewDialog,
    CrInfoEditDialog,
    DisplayInfoEditDialog,
    UploadDialog,
  },
  // provide必须返回一个对象，不然更新后无法获取最新的值
  provide() {
    return {
      loadData: this.loadData,
    };
  },
  data() {
    return {
      list: {
        record: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchParams: "",
      searchConfig: [
        {
          prop: "title",
          type: "input",
          label: "标题",
        },
        {
          prop: "sourceType",
          type: "select",
          label: "资源类型",
          selectOptions: [
            {
              label: "文物",
              value: "文物",
            },
            {
              label: "展览展示",
              value: "展览展示",
            },
          ],
        },
        {
          prop: "addWay",
          type: "select",
          label: "添加方式",
          selectOptions: [
            {
              label: "批量导入",
              value: "批量导入",
            },
            {
              label: "整量导入",
              value: "整量导入",
            },
            {
              label: "手动添加",
              value: "手动添加",
            },
          ],
        },
        {
          prop: "checkStatus",
          type: "select",
          label: "审核状态",
          selectOptions: this.$constantsTool.getList("checkStatus"),
        },
      ],
      loading: false,
      previewDialogVisible: false, //预览可见性
      aprrovalDetail: {}, //审核的相关信息
      prviewType: "view", //预览类型，view-查看详情，approval-审批
      operates,
      approvleTableTitle,
      currentFlowId: "", //当前点击的流程的ID
      resubmitCrInfo: {}, //重传的手动添加的文物信息
      resubmitDisplayInfo: {}, //重传的手动添加的展览信息
      resubmitCrMulti: {}, //重传的批量导入的文物信息
      resubmitDisplayMulti: {}, //重传的整量导入的展览信息
      currentFlowTitle: "", //当前重传的流程的title
    };
  },
  computed: {
    ...mapGetters(["dicts", "userInfo"]),
    getOperation(row) {
      return (row) => {
        switch (row.checkStatus) {
          case 0:
            // 审核中
            return [viewButton, approvalButton];
          case 1:
            // 已通过
            return [viewButton];
          case -2:
            // 已驳回
            return [viewButton, reSubmitButtton];
        }
      };
    },
  },
  async created() {
    await this.$store.dispatch("dict/getDictList", ["displayType"]);
    this.loadData();
  },
  methods: {
    async search(form) {
      this.searchParams = 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;
      }
    },
    // 重新上传
    async resubmit(row) {
      const { addWay, sourceType, id, title } = row;
      const isManual = addWay == "手动添加";
      this.currentFlowId = id;

      switch (sourceType) {
        case "文物":
          if (isManual) {
            const data = await this.getSourceDetail(this.currentFlowId);
            this.resubmitCrInfo = data;
            this.openResubmitDialog("CrInfo");
          } else {
            this.currentFlowTitle = title;
            this.openResubmitDialog("UploadDialog");
          }
          break;
        case "展览展示":
          if (isManual) {
            const data = await this.getSourceDetail(this.currentFlowId);
            this.resubmitDisplayInfo = data;
            this.openResubmitDialog("DisplayInfo");
          } else {
            this.currentFlowTitle = title;
            this.openResubmitDialog("UploadDialog");
          }
          break;
      }
    },
    // 获取资源详情
    getSourceDetail(id) {
      return new Promise(async (resolve, reject) => {
        try {
          const params = {
            id,
          };
          const res = await getSourceDetailById(params);
          if (res.code == 0) {
            resolve(res.data);
          } else {
            reject(false);
          }
        } catch (error) {
          reject(error);
        }
      });
    },

    // 打开文物编辑重传弹窗
    openResubmitDialog(name) {
      this.$refs[name].visible = true;
    },

    // 关闭文物编辑重传弹窗
    closeResubmitDialog(name) {
      this.$refs[name].visible = false;
    },

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

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

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list.current = value;
      this.loadData();
    },
    // 关闭预览图片
    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>
