<template>
  <div>
    <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
      <header-box :boxLIst='boxLIst' :search="search" @searchClick='getData' :findLIst='findLIst'
        @resetClick='resetClick' />
    </el-card>
    <el-card :body-style="{ padding: '5px' }">
      <div style="text-align:right;padding:5px 10px ">
        <el-button @click="diaBox('新增')" size="mini" type="primary" v-if="showButtons.add">添加</el-button>
        <el-button @click="warehousingClick" size="mini" v-if="showButtons.ware" type="primary">入库房</el-button>
        <el-button @click="del" size="mini" type="danger" v-if="showButtons.del">删除</el-button>
      </div>
      <content-box @detail='detail' @edit='diaBox' :showButtons="showButtons" :tableData='tableData'
        :loading='tableLoading' :pagination='pagination' @getData='getData'
        @handleSelectionChange='handleSelectionChange' @selectda='selectda' />
    </el-card>
    <dia-box ref="diaBox" @cancel='cancel' :tableVal="tableVal" :boxLIst='boxLIst' :title='title' :isDiaBox='isDiaBox' @getData='getData' />
    <selection ref="selection" @getData='getData' :findLIst='findLIst' :treeData='treeData' :treeLoading='treeLoading'
      :isSelect='isSelect' :selectRow='selectRow' @cancel='cancel' />
    <detail @detail='detail' :itemName="itemName" @getData='getData' @cancel='cancel' :detailRow='detailRow' :detailStatus='detailStatus'
      :tableData='detailTableData' :tableDataTwo="tableDataTwo" />
  </div>
