<template>
  <div class="page">
    <!-- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane name="one">
        <span slot="label"><i class="el-icon-date"></i> 门类定制</span>
        <one-box ref="firstBox" @handleNodeClick='handleNodeClick' @initGetTree='initGetTree'
          :formDataFlage='formDataFlage' :btnFlage='btnFlage' :formData='formData' :nowSort='nowSort'
          :treeNodeData="treeNodeData" />
      </el-tab-pane>
      <el-tab-pane name="two" label="开发数据控制">开发数据控制</el-tab-pane>
      <el-tab-pane name="three" label="门类保存数据设置">门类保存数据设置</el-tab-pane>
      <el-tab-pane name="four" label="索引设置">索引设置</el-tab-pane>
      <el-tab-pane name="five" label="档号设置">
        <five-box />
      </el-tab-pane>
      <el-tab-pane name="six" label="数据提取规则">数据提取规则</el-tab-pane>
    </el-tabs> -->
    <one-box ref="firstBox" @handleNodeClick='handleNodeClick' @initGetTree='initGetTree'
          :formDataFlage='formDataFlage' :btnFlage='btnFlage' :formData='formData' :nowSort='nowSort'
          :treeNodeData="treeNodeData" />
  </div>
</template>
<script>
  import oneBox from "./components/one"
  import fiveBox from "./components/five"
  import {
    falseObjValue
  } from "@/utils/common.js";
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        activeName: "one",
        //===  first  ===//
        treeNodeData: {},
        treeNode: "",
        btnFlage: {
          add: true,
          del: true,
          // move: true,
          edit: true,
          sumbit: false,
          cancel: false,
        },
        //表单权限
        formDataFlage: {
          className: true,
          classType: true,
          classOrder: true,
          ClassProgramme: true,
          EntityType: true,
          filing: true,
        },
        // 表单
        formData: {
          className: "", //类目名称
          classType: "", //类目类型
          classOrder: "", //类目排序
          ClassProgramme: "", //元数据方案
          EntityType: "", //实体类型
          filing: "", //预归档
          EntityList: [], //下属目录表
        },
        nowSort: null, // 新增当前排序

        clickTab: {},
        //===  five  ===//

      };
    },
    components: {
      oneBox,
      fiveBox
    },
    computed: {
      ...mapState({
        EntityList: (state) => state.categoryManagement.EntityList,
        treeData: (state) => state.categoryManagement.treeData,
        downTypeList: (state) => state.categoryManagement.downTypeList,
        ClassData: (state) => state.categoryManagement.ClassData,
      }),
      treeLoading: {
        get() {
          return this.$store.state.categoryManagement.treeLoading;
        },
        set(val) {
          this.$store.state.categoryManagement.treeLoading = val;
        },
      },
      fiveLoading: {
        get() {
          return this.$store.state.categoryManagement.fiveLoading;
        },
        set(val) {
          this.$store.state.categoryManagement.fiveLoading = val;
        },
      },
      fiveTableData: {
        get() {
          return this.$store.state.categoryManagement.fiveTableData;
        },
        set(val) {
          this.$store.state.categoryManagement.fiveTableData = val;
        },
      },
    },
    created() {
      // 获取初始化树形结构
      this.initGetTree();
    },
    methods: {


      handleClick(tab) {
        this.clickTab = tab;
        switch (tab.name) {
          case 'one':
            break;
          case 'two':
            break;
          case 'three':
            break;
          case 'four':
            break;
          case 'five':
            this.fiveTableData = []
            this.fiveLoading = true
            this.$store.dispatch('categoryManagement/getClassTreeByClassName', {
              className: '档案'
            }).catch(err => {
              this.fiveLoading = false
            })
            this.$store.dispatch('categoryManagement/getFondWithPage', {
              limit: 1000
            })
            break;
          case 'six':
            break;
        }
      },


      // 获取初始化树形结构
      initGetTree(val) {
        this.treeLoading = true;
        this.$store.dispatch('categoryManagement/getTree').then(res => {
          if (val == 1) {
            this.handleNodeClick(this.treeNodeData, this.treeNode);
          }
          this.treeLoading = false;
        }).catch(err => {
          this.treeLoading = false;
        })
        this.$store.dispatch('categoryManagement/getFindList', {
          type: 'downTypeList'
        })
      },
      getFarther(node) {
        if (node.level === 1) {
          this.fatherId = node.data.id;
        } else {
          this.getFarther(node.parent);
        }
      },
      // 点击树形结构
      handleNodeClick(data, node, ele) {
        this.treeNodeData = data;
        this.treeNode = node;
        this.$refs.firstBox.$refs.cate.renameFlage = true;
        falseObjValue(this.formDataFlage, true);
        if (data.pId === -1) {
          for (let key in this.btnFlage) {
            if (key === "add" || key === "sumbit" || key === "cancel") {
              this.btnFlage[key] = false;
            } else {
              this.btnFlage[key] = true;
            }
          }
        } else {
          if (data.classType === "L") {
            if (data.childClass.length) {
              falseObjValue(this.btnFlage, false);
              this.btnFlage["del"] = true;
            } else {
              falseObjValue(this.btnFlage, false);
            }
          } else {
            falseObjValue(this.btnFlage, false);
            this.btnFlage["add"] = true;
          }
        }
        //新增时拿到当前排序
        if (!data.childClass.length) {
          this.nowSort = 1;
        } else {
          this.nowSort = data.childClass.slice(-1)[0].classOrder + 1;
        }
        this.getFarther(node);
        this.$store.dispatch('categoryManagement/getEntity', {
          id: this.fatherId
        })
        if (data.classType != "L") {
          this.$store.dispatch('categoryManagement/getClass', {
            classId: data.id
          }).then(res => {
            this.formData.ClassProgramme = this.ClassData.metadataType;
            this.formData.EntityType = this.ClassData.tentityType[0].pId;
            this.ClassData.tentityType.forEach((item, index) => {
              if (index) {
                this.formData.EntityList.push(item);
              }
            });
          })
        }
        this.formData = {
          className: data.className,
          classOrder: data.classOrder,
          pId: data.id,
          filing: data.flag ? data.flag : 1,
          classType: data.classType,
          ClassProgramme: "",
          EntityType: "",
          EntityList: [],
        };

      },

    },
  };

</script>

<style lang="scss" scoped>
  .page {
    ::v-deep .el-tabs__content {
      background: #f6f8fc;
      padding: 8px;
    }



  }

</style>
