<template>
  <el-dialog :title="'添加档案'+ '--' +'盒编号：'+selectRow.labelId" v-dialogDrag ref="diaFrom" :close-on-click-modal="false"
    :visible.sync="isSelect" width="90%" top="0px" :before-close="cancel">
    <div class="dialogClass">
      <el-card class="treeClass">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 115px)">
          <el-tree v-loading='treeLoading' highlight-current :data="treeData" :props="defaultProps" default-expand-all
            @node-click="handleNodeClick">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <!--可以根据情况，以数据类型来显示不同的图标或图片-->
              <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)"
                v-if="data.classType === 'L'" class="iconfont icon-folder-open-fill" />
              <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
                class="iconfont icon-wenjian" />
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </el-scrollbar>

      </el-card>
      <el-card class="formClass">
        <div class="page">
          <el-form :model="search" ref="headerForm" label-width="100px" size="mini">
            <el-form-item label="保管期限：" style="width:33%">
              <el-select style="width:80%" v-model="search.retention" clearable placeholder="请选择保管期限">
                <el-option v-for="(item, index) in findLIst" :key="index" :label="item.label" :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="归档年度：" style="width:33%">
              <el-date-picker style="width:80%" v-model="search.filing_year" type="year" placeholder="选择年">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="盒号：" style="width:33%">
              <el-input style="width:80%" v-model="search.case_no" placeholder="请输入盒号" clearable></el-input>
            </el-form-item>
            <el-form-item label="机构：" style="width:33%">
              <el-input style="width:80%" v-model="search.archive_ctg_no" placeholder="请输入机构" clearable></el-input>
            </el-form-item>
            <el-form-item label="档号：" style="width:33%" v-if="!dhStatus">
              <el-input style="width:80%" v-model="dhValue" placeholder="(支持模糊查询)" clearable>
              </el-input>
            </el-form-item>
            <div class="btn">
              <el-button type="primary" size="mini" @click="searchClick"><i class="iconfont icon-sousuo"></i>搜索
              </el-button>
              <el-button type="info" size="mini" @click="resetClick"><i class="iconfont icon-sousuo"></i>重置
              </el-button>
            </div>
          </el-form>
        </div>
        <div class="btnClass">
          <div style="width:70%">
            <el-input v-if="  treeRow.className && treeRow.className.indexOf('传统') ===-1" v-model="form.boxNum"
              style="width:50%" size="mini" clearable placeholder="请输入盒号"></el-input>
            <el-button @click="addBox" size="mini" type="success">添加至档案盒</el-button>
          </div>
          <div style="width:20%"></div>
        </div>
        <div class="tableBox">
          <div v-if="treeRow.className&& Alltable.length===1">
            <el-table key="1" ref="tableForEachone" highlight-current-row tooltip-effect="dark" :data="diaTableData"
              border @selection-change="handleSelectionChange" :max-height="tableOne" v-loading='diaTableLoading'
              @row-click="editCurrentApplicationApproval($event)">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column align="center" width="80" prop="case_no" label="盒号">
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="archive_no" align="center" label="文件级档号">
              </el-table-column>
              <el-table-column show-overflow-tooltip width="80" align="center" prop="piece_no" label="件号">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="maintitle" label="题名">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="100" prop="retention" label="保管期限">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="100" prop="filing_year" label="年度">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="archive_ctg_no" label="机构"></el-table-column>
            </el-table>
          </div>
          <div v-if="treeRow.className&& Alltable.length===2">
            <el-table key="2" ref="tableForEachtwo" highlight-current-row tooltip-effect="dark" :data="diaTableData"
              border @selection-change="handleSelectionChange" max-height="450" v-loading='diaTableLoading'
              @row-click="editCurrentApplicationApproval($event)">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" label="案卷级档号" prop="folder_no" width="200">
              </el-table-column>
              <el-table-column show-overflow-tooltip width="80" align="center" prop="year_folder_no" label="案卷号">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="maintitle" label="题名">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="100" prop="retention" label="保管期限">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="100" prop="filing_year" label="年度">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="archive_ctg_no" label="机构"></el-table-column>
            </el-table>
          </div>
          <div v-if="treeRow.className&& Alltable.length===3">
            <el-table key="3" ref="tableForEachthree" highlight-current-row tooltip-effect="dark" :data="diaTableData"
              border @selection-change="handleSelectionChange" max-height="230" v-loading='diaTableLoading'
              @row-click="editCurrentApplicationApproval($event)" size="mini">
              <el-table-column show-overflow-tooltip align="center" width="120" prop="fonds_no" label="全宗号">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="item_name" label="项目名称">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="120" prop="item_id" label="项目号">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="200" prop="note" label="备注">
              </el-table-column>
            </el-table>
          </div>
          <el-pagination v-if="treeRow.className" @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>

          <div v-if="treeRow.className&& Alltable.length===3">
            <el-table key="4" ref="tableForEachfour" highlight-current-row tooltip-effect="dark" :data="tabelTwo" border
              @selection-change="handleSelectionChange" max-height="200" v-loading='xmLoading' size="mini">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="120" prop="item_id" label="项目名称">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="120" prop="folder_no" label="案卷级档号">
              </el-table-column>
              <el-table-column show-overflow-tooltip width="80" align="center" prop="year_folder_no" label="案卷号">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="maintitle" label="题名">
              </el-table-column>
              <el-table-column show-overflow-tooltip align="center" width="200" prop="note" label="备注">
              </el-table-column>
            </el-table>
            <el-pagination v-if="treeRow.className&& Alltable.length===3" @current-change="handleCurrentChangexm"
              @size-change="handleCurrentChangexm" layout="total, prev, pager, next, sizes"
              :page-size="xmpagination.pageSize" :page-sizes="[10, 20, 30, 50]" :current-page="xmpagination.pageNum"
              :total="xmpagination.total">
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
  import {
    getOneTable,
    getTable,
    updateObject,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    selectFileBoxArchive,
    selectThreeArchive
  } from "@/api/intelligent-warehouse/warehouse-management/fileBox-management.js"
  import {
    message,
    clearObjValue,
    dateFormatT,
    dateFormat,
    ifCase
  } from "@/utils/common";
  export default {
    props: {
      selectRow: {
        type: Object,
        default: () => {},
      },
      isSelect: {
        type: Boolean,
        default: () => false,
      },
      treeLoading: {
        type: Boolean,
        default: () => false,
      },
      treeData: {
        type: Array,
        default: () => [],
      },
      findLIst: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        defaultProps: {
          children: "childClass",
          label: "className",
        },
        search: {
          retention: "",
          filing_year: "",
          case_no: "",
          archive_ctg_no: "",
        },
        diaTableLoading: false,
        Alltable: [],
        diaTableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },
        multipleSelection: [],
        form: {
          boxNum: ""
        },
        selectIds: [],
        rules: {
          boxNum: [{
            required: true,
            message: '请输入盒号',
            trigger: 'blur'
          }],
        },
        treeRow: {},
        dhStatus: false,
        dhValue: "",
        tableOneClickRow: {},
        tableOne: window.innerHeight - 315,
        tabelTwo: [],
        xmLoading: false,
        xmpagination: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },
      }
    },
    methods: {
      rowKey(row) {
        return row.id;
      },
      getSelectBox() {
        this.selectIds = []
        selectFileBoxArchive({
          tableName: this.Alltable[0].tableName
        }).then(res => {
          res.forEach(item => {
            this.selectIds.push(item.recId)
          })
          this.getTableData()
        })
      },
      getTableData() {
        if (!this.Alltable.length) {
          message('warning', '请先选择门类', 2000)
          return
        }
        this.diaTableLoading = true
        let params = {
          commonMap: {
            funcTypeCode: this.treeType,
            tableName: this.Alltable[0].tableName,
          },
          conditionMap: {},
          limit: this.pagination.pageSize,
          page: this.pagination.pageNum,
        };
        for (let key in this.search) {
          if (key === "filing_year") {
            params.conditionMap[key] = this.search[key] ?
              dateFormat(this.search[key]) :
              "";
          } else {
            params.conditionMap[key] = this.search[key]
          }
        }
        if (this.selectIds.length) {
          //   if (this.treeRow.className.indexOf("传统") != -1) {
          //     params.conditionMap.folder_no = "(" + this.selectIds.join(",") + ")"
          //   } else {
          //     params.conditionMap.archive_no = "(" + this.selectIds.join(",") + ")"
          //   }
          params.conditionMap.id = "(" + this.selectIds.join(",") + ")"
        }
        if (!this.dhStatus && this.dhValue) {
          params.conditionMap.archive_no = "like" + this.dhValue
        }
        getOneTable(params).then(res => {
          this.diaTableData = res.body.list
          /* if (this.treeRow.className.indexOf("传统") != -1) {
            res.body.list.forEach(item => {
              this.$set(item, "archive_no", item.folder_no)
            })
          } */
          this.pagination.total = res.body.total
          this.diaTableLoading = false
        }).catch(err => {
          this.diaTableLoading = false
        })
      },
      handleNodeClick(data) {
        if (this.treeRow && this.treeRow != data) {
          this.multipleSelection = []
          this.xmpagination = {
            pageSize: 10,
            pageNum: 1,
            total: 0,
          }
          this.tabelTwo = []
        }
        this.treeRow = data
        if (data.classType === "C") {
          let params = {
            classId: data.id,
          };
          getTable(params).then(res => {
            // if(res.body.InterfaceSystem.length===1 || res.body.InterfaceSystem.length===2){

            // }
            let InfaceShow = JSON.parse(res.body.InterfaceSystem[0].interfaceShow)
            if (InfaceShow.filter(ele => ele.fieldName === "folder_no").length) {
              this.dhStatus = true
            } else {
              this.dhStatus = false
            }
            this.Alltable = res.body.InterfaceSystem;
          }).then(res => {
            this.getSelectBox()
          })
        }
      },
      cancel() {
        this.$emit('cancel')
        this.pagination = {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        }
        this.xmpagination = {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        }
        this.tabelTwo = []
        this.Alltable = []
        this.dhValue = ""
      },
      searchClick() {
        this.getTableData()
      },
      resetClick() {
        clearObjValue(this.search)
      },
      //表格点击每行事件 只有三层才有事件
      editCurrentApplicationApproval(val, item, key) {
        if (this.Alltable.length != 3) {
          return
        }
        this.tableOneClickRow = val
        this.clickThreeTable()
      },
      clickThreeTable() {
        this.xmLoading = true
        let data = {
          limit: this.xmpagination.pageSize,
          page: this.xmpagination.pageNum,
          pid: this.tableOneClickRow.id,
          tableName: this.Alltable[1].tableName
        }
        selectThreeArchive(data).then(res => {
          this.tabelTwo = res.body.list
          this.xmpagination.total = res.body.total
        }).finally(res => {
          this.xmLoading = false
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.getTableData()
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.getTableData()
      },
      handleCurrentChangexm(val) {
        this.xmpagination.pageNum = val;
        this.clickThreeTable()
      },
      handleSizeChangexm(val) {
        this.xmpagination.pageSize = val;
        this.xmpagination.pageNum = 1;
        this.clickThreeTable()
      },
      editBoxNum() {
        if (this.Alltable.length != 1 && this.multipleSelection.length != 1) {
          message("warning", "只能选择一份案卷", 2000)
          return
        }
        if (!this.multipleSelection.length) {
          message('warning', '请先选择要修改盒号的目标', 2000)
          return
        }
        if (this.selectRow.caseNo && this.selectRow.caseNo != this.form.boxNum) {
          message("warning", "档案盒已标记的盒号和要添加的盒号不同", 3000)
          return
        }
        let params = {
          commonMap: {
            tableName: this.Alltable.length === 3 ? this.Alltable[1].tableName : this.Alltable[0].tableName,
          },
          fieldValueMap: {
            case_no: this.form.boxNum
          },
          conditionMap: {
            ids: this.multipleSelection.map(ele => ele.id).join(",")
          },
        };
        updateObject(params).then((res) => {
          this.getTableData()
        }).then(res => {
          let params = {
            classId: this.treeRow.id,
            id: this.selectRow.id,
            labelId: this.selectRow.labelId,
            tableName: this.Alltable.length === 3 ? this.Alltable[1].tableName : this.Alltable[0].tableName,
            docSimpleStorages: this.multipleSelection,
            caseNo: this.form.boxNum,
            boxType: this.Alltable.length === 1 ? 1 : 2
          }
          this.$store.dispatch("fileBoxManagement/addDocToBox", params).then(res => {
            this.getTableData()
            this.$emit('getData')
            this.cancel()
            this.multipleSelection = []
          })
        })
      },
      addBox() {
        // return
        if (!this.multipleSelection.length) {
          message('warning', '请先选择要入盒的档案', 2000)
          return
        }
        if (this.form.boxNum) {
          this.editBoxNum()
          return
        }
        let params = {
          classId: this.treeRow.id,
          id: this.selectRow.id,
          labelId: this.selectRow.labelId,
          tableName: this.Alltable.length === 3 ? this.Alltable[1].tableName : this.Alltable[0].tableName,
          docSimpleStorages: this.multipleSelection,
          boxType: this.Alltable.length === 1 ? 1 : 2
        }

        if (this.Alltable.length != 1) {
          if (this.multipleSelection.length != 1) {
            message("warning", "案卷只能选择一条", 3000)
            return
          }
          if (this.selectRow.caseNo && this.selectRow.caseNo != this.multipleSelection[0].year_folder_no) {
            message("warning", "档案盒已标记的盒号和要添加的案卷号不同", 3000)
            return
          }
          params.caseNo = this.multipleSelection[0].year_folder_no
        } else {
          if (this.multipleSelection.filter(ele => !ele.case_no).length) {
            message("warning", "选中的数据中有盒号不存在,请先输入盒号,保证一致。", 3000)
            return
          }
          if (ifCase(this.multipleSelection)) {
            message("warning", "选中的盒号有不同项,请先输入盒号,保证一致。", 3000)
            return
          }
          params.caseNo = this.multipleSelection[0].case_no
        }
        this.$store.dispatch("fileBoxManagement/addDocToBox", params).then(res => {
          this.getTableData()
          this.$emit('getData')
          this.cancel()
          this.multipleSelection = []
        })
      }
    }
  }

</script>
<style lang='scss' scoped>
  .dialogClass {

    display: flex;
    justify-content: space-around;

    .treeClass {
      width: 24%;
    }

    .formClass {
      width: 75%;


      .btnClass {
        padding: 20px;
        display: flex;
        justify-content: space-around;

        ::v-deep .el-form-item {
          margin-bottom: 0;
        }
      }

      .page {
        width: 100%;
        background-color: #fff;
        padding: 10px 10px 0 10px;
        box-sizing: border-box;


        .el-form {
          display: flex;
          flex-wrap: wrap;

          .el-form-item {
            margin-bottom: 10px;
          }

          .btn {
            width: 28%;
            text-align: left;
          }
        }
      }

      .tableBox {
        // background: red;
        height: calc(100vh - 290px);
        overflow-y: auto;
      }
    }
  }

</style>
