<template>
  <div>
    <el-table ref="tableRef" v-loading="loading" :data="tableData" border max-height="650px">
      <el-table-column label="申请项" prop="expressName" align="center"></el-table-column>
      <el-table-column label="档案门类" prop="className" align="center">
        <template slot-scope="scope">
          <div v-for="(item,index) in JSON.parse(scope.row.modifyValues).list" :key="index+'_daml'">
            <el-button type="text" @click="view(scope.row,item)" style="color: #409eff; font-weight:700;padding-right:8px;">{{item.className}}-{{item.recNum}}</el-button></div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="申请档案数量" prop="rec_nums" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="view(scope.row)" style="color: #409eff; font-weight:700">
            {{ JSON.parse(scope.row.modifyValues).rec_nums }}
          </el-button>
        </template>
      </el-table-column> -->
      <el-table-column show-overflow-tooltip width="200" label="申请人" prop="applyUserName" align="center">
        <template slot-scope="scope">
          <span>{{JSON.parse(scope.row.modifyValues) && JSON.parse(scope.row.modifyValues).applyUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请日期" prop="applyTime" align="center">
        <template slot-scope="scope">
          <span>{{JSON.parse(scope.row.modifyValues) && JSON.parse(scope.row.modifyValues).applyTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前节点" prop="currentNodeName" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="205">
        <template slot-scope="scope">
          <el-button type="text" @click="approve(scope.row)" style="color: #409eff; font-weight:700"
            v-if="showButtons.sp">审批
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="history(scope.row)" style="color: #67C23A; font-weight:700"
            v-if="showButtons.lssp"> 历史审批
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="timeline(scope.row)" style="color: #E6A23C; font-weight:700" v-if="true"> 查看流程
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>
    <!-- 查看档案 -->
    <view-box :tableData="viewData" :Alltable="Alltable" :visible="diaView" :loading="viewLoading" @cancel="cancel" />
    <!-- 查看原文 -->
    <view-img-box :tableData="viewImgData" :currentTableData="currentTableData" :visible="isViewImg" :loading="viewImgLoading" @cancel="cancel"></view-img-box>
    <dia-apply :visible="diaVisible" :applyStatus="applyStatus" :applyList="applyList" @cancel="cancel"
      @pass="approvePass" ref="diaApply" :currentRow="currentRow" />
    <history-box ref="history" :visible="diaHistory" @cancel="cancel" />
    <timeline-box ref="timeline" :visible="timeVisible" @cancel="cancel"></timeline-box>
  </div>
</template>

<script>
import DiaApply from "@/components/DiaApply";
import viewBox from "./view";
import viewImgBox from "@/components/ViewImage";
import historyBox from "./history";
import timelineBox from "./timeline";
import { getTable } from "@/api/archives-management/fileManagement/notStoredArchives.js";
import {
  getNodeList,
  approvePassOrNotPass,
  selectFileCounts,
  queryApproveDetails,
  archiveCopying
} from "@/api/approvalManagement/approval";
import { getApproveSettingById } from "@/api/system-management/processSettings";
import { getFindList } from "@/api/intelligent-warehouse/warehouse-management/fileBox-management";
import { mapState } from "vuex";
import { message } from "@/utils/common";
export default {
  props: {
    loading: {
      type: Boolean,
      default: () => true,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => {},
    },
    showButtons: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    DiaApply,
    viewBox,
    historyBox,
    timelineBox,
    viewImgBox,
  },
  data() {
    return {
      currentTableData:{},// 点击行数据表名
      viewImgData:[], // 查看原文详情数据
      viewImgLoading:false, 
      isViewImg:false, // 是否展示查看原文详情数据
      userId: sessionStorage.getItem("userid"),
      diaVisible: false,
      diaView: false, // 申请档案数量查看
      diaHistory: false, // 历史审批查看
      timeVisible: false, // 查看流程
      currentRow: {}, // 当前审批行
      applyStatus: 0, //审批状态
      applyList: [],
      Alltable: {
        tableShow: "[]",
      },
    };
  },
  computed: {
    ...mapState({
      viewData: (state) => state.approvalManagement.viewData,
    }),
    viewLoading: {
      get() {
        return this.$store.state.approvalManagement.viewLoading;
      },
      set(val) {
        this.$store.state.approvalManagement.viewLoading = val;
      },
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.$emit("getData");
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.pageNum = 1;
      this.$emit("getData");
    },
    // 审批
    approve(row) {
      this.currentRow = row;
      const modifyValues = JSON.parse(row.modifyValues);
      const params = {
        applyId: row.id,
      };
      this.$refs.diaApply.form = {
        applyUserName: modifyValues.applyUserName,
        applyTime: modifyValues.applyTime,
        rec_nums: modifyValues.rec_nums?modifyValues.rec_nums:0,
        originalTextNums: modifyValues.originalTextNums,
        applyReason: modifyValues.applyReason,
        currentNodeName: row.currentNodeName, //当前节点
      };
      // 密级
      if (modifyValues.securityClassName) {
        this.applyStatus = 1;
        this.$refs.diaApply.form.securityClass = modifyValues.securityClass;
      }
      // 期限
      if (modifyValues.retentionName) {
        this.applyStatus = 2;
        this.$refs.diaApply.form.retention = modifyValues.retention;
      }
      // 开放
      if (modifyValues.kzbsName) {
        this.applyStatus = 3;
        this.$refs.diaApply.form.kzbs = modifyValues.kzbs;
      }
      // 控制
      if (modifyValues.controlIdentifierName) {
        this.applyStatus = 4;
        this.$refs.diaApply.form.controlIdentifier =
          modifyValues.controlIdentifier;
      }
      // 价值
      if (modifyValues.archiveValueName) {
        this.applyStatus = 7;
        this.$refs.diaApply.form.archiveValue =
          modifyValues.archiveValue;
      }
      selectFileCounts({
        applyId: row.id,
      }).then((res) => {
        // this.diaVisible = true;
        this.$refs.diaApply.form.originalTextNums = res.body.counts;
      });
      getNodeList(params).then((res) => {
        this.$refs.diaApply.form.nodeList = res.body.list; //节点历史
        this.diaVisible = true;
      });
    },
    //审批通过/不通过
    approvePass(val, flag) {
      const params = {
        userId: sessionStorage.getItem("userid"),
        userName: sessionStorage.getItem("roles"),
        approveNodeName: this.currentRow.currentNodeName,
        applyId: this.currentRow.id,
        approveIdea: val.approveIdea,
        expressType: this.currentRow.expressType,
        flag, // 通过1、不通过2
      };
      approvePassOrNotPass(params)
        .then((res) => {
          this.$refs.diaApply.btnloading[
            flag === 1 ? "pass" : "noPass"
          ] = false;
          if (res.code === "100") {
            message("success", "审批成功", 2000);
            this.diaVisible = false;
            this.$emit("getData");
            this.$store.dispatch("websocket/statAuditNum", {
              userId: this.userId,
            });
          }
        })
        .catch((err) => {
          this.$refs.diaApply.btnloading[
            flag === 1 ? "pass" : "noPass"
          ] = false;
        });
    },
    // 申请档案数量查看
    async view(row,item) {
      let _typeView = row.expressName;
      let params = {
        classId: item.classId,
      };
      if(_typeView == '电子档案复制' || _typeView == '实体档案复制'){
        this.isViewImg = true;
        this.queryImageDetails(item)
      }else{
        try {
          const res = await getTable(params);
          if(res.code == 100){
              this.diaView = true;
              let len = res.body.InterfaceSystem.length
              let type = JSON.parse(row.modifyValues).type
              this.Alltable = res.body.InterfaceSystem[0]; // 表格header配置
              // 电子借阅申请,type: 1简化，2案卷，3卷内
              // 其他申请,type=0
              if(type === 2){
                this.Alltable = res.body.InterfaceSystem[len-2]
              }
              if(type === 3){
                this.Alltable = res.body.InterfaceSystem[len-1]
              }
              await this.queryApproveDetails(item);
          }else{
            console.log(res.msg);
          }
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 查询原文信息详情数据
    queryImageDetails(item){
      this.currentTableData = item;
      this.viewImgLoading = true;
      let params = {
        tableName:item.tableName,
        recId:item.recId
      }
      archiveCopying(params).then((res)=>{
        if(res.code == 100){
          this.viewImgData = res.body.list;
        }
      }).finally(()=>{
        this.viewImgLoading = false;
      })
    },
    // 查询信息详情数据
    queryApproveDetails(item){
      this.viewLoading = true;
      let _params = {
        tableName:item.tableName,
        tableType:item.tableType,
        recId:item.recId,
        classId:item.classId,
      }
      this.$store
        .dispatch("approvalManagement/queryApproveDetails", _params)
        .catch((res) => {
          this.viewLoading = false;
        });
    },
    // 历史审批
    history(row) {
      this.diaHistory = true;
      const params = {
        applyId: row.id,
      };
      this.$refs.history.loading = true;
      getNodeList(params)
        .then((res) => {
          if (res.code === "100") {
            this.$refs.history.tableData = res.body.list;
          }
        })
        .finally((res) => {
          this.$refs.history.loading = false;
        });
    },
    // 查看流程
    timeline(row) {
      this.timeVisible = true;
      getApproveSettingById({
        id: row.expressType,
      }).then((res) => {
        if (res.body.content) {
          this.$refs.timeline.nodeList = JSON.parse(res.body.content).nodeList;
          this.$refs.timeline.linkList = JSON.parse(res.body.content).linkList;
          this.$refs.timeline.origin = JSON.parse(res.body.content).origin;
          this.$refs.timeline.currentNodeName =
            row.status === 1 ? "结束" : row.currentNodeName;
        }
      });
    },
    cancel() {
      this.diaView = false;
      this.diaVisible = false;
      this.diaHistory = false;
      this.timeVisible = false;
      this.isViewImg = false;
    },
    getViewData(id) {
      this.viewLoading = true;
      const params = {
        applyId: id,
      };
      this.$store
        .dispatch("approvalManagement/getViewData", params)
        .catch((res) => {
          this.viewLoading = false;
        });
    },
  },
};
</script>

<style></style>
