<template>
  <div>
    <el-table v-loading="loading" :data="tableData" border>
      <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="申请人" width="100" prop="applyUserName" align="center">
        <template slot-scope="scope">
          <span>{{ getValue(scope.row, 'applyUserName') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请日期" width="150" prop="applyTime" align="center">
        <template slot-scope="scope">
          <span>{{ getValue(scope.row, 'applyTime') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批日期" width="110" prop="approveTime" align="center">
      </el-table-column>
      <el-table-column label="审批状态" prop="statusTwo" align="center">
        <template slot-scope="scope">
          <el-tag :type="STATUS_MAP[scope.row.statusTwo].type">
            {{ STATUS_MAP[scope.row.statusTwo].name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="当前节点" prop="currentNodeName" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="history(scope.row)" style="color: #67C23A; font-weight:700" v-if="true"> 历史审批
          </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" />
    <history-box ref="history" :visible="diaHistory" @cancel="cancel" />
    <timeline-box ref="timeline" :visible="timeVisible" @cancel="cancel"></timeline-box>
  </div>
</template>

<script>
import { mapState } from "vuex";
import historyBox from "../../approval/components/history";
import timelineBox from "../../approval/components/timeline";
import viewBox from "./view";
import { getNodeList,queryApproveDetails} from "@/api/approvalManagement/approval";
import { getApproveSettingById } from "@/api/system-management/processSettings";
import { getTable } from "@/api/archives-management/fileManagement/notStoredArchives.js";
export default {
  props: {
    loading: {
      type: Boolean,
      default: () => true,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    historyBox,
    timelineBox,
    viewBox,
  },
  computed: {
    ...mapState({
      viewData: (state) => state.approvalManagement.viewData,
    }),
    viewLoading: {
      get() {
        return this.$store.state.approvalManagement.viewLoading;
      },
      set(val) {
        this.$store.state.approvalManagement.viewLoading = val;
      },
    },
  },
  data() {
    return {
      STATUS_MAP: {
        0: {
          type: "warning",
          name: "审批中",
        },
        1: {
          type: "success",
          name: "已通过",
        },
        2: {
          type: "danger",
          name: "未通过",
        },
      },
      diaHistory: false, // 历史审批查看
      timeVisible: false, // 查看流程
      diaHistory: false, // 历史审批查看
      diaView: false, // 申请档案数量查看
      Alltable: {
        tableShow: "[]",
      },
    };
  },
  methods: {
    // 申请档案数量查看
    view(row,item) {
      let params = {
        classId: item.classId,
      };
      getTable(params)
        .then((res) => {
          this.Alltable = res.body.InterfaceSystem[0]; // 表格header配置
        })
        .then((res) => {
          //this.getViewData(row.applyId); // 表格数据
          this.queryApproveDetails(item);
        });
      this.diaView = true;
    },
    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;
        });
    },
    getViewData(id) {
      this.viewLoading = true;
      const params = {
        applyId: id,
      };
      this.$store
        .dispatch("approvalManagement/getViewData", params)
        .catch((res) => {
          this.viewLoading = false;
        });
    },
    getValue(row, key) {
      return row.modifyValues ? JSON.parse(row.modifyValues)[key] : "";
    },
    // 历史审批
    history(row) {
      this.diaHistory = true;
      const params = {
        applyId: row.applyId,
      };
      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;
      const expressType = row.modifyValues
        ? JSON.parse(row.modifyValues).expressType
        : "";
      getApproveSettingById({
        id: 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.statusTwo === 1 ? "结束" : row.currentNodeName;
        }
      });
    },
    cancel() {
      this.diaHistory = false;
      this.timeVisible = false;
      this.diaView = false;
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.$emit("getData");
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.pageNum = 1;
      this.$emit("getData");
    },
  },
};
</script>

<style></style>
