<template>
  <div class="box">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: '5px' }" ref="cardTree">
      <div slot="header" class="clearfix">
        <span v-show="!status">选择档案门类</span>
        <el-button style="float: right; padding:  0" type="text" @click='btns'>
          <el-tooltip class="item" effect="dark" v-if="!status" content="折叠" placement="right">
            <svg-icon icon-class="leftzd" v-if="!status" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-if="status" content="展开" placement="left">
            <svg-icon icon-class="rightzd" v-if="status" />
          </el-tooltip>
        </el-button>
      </div>
      <div class="treeList">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 160px)">
          <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.childClass.length" 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>
      </div>

    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm' :body-style="{ padding: '4px' }">
      <div class="searchBox">
        <el-select placeholder="请选择实体模板" size="mini" @change="changeLayer" v-model="layer" clearable
          style="width:30%;margin-right: 25px;">
          <el-option v-for="(item,index) in allJson" :key="index" :label="item.entityType" :value="item.entityId">
          </el-option>
        </el-select>
        <el-button :loading="btnloading" @click="submit" size="mini" type="success">保存</el-button>
      </div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="输入界面修改" name="interface">
          <interface ref="interface" :InterfaceView="InterfaceView" :columns="columns" @delAssembly="delAssembly" />
        </el-tab-pane>
        <el-tab-pane label="查询表格修改" name="second">
          <query-table ref="table" :tableView="tableView" :multipleSelection="multipleSelection"
            v-if="activeName==='second'" :InterfaceView="InterfaceView" :activeName="activeName" :tableShow="tableShow"
            @addmultipleSelection="addmultipleSelection" @destroyed="destroyed" />
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>
<script>
  import Interface from "./components/Interface.vue"
  import queryTable from "./components/queryTable.vue"
  import {
    getTable,
    classSettings
  } from "@/api/archives-management/fileManagement/notStoredArchives"
  import {
    falseObjValue,
    dragControllerDiv,
    message
  } from "@/utils/common.js";
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        treeLoading: false,
        status: false,
        // 树形结构数据
        defaultProps: {
          children: "childClass",
          label: "className",
        },
        treeNodeData: {},
        treeNode: {},
        activeName: "interface",
        allJson: [],
        layer: null,
        tableView: [],
        InterfaceView: [],
        columns: [],
        tableShow: true,
        clickVal: "",
        multipleSelection: [],
        btnloading: false,
        tableData: []
      }
    },
    components: {
      Interface,
      queryTable
    },
    watch: {
      'status': {
        handler(val, oldVal) {
          const cardTree = this.$refs.cardTree.$el.style
          const cardForm = this.$refs.cardForm.$el.style
          if (val) {
            cardTree.width = '5%'
            cardForm.width = '94%'
          } else {
            cardTree.width = '20%';
            cardForm.width = '79%';
          }
        }
      }
    },
    computed: {
      ...mapState({
        treeData: (state) => state.categoryManagement.treeData,
      }),
    },
    methods: {
      delAssembly(val) {
        this.InterfaceView = this.InterfaceView.filter(ele => ele.fieldName != val)
        this.tableData = this.tableData.filter(ele => ele.columnName != val)
        this.columns = this.columns.filter(ele => ele.fieldName != val)
        this.$refs.interface.select = ""
      },
      changeLayer(val) {
        if (this.clickVal != val) {
          this.activeName = 'interface'
        }
        this.clickVal = val
        this.tableView = [];
        this.InterfaceView = [];
        this.tableShow = false;
        let currentData = this.allJson.filter(item => item.entityId === val)
        this.InterfaceView = JSON.parse(currentData[0].interfaceShow)
        this.InterfaceView.forEach((item, index) => {
          this.$set(item, "id", index + 1);
          if (item.width === 8) {
            item.width = "30%";
          }
          if (item.width === 12) {
            item.width = "50%";
          }
          if (item.width === 24) {
            item.width = "100%";
          }
        })
        this.$refs.interface.rowDrop()
        this.tableView = JSON.parse(currentData[0].tableShow)
        this.tableData = JSON.parse(currentData[0].tableShow)
        this.InterfaceView.forEach(ele => {
          let arr = this.tableView.filter(item => item.columnName === ele.fieldName)
          if (arr.length) {
            this.$set(ele, "tablewidth", arr[0].width);
          } else {
            this.$set(ele, "tablewidth", "150");
          }
        })
        this.tableShow = true

      },
      handleNodeClick(data, node, ele) {
        if (this.treeNodeData != data) {
          this.tableView = []
          this.InterfaceView = []
          this.columns = []
          this.activeName = 'interface'
        }
        this.layer = null
        this.treeNodeData = data;
        this.treeNode = node;
        if (data.classType != "L") {
          getTable({
            classId: data.id
          }).then(res => {
            this.allJson = res.body.InterfaceSystem
          })
        }
      },
      initGetTree(val) {
        this.treeLoading = true;
        this.$store.dispatch('categoryManagement/getTree').then(res => {
          if (val == 1) {
            this.handleNodeClick(this.treeNodeData, this.treeNode);
          }
        }).finally(err => {
          this.treeLoading = false;
        })
      },
      btns() {
        this.status = !this.status
      },
      handleClick(tab, event) {},
      submit() {
        if (JSON.stringify(this.treeNodeData) == '{}') {
          message("warning", "请选择要修改的门类", 2000)
          return
        }
        if (JSON.stringify(this.layer) == null) {
          message("warning", "请选择实体模板", 2000)
          return
        }
        this.btnloading = true
        this.InterfaceView.forEach(ele => {
          delete(ele['tablewidth'])
        })
        let data = {
          entityId: this.layer,
          interfaceShow: JSON.stringify(this.InterfaceView),
          tableShow: this.activeName === 'interface' ? JSON.stringify(this.tableData) : JSON.stringify(this.$refs
            .table.tableData),
          columns: this.columns,
        }
        classSettings(data).then(res => {
          message("success", "操作成功", 2000)
          // handleNodeClick(this.treeNodeData, this.treeNode)
        }).finally(res => {
          this.btnloading = false
        })
      },
      getdownTypeList() {

      },
      addmultipleSelection(val) {
        this.multipleSelection = val;
      },
      destroyed(val) {
        this.tableData = val
      }
    },
    mounted() {
      dragControllerDiv()
      this.getdownTypeList();
    },
    created() {
      this.initGetTree()
    }
  }

</script>
<style lang='scss' scoped>
  .box {
    display: flex;
    justify-content: space-around;
    height: 100%;

    .tree-box {

      width: 20%;
      background-color: #fff;
      padding: 5px 10px;
      //   height: calc(100%-100px);

      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }

      .treeList {
        // height: 740px;
        // overflow-y: auto;
      }
    }

    .form-box {
      width: 79%;
      height: calc(100vh - 90px);
      overflow-y: auto;
      background-color: #fff;
      padding: 5px 10px;
    }
  }

  .searchBox {
    // display: flex;
    // justify-content: space-around;
    padding: 0 0 6px 0;
  }

</style>
