<template>
  <el-dialog title="档案入库" v-dialogDrag ref="diaFrom" :close-on-click-modal="false" :visible.sync="wareStatus"
    width="60%" top="10px" :before-close="cancel">
    <div class="warehousing">
      <div class="top">
        <el-button type="primary" size="mini" @click="openBrowseClick">浏览档案</el-button>
      </div>
      <div class="content">
        <div class="left">
          <div class="title">档案盒标签列表：</div>
          <ul>
            <li v-for="(item, index) in stayStorageLeftList" :key="index">{{item}}</li>
          </ul>
          <div class="total">共{{stayStorageLeftList.length}}盒</div>
        </div>
        <div class="right">
          <div class="titl">档案标签列表：</div>
          <ul>
            <li v-for="(item, index) in stayStorageRigthList" :key="index">{{item}}</li>
          </ul>
          <div class="total">共{{stayStorageRigthList.length}}件</div>
        </div>
      </div>
      <div class="bottom">
        <!-- <el-button v-preventReClick type="primary" size="mini"><i class="iconfont icon-ka"></i>读卡</el-button> -->
        <el-button type="primary" size="mini" @click="subWarehousingClick"><i class="iconfont icon-hanhan-01-01"></i>入库
        </el-button>
        <el-button type="info" size="mini" @click="cancel"><i class="iconfont icon-error"></i>取消
        </el-button>
      </div>
    </div>
    <el-dialog append-to-body title="浏览档案" v-dialogDrag ref="diabrowse" :close-on-click-modal="false"
      :visible.sync="browseStatus" width="80%" top="10px" :before-close="cancels">
      <div class="browseDia">

        <el-card class="treeClass">
          <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-card>
        <el-card class="tableClass">
          <div v-for="(item, key) in Alltable" :key="key" class="wholeTable">
            <el-table size="mini" :data="item.tableData" fit border ref="tableForEach"
              :max-height="Alltable.length==1?600:250" @selection-change="handleSelectionChange($event, item)"
              @row-click="editCurrentApplicationApproval($event, item, key)" tooltip-effect="dark">
              <el-table-column type="selection" width="55" align="center" v-if="!key">
              </el-table-column>
              <el-table-column v-for="(ele, index) in JSON.parse(item.tableShow)" :key="index" :prop="ele.columnName"
                :min-width="ele.width" :label="ele.columnChnName" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row[ele.columnName] }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @current-change="handleCurrentChange($event, item, key)"
              @size-change="handleSizeChange($event, item, key)" layout="total, prev, pager, next, sizes"
              :page-size="item.pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
              :current-page="item.pagination.pageNum" :total="item.pagination.total">
            </el-pagination>
          </div>

          <div class="btnClass" v-show="JSON.stringify(treeRow)!='{}'">
            <el-button @click="changeArchives" size="mini" type="primary">保存</el-button>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
  import {
    getTree,
    getTable,
    getOneTable
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    mapState
  } from "vuex";

  export default {
    props: {
      wareStatus: {
        type: Boolean,
        default: () => false,
      }
    },
    data() {
      return {
        stayStorageLeftList: [],
        stayStorageRigthList: [],
        browseStatus: false,
        diaTableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },
        defaultProps: {
          children: "childClass",
          label: "className",
        },
        Alltable: [],
        treeRow: {},
        tableOneClickRow: {}
      }
    },
    computed: {
      ...mapState({
        treeData: (state) => state.fileStorage.treeData,
        labelList: (state) => state.fileStorage.labelList,
      }),
      treeLoading: {
        get() {
          return this.$store.state.fileStorage.treeLoading;
        },
        set(val) {
          this.$store.state.fileStorage.treeLoading = val;
        },
      },
    },
    methods: {
      handleNodeClick(data) {
        this.treeRow = data
        if (data.classType === "C") {
          let params = {
            classId: data.id,
          };
          getTable(params)
            .then((res) => {
              res.body.InterfaceSystem.forEach((item) => {
                let ruleForm = {};
                let form = JSON.parse(item["interfaceShow"]);
                form.forEach((ele) => {
                  this.$set(ruleForm, ele.fieldName, "");
                  if (ele.width === 8) {
                    ele.width = "33%";
                  }
                  if (ele.width === 12) {
                    ele.width = "50%";
                  }
                  if (ele.width === 24) {
                    ele.width = "100%";
                  }
                });
                this.$set(item, "search", JSON.parse(item["interfaceQuery"])); //搜索
                this.$set(item, "form", form); //添加
                this.$set(item, "ruleForm", ruleForm); //表单
                this.$set(item, "tableData", JSON.parse(item["tableShow"])); //表格
                this.$set(item, "isShow", false);
                this.$set(item, "selectTable", []);
                this.$set(item, "pagination", {
                  pageSize: 10,
                  pageNum: 1,
                  total: 0,
                });
                this.$set(item, "tableData", []);
              });
              this.Alltable = res.body.InterfaceSystem;
            })
            .then((res) => {
              this.getData(0)
            });
        }
      },
      getData(key) {
        this.Alltable.forEach((item, index) => {
          if (key === index) {
            let params = {
              commonMap: {
                tableName: item.tableName,
              },
              conditionMap: {},
              limit: "10",
              page: "1",
            };
            if (key) {
              params.conditionMap.pid = this.tableOneClickRow.id
            }
            params.limit = item.pagination.pageSize;
            params.page = item.pagination.pageNum;
            getOneTable(params).then((res) => {
              item.tableData = res.body.list;
              item.pagination.total = res.body.total;
            });
          }
        })

      },
      changeArchives() {
        let ids = []
        this.Alltable.forEach(item => {
          item.selectTable.forEach(ele => {
            ids.push(ele.id)
          })
        })
        this.$store.dispatch('fileStorage/selectDoc', {
          recIds: ids.join(",")
        }).then(res => {
          let labelId = []
          let recIds = []
          this.labelList.forEach(item => {
            labelId.push(item.labelId)
            recIds.push(item.recId)
          })
          this.stayStorageLeftList = [...new Set(labelId)]
          this.stayStorageRigthList = [...new Set(recIds)]
          this.cancels()

        })
      },
      openBrowseClick() {
        this.treeLoading = true
        this.$store.dispatch('fileStorage/getClassTreeByClassName', {
          className: '档案'
        }).then(res => {
          // this.$refs.selection.diaTableData = []
          this.browseStatus = true
        }).catch(err => {
          this.treeLoading = false
        })
      },
      subWarehousingClick() {
        let data = {
          labeIds: this.stayStorageLeftList.join(","),
          recIds: this.stayStorageRigthList.join(",")
        }
        this.$store.dispatch('fileStorage/boxToStorage', data).then(res => {
          this.cancel()
          this.$emit('getData')
        })
      },
      cancel() {
        this.stayStorageLeftList = []
        this.stayStorageRigthList = []
        this.$emit('cancel')
      },
      cancels() {
        this.treeRow = {}
        this.Alltable.forEach((item, index) => {
          item.tableData = []
        })
        this.browseStatus = false
      },
      handleCurrentChange() {},
      handleSizeChange() {},
      //表格获取每行
      handleSelectionChange(val, item) {
        item.selectTable = JSON.parse(JSON.stringify(val));
      },
      editCurrentApplicationApproval(val, item, key) {
        this.tableOneClickRow = val
        this.$refs.tableForEach[key].clearSelection();
        this.$refs.tableForEach[key].toggleRowSelection(val);
        this.getData(key + 1)
      },
    }
  }

</script>
<style lang="scss" scoped>
  .warehousing {
    width: 100%;
    text-align: left;
    max-height: 800px;
    overflow-y: auto;

    .top {
      width: 100%;
      text-align: right;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      box-sizing: border-box;
    }

    .content {
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .left {
        width: 49%;
      }

      .right {
        width: 49%;
      }

      ul {
        width: 100%;
        margin-top: 10px;
        border: 1px solid #ccc;
        padding: 5px 10px;
        box-sizing: border-box;
        min-height: 450px;
        overflow-y: auto;

        li {
          line-height: 20px;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
        }

        &:hover {
          border: 1px solid #409eff;
        }
      }

      .total {
        margin: 10px 0;
      }
    }



    .bottom {
      text-align: right;
    }
  }

  .browseDia {
    display: flex;
    justify-content: space-around;

    .treeClass {
      width: 25%
    }

    .tableClass {
      width: 73%
    }

    .btnClass {
      text-align: left;
      padding: 20px 0;
    }
  }

</style>