</template>
<script>
  import {
    boxToStorage2
  } from "@/api/intelligent-warehouse/warehouse-management/file-storage"
  import { selectThreeName } from '@/api/intelligent-warehouse/warehouse-management/fileBox-management'
  import {
    dateFormatYear,
    dateFormatTs,
    clearObjValue,
    message
  } from "@/utils/common"
  import {
    getOneTable,
    getTable
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    mapState
  } from "vuex";
  import diaBox from "./components/diaBox.vue"
  import selection from "./components/selection.vue"
  import headerBox from "./components/header.vue"
  import contentBox from "./components/content.vue"
  import detail from "./components/detail.vue"
  export default {
    data() {
      return {
        search: {
          state: "0",
          filingYear: "",
          caseNo: "",
          archiveCtgNo: "",
          retention: "",
          fileboxId: ""
        },
        title: "",
        isDiaBox: false,
        multipleSelection: [],
        isSelect: false,
        selectTitle: "",
        selectRow: {},
        detailStatus: false,
        detailRow: {},
        itemName: '',// 项目名称
        tableDataTwo: [],
        tableVal: {}
      }
    },
    computed: {
      ...mapState({
        tableData: (state) => state.fileBoxManagement.tableData,
        pagination: (state) => state.fileBoxManagement.pagination,
        findLIst: (state) => state.fileBoxManagement.findLIst,
        boxLIst: (state) => state.fileBoxManagement.boxLIst,
        treeData: (state) => state.fileBoxManagement.treeData,
        detailTableData: (state) => state.fileBoxManagement.detailTableData,
        showButtons: (state) => state.fileBoxManagement.showButtons,
      }),
      tableLoading: {
        get() {
          return this.$store.state.fileBoxManagement.tableLoading;
        },
        set(val) {
          this.$store.state.fileBoxManagement.tableLoading = val;
        },
      },
      treeLoading: {
        get() {
          return this.$store.state.fileBoxManagement.treeLoading;
        },
        set(val) {
          this.$store.state.fileBoxManagement.treeLoading = val;
        },
      },
    },
    components: {
      headerBox,
      contentBox,
      diaBox,
      selection,
      detail
    },
    methods: {
      warehousingClick() {
        if (!this.multipleSelection.length) {
          message("warning", "请先勾选要入库的档案盒", 3000)
          return
        }
        if (this.multipleSelection.filter(ele => ele.state === 1).length) {
          message("warning", "请不要勾选已入库的档案盒", 3000)
          return
        }
        if (this.multipleSelection.filter(ele => !ele.archiveNum).length) {
          message("warning", "有空档案盒，请调整", 3000)
          return
        }
        let data = {
          labeIds: this.multipleSelection.map(ele => ele.labelId).join(",")
        }
        boxToStorage2(data).then(res => {
          message("success", "入库成功", 3000)
          this.getData()
        })
      },
      getData() {
        this.tableLoading = true
        this.params = {
          state: this.search.state,
          filingYear: this.search.filingYear ? dateFormatYear(this.search.filingYear) : "",
          caseNo: this.search.caseNo,
          fileboxId: this.search.fileboxId,
          archiveCtgNo: this.search.archiveCtgNo,
          retention: this.search.retention,
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
        }
        this.$store.dispatch('fileBoxManagement/getData', this.params).catch(err => {
          this.tableLoading = fasle
        })
      },
      del() {
        if (!this.multipleSelection.length) {
          message('warning', '请选择要删除的目标', 3000)
          return
        }
        let ids = []
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('fileBoxManagement/deleteData', {
            ids: ids.join(',')
          }).then(res => {
            this.getData()
          })
        }).catch(() => {});
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      resetClick() {
        clearObjValue(this.search)
      },
      diaBox(str, val) {
        this.tableVal = val
        this.title = str
        this.isDiaBox = true
        if (str != '新增') {
          /* for (let key in val) {
            if (key === 'fileboxId') {
              this.$refs.diaBox.form['fileboxId'] = val[key]
            }
            if (key === 'id') {
              this.$refs.diaBox.form['id'] = val[key]
            }
          } */
          this.$refs.diaBox.form = {
            ...val
          }
        }
      },
      selectda(row) {
        this.selectRow = row
        this.treeLoading = true
        this.$store.dispatch('fileBoxManagement/getClassTreeByClassName', {
          className: '档案'
        }).then(res => {
          this.$refs.selection.diaTableData = []
          this.isSelect = true
        }).catch(err => {
          this.treeLoading = false
        })
      },
      detail(row) {
        this.detailRow = row
        this.$store.dispatch('fileBoxManagement/detail', {
          labelId: row.labelId
        }).then(res1 => {
          if(JSON.stringify(res1) === '[]'){
            this.tableDataTwo = [] // 删除清空卷内
            return
          }
          if (row.boxType === 2) {
            let tableTwoTableName = []
            let params = {
              commonMap: {
                funcTypeCode: "",
                tableName: ""
              },
              conditionMap: {
                pid:  this.detailTableData[0].recId
              },
              limit: "5000",
              page: "1"
            }
            getTable({
              classId: row.classId
            }).then(res => {
              if(res.code !== '100') return
              let length = res.body.InterfaceSystem.length
              if(length === 3){ // 三层
                tableTwoTableName = res.body.InterfaceSystem[2].tableName
              }else{
                tableTwoTableName = res.body.InterfaceSystem[1].tableName
              }
              params.commonMap.tableName = tableTwoTableName
              getOneTable(params).then(res => {
                this.tableDataTwo = res.body.list
              })
              // 第三层展示项目名称
              if(length === 3){
                this.getThreeName(row,res.body.InterfaceSystem[0].tableName)
              }
            })
          }
          this.detailStatus = true
        })
      },
      getThreeName(row,tableName){
        let params = {
          labelId: row.labelId,
          tableName,
        }
        selectThreeName(params).then(res => {
          if(res.code === '100'){
            this.itemName = res.body.itemName
          }
        })
      },
      cancel() {
        this.isDiaBox = false
        this.isSelect = false
        this.$refs.selection.form.boxNum = ""
        this.$refs.selection.treeRow = {}
        this.detailStatus = false
      }
    },
    created() {
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.$store.dispatch("fileBoxManagement/getButtonList", btnData);
      this.getData()
      this.$store.dispatch('fileBoxManagement/getFindList', {
        type: 'retention'
      })
      this.$store.dispatch('fileBoxManagement/getBoxType', {
        limit: 1000
      })
    }
  }

</script>
