<template>
  <!-- 档案利用——授权电子借阅 -->
  <div class="page">
    <el-table border v-loading='tableloading' :data="tableData">
      <el-table-column prop="userName" align="center" label="申请人"></el-table-column>
      <el-table-column prop="expressName" align="center" label="流程名称"></el-table-column>
      <el-table-column prop="applyTime" align="center" label="申请时间" width="200"></el-table-column>
      <el-table-column prop="className" align="center" label="所属门类"></el-table-column>
      <el-table-column prop="useStyle" align="center" label="利用方式" width="120">
        <template slot-scope="scope">
          {{ scope.row.useStyle === 'view' ? '查看' : '打印' }}
        </template>
      </el-table-column>
      <el-table-column prop="type" align="center" label="类型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1">简化</span>
          <span v-if="scope.row.type === 2">案卷</span>
          <span v-if="scope.row.type === 3">卷内</span>
        </template>
      </el-table-column>
      <el-table-column prop="expireDate" align="center" label="授权截止时间" width="200"></el-table-column>
      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="look(scope.row)" v-if="showButtons.look"> 查看</el-button>
          <el-button type="text" @click="viewMark(scope.row)" v-if="scope.row.isComment === 1" style="color: #67C23A">
            已评价</el-button>
          <el-button type="text" @click="mark(scope.row)" v-else style="color: #E6A23C">评价</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>
    <!-- 卷内弹框 -->
    <dia-table ref="diaTable" :Alltable="Alltable" :daStatus="daStatus" :fondsList="fondsList" :lookObj="lookObj"
      :fileList="fileList" :lookList="lookList" @cancel="cancel" />
    <!-- 案卷弹框 -->
    <dia-folder ref="diaFolder" :curRow="curRow" :Alltable="Alltable" :fondsList="fondsList" :visible="folderVisible"
      @cancel="cancel" />
    <dia-mark :visible="markVisible" :isView="isView" ref="diaMark" @submit="submitMark" @cancel="cancel" />
    <print-table ref="printTable" :Alltable="Alltable" :printType="printType" :fondsList="fondsList" :lookObj="lookObj"
      :fileList="fileList" :tableName="tableName" :archive_no="archive_no" :lookList="lookList" @cancel="cancel" />
  </div>
