<template>
  <div class="page">
    <el-card :body-style="{ padding: '5px' }">
      <header-box :search='search' @refreshClick='refreshClick' @searchClick='getData' />
    </el-card>
    <el-card :body-style="{ padding: '5px' }" style="margin-top: 5px;">
      <div class="btnBox">
        <!-- <el-button type="primary" size="mini" @click="returnClick">归还</el-button> -->
        <el-button type="danger" size="mini" @click="delClick">批量删除</el-button>
      </div>
      <content-box @look="look" :showButtons="showButtons" @handleSelectionChange='handleSelectionChange'
        @refreshTable='getData' :pagination='pagination' :tableData='tableData' :loading='loading'
        @returnClick="returnClick" />
    </el-card>
    <detail-box :daStatus="daStatus" :Alltable="Alltable" :fondsList="fondsList" @cancel="cancel"
      @getData="getdiaData" />
  </div>
</template>
<script>
  import {
    getOneTable,
    getTable
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    deleteEntityBorrow
  } from "@/api/archiveUtilize/returnPhysicalArchives"
  import {
    getFondWithPage
  } from "@/api/system-management/allAdministration";
  import contentBox from "./components/content";
  import {
    mapState
  } from "vuex";
  import headerBox from "./components/header";
  import detailBox from "./components/details";
  import {
    dateFormat,
    message,
    clearObjValue
  } from "@/utils/common";
  export default {
    data() {
      return {
        search: {
          applyTime: "",
          applyName: "",
          borrowStatus: ""
        },
        params: {},
        multipleSelection: [],
        Alltable: [],
        fondsList: [],
        daStatus: false,
        tableRow: {}
      }
    },
    components: {
      contentBox,
      headerBox,
      detailBox
    },
    computed: {
      ...mapState({
        tableData: (state) => state.returnPhysicalArchives.tableData,
        pagination: (state) => state.returnPhysicalArchives.pagination,
        showButtons: (state) => state.returnPhysicalArchives.showButtons,
      }),
      loading: {
        get() {
          return this.$store.state.returnPhysicalArchives.loading;
        },
        set(val) {
          this.$store.state.returnPhysicalArchives.loading = val;
        },
      },
    },
    methods: {
      cancel() {
        this.daStatus = false
      },
      getFonds() {
        getFondWithPage({
          limit: 1000
        }).then(res => {
          this.fondsList = res.body.list;
        });
      },
      look(val) {
        this.tableRow = val
        let params = {
          classId: val.classId,
        };
        getTable(params).then((res) => {
          res.body.InterfaceSystem.forEach((item, key) => {
            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.$set(item, "tableLoading", false);
            this.$set(item, "tableData", []);
          });
          this.Alltable = res.body.InterfaceSystem;
        }).then(res => {
          this.getdiaData(0, val, true)
        })
      },
      getdiaData(key, val, start) {
        this.Alltable.forEach((item, index) => {
          if (key === index) {
            let param = {
              commonMap: {
                funcTypeCode: "",
                tableName: item.tableName,
              },
              conditionMap: {},
              limit: this.Alltable[key].hasOwnProperty("pagination") ? this.Alltable[key].pagination
                .pageSize : '10',
              page: this.Alltable[key].hasOwnProperty("pagination") ? this.Alltable[key].pagination
                .pageNum : '1',
            };
            if (key) {
              param.conditionMap.pid = val
              if (key === 1) {
                param.conditionMap.id = this.Alltable.length === 3 ? this.tableRow.recId : ""
              }

            } else {
              param.conditionMap.id = this.Alltable.length === 3 ? this.tableRow.pid : this.tableRow.recId
            }
            item.tableLoading = true
            getOneTable(param).then((res) => {
              this.Alltable[key].tableData = res.body.list;

              if (this.Alltable[key].hasOwnProperty('pagination')) {
                this.Alltable[key].pagination.total = res.body.total;
              }
              if (start && key === 0) {
                this.getdiaData(1, res.body.list[0].id, true)
              }
              if (start && key === 1) {
                this.getdiaData(2, res.body.list[0].id, true)
              }
            }).finally(res => {
              item.tableLoading = false
            })
            this.daStatus = true
          }
        })


      },
      returnClick(val) {
        let data = {
          id: val.id,
          tableName: val.tableName
        }
        this.$confirm('此操作将归还文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch("returnPhysicalArchives/returnData", data).then(res => {
            this.getData()
          })
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      refreshClick() {
        clearObjValue(this.search)
      },
      delClick() {
        if (!this.multipleSelection.length) {
          message('warning', '请勾选需要删除的数据', 2000)
          return
        }
        const isVaild = this.multipleSelection.every(item => item.borrowStatus === '2')
        if (!isVaild) {
          message('warning', '请勾选状态为已归还的数据', 2000)
          return
        }
        this.$confirm('确定删除已勾选数据?', '批量删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          const params = {
            ids: this.multipleSelection.map(item => item.id).join(',')
          }
          deleteEntityBorrow(params).then(res => {
            if (res.code === '100') {
              message('success', '删除成功', 2000)
              this.getData()
            }
          })
        })
      },
      getData() {
        this.loading = true
        this.params = {
          userId: sessionStorage.getItem("userid"),
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
          ...this.search,
          applyTime: this.search.applyTime ? dateFormat(this.search.applyTime) : '',
        }
        this.$store.dispatch('returnPhysicalArchives/getData', this.params).catch(err => {
          this.loading = false
        })
      }
    },
    created() {
      this.getFonds()
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.$store.dispatch("returnPhysicalArchives/getButtonList", btnData);
      this.getData()
    }
  }

</script>

<style lang="scss" scoped>
  .page {

    padding: 10px;

    .btnBox {
      text-align: right;
      padding: 5px
    }


  }

</style>