</template>
<script>
import { getTable } from "@/api/archives-management/fileManagement/notStoredArchives";
import {
  getData,
  markElectronic,
  markView,
} from "@/api/archiveUtilize/archivesRetrieval/authorizedElectronicRecords";
import { getOneTableAuth } from "@/api/archives-management/fileManagement/notStoredArchives.js";
import { getFondWithPage } from "@/api/system-management/allAdministration";
import diaTable from "./components/diaTable.vue";
import printTable from "./components/printTable.vue";
import diaMark from "./components/diaMark.vue";
import diaFolder from "./components/diaFolder.vue";
import { getButtonList } from "@/api/user";
import { message } from "@/utils/common";
export default {
  data() {
    return {
      tableloading: false,
      tableData: [],
      Alltable: [],
      fondsList: [],
      pagination: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      lookObj: {},
      lookList: [],
      fileList: [],
      archive_no: "",
      tableName: "",
      params: {},
      showButtons: {
        look: false,
      },
      markVisible: false,
      folderVisible: false,
      curRow: {}, // 当前行
      isView: false, // 是否评价查看页
      daStatus: false,
      printType: false,
    };
  },
  components: {
    diaTable,
    diaMark,
    diaFolder,
    printTable,
  },
  methods: {
    cancel() {
      this.daStatus = false;
      this.printType = false;
      this.markVisible = false;
      this.folderVisible = false;
      this.isView = false;
    },
    mark(row) {
      this.curRow = row;
      if (row.recId.indexOf(',') > -1) { // 三层
        getTable({
          classId: row.classId
        }).then(res => {
          if (res.code === '100') {
            // 案卷表名
            this.curRow.tableName = res.body.InterfaceSystem[1].tableName
          }
        })
      }
      this.$refs.diaMark.form.flag = "";
      this.$refs.diaMark.form.note = "";
      this.markVisible = true;
    },
    getFonds() {
      getFondWithPage({
        limit: 1000,
      }).then((res) => {
        this.fondsList = res.body.list;
      });
    },
    submitMark(val) {
      const params = {
        primaryKeyInElectronicBorrow: this.curRow.id,
      };
      const data = {
        recId: this.curRow.recId,
        tableName: this.curRow.tableName,
        ...val,
      };
      const payload = {
        params,
        data,
      };
      markElectronic(payload)
        .then((res) => {
          this.$refs.diaMark.btnloading = false;
          if (res.code === "100") {
            message("success", "保存成功", 2000);
            this.markVisible = false;
            this.getData();
          }
        })
        .catch(() => {
          this.$refs.diaMark.btnloading = false;
        });
    },
    // 查看评价
    viewMark(row) {
      this.markVisible = true;
      this.isView = true;
      const params = {
        electronicBorrowId: row.id,
      };
      markView(params).then((res) => {
        if (res.code === "100") {
          this.$refs.diaMark.form = res.body.map;
        }
      });
    },
    look(row) {  // 查看功能
      let newDate = new Date().getTime();
      let lookDate = new Date(row.expireDate).getTime();
      if (lookDate < newDate) {
        message('warning', '授权截止时间已过期,无法查看', 3000)
        return;
      }
      //  案卷
      if (row.type === 2) {
        this.lookFolder(row);
        // 简化查看
      } else if (row.useStyle === "view" && row.type === 1) {
        this.lookFile(row);
        // 简化打印;
      } else if (row.useStyle === "print" && row.type === 1) {
        this.lookFile(row);
      } else {
        this.lookFile(row);
      }
    },
    lookFolder(row) {
      this.folderVisible = true;

      getTable({
        classId: row.classId,
      }).then((res) => {
        res.body.InterfaceSystem.forEach((item, key) => {
          this.$set(item, "tableLoading", false);
          this.$set(item, "tableData", []);
          if (
            (res.body.InterfaceSystem.length === 2 && key === 1) ||
            (res.body.InterfaceSystem.length === 3 && key === 2)
          ) {
            this.$set(item, "pagination", {
              pageSize: 10,
              pageNum: 1,
              total: 0,
            });
          }
        });
        this.Alltable = res.body.InterfaceSystem;
        this.$nextTick(() => {
          this.$refs.diaFolder.tableRow = row;
          this.$refs.diaFolder.clickSearch(0, true);
        });
      });
    },
    lookFile(row) {
      let param = {
        commonMap: {
          tableName: row.tableName,
        },
        conditionMap: {
          id: row.recId,
        },
      };
      let file = {
        commonMap: {
          tableName: row.tableName,
          funcTypeCode: "file",
        },
        conditionMap: {
          rec_id: row.recId,
          file_status: 1,
        },
        limit: "1000",
        orderBy: "order by  page_no  asc",
        page: "1",
      };
      getTable({
        classId: row.classId,
      }).then((res) => {
        /* this.lookList = row.type === 3 ? JSON.parse(res.body.InterfaceSystem[1].tableShow) : JSON.parse(res.body
            .InterfaceSystem[0].tableShow) */
        let len = res.body.InterfaceSystem.length;
        this.lookList = JSON.parse(res.body.InterfaceSystem[len - 1].tableShow);
        this.tableName = res.body.InterfaceSystem[len - 1].tableName;
        this.lookList.forEach((ele) => {
          this.$set(ele, "value", "");
        });
        let _this = this;
        getOneTableAuth(param).then((res) => {
          _this.archive_no = res.body.list[0].archive_no;
          console.log(_this.archive_no);
          for (let key in res.body.list[0]) {
            _this.lookList.forEach((ele) => {
              if (ele.columnName === key) {
                ele.value = res.body.list[0][key];
              }
            });
          }
          getOneTableAuth(file).then((res) => {
            this.fileList = res.body.list;
            if (
              (row.useStyle === "view" && row.type === 1) ||
              (row.useStyle === "view" && row.type === 3)
            ) {
              this.$refs.diaTable.picUrl = "";
              this.daStatus = true;
            } else {
              this.$refs.printTable.picUrl = "";
              this.printType = true;
            }
          });
        });
      });
    },
    getData() {
      this.tableloading = true;
      this.params = {
        userId: sessionStorage.getItem("userid"),
        expressType: "13",
        page: this.pagination.pageNum,
        limit: this.pagination.pageSize,
      };
      getData(this.params)
        .then((res) => {
          this.tableData = res.body.list;
          this.pagination.total = res.body.total;
          this.tableloading = false;
        })
        .catch((err) => {
          this.tableloading = false;
        });
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.pageNum = 1;
      this.getData();
    },
    async getButtonList() {
      let params = {
        menuid: this.$getMenuId(
          sessionStorage.getItem("routerIdList"),
          this.$route.path
        ),
        roleid: sessionStorage.getItem("roleid"),
      };
      let res = await getButtonList(params);
      if (res.code === "100") {
        let data = res.body.list;
        data.forEach((item) => {
          this.showButtons[item.key] = true;
        });
      }
    },
  },
  created() {
    this.getFonds();
    this.getButtonList();
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 10px;
}
</style>
