<template>
  <div class="page">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <!-- <el-tab-pane label="字典模版" name="first"></el-tab-pane>
      <el-tab-pane label="分类模版" name="second"></el-tab-pane> -->
      <el-tab-pane label="实体模版" name="third">
        <third-box ref="thirdBox" :downTypeList='downTypeList' :treeLoading='treeLoading' :treeData="thirdTree"
          :defaultProps="entityDefaultProps" @handleNodeClick="handleNodeClick"
          :dictionariesFormVal="dictionariesFormVal" :clickObj="clickObj" @handleClick='handleClick' />
      </el-tab-pane>
      <el-tab-pane label="界面模版" name="fourth">
        <fourth-box v-if="activeName === 'fourth'"></fourth-box>
      </el-tab-pane>
      <!-- <el-tab-pane label="功能模版" name="fifth">功能模版</el-tab-pane>
      <el-tab-pane label="报表模版" name="sixth">报表模版</el-tab-pane>
      <el-tab-pane label="元数据标准" name="seventh">
        <seven-box ref="seven" @insertRecord='handleClick(clickTab)' :sevenLoading='sevenLoading'></seven-box>
      </el-tab-pane>
      <el-tab-pane label="四性检测" name="eighth">
        <eight-box ref="eightBox" :tableDataOne='tableDataOne' :tableDataTwo='tableDataTwo'
          :tableDataThree='tableDataThree' />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import thirdBox from "./components/third";
  import fourthBox from "./components/fourth";
  import sevenBox from "./components/seven";
  import eightBox from "./components/eight";
  import {
    getFourCheckStandard,
    getFourCheckSetting
  } from "@/api/system-management/templateSetting"
  export default {
    data() {
      return {
        // tab选中
        activeName: "third",
        // 树结构数据
        clickObj: {},
        nodeObj: {},
        clickTab: {},
        treeLoading: false,
        entityDefaultProps: {
          label: "className",
          children: "tentityType",
        },
        //eight
        tableDataOne: [],
        tableDataTwo: [],
        tableDataThree: []
      }
    },
    components: {
      thirdBox,
      fourthBox,
      sevenBox,
      eightBox
    },
    computed: {
      ...mapState({
        thirdTree: (state) => state.templateSetting.thirdTree,
        downTypeList: (state) => state.templateSetting.downTypeList,
      }),
      dictionariesFormVal: {
        get() {
          return this.$store.state.templateSetting.dictionariesFormVal;
        },
        set(val) {
          this.$store.state.templateSetting.dictionariesFormVal = val;
        },
      },
      sevenLoading: {
        get() {
          return this.$store.state.templateSetting.sevenLoading;
        },
        set(val) {
          this.$store.state.templateSetting.sevenLoading = val;
        },
      },
    },
    methods: {
      handleClick(tab) {
        if (tab.name === 'eighth' && this.clickTab.name === 'eighth') {
          return
        }
        this.clickTab = tab;
        switch (tab.name) {
          case 'first':
            break;
          case 'second':
            break;
          case 'third':
            this.clickObj = {}
            this.$refs.thirdBox.entityForm = {}
            this.$refs.thirdBox.entityCopyForm = {}
            this.treeLoading = true;
            this.$store.dispatch("templateSetting/getEntityTree").then(res => {
              this.treeLoading = false;
            }).catch(err => {
              this.treeLoading = false;
            });
            break;
          case 'fourth':

            break;
          case 'fifth':
            break;
          case 'sixth':
            break;
          case 'seventh':
            this.$refs.seven.tableTwoData = []
            this.sevenLoading = true
            this.$store.dispatch('templateSetting/getRecordList').catch(err => {
              this.sevenLoading = false
            })
            break;
          case 'eighth':

            getFourCheckStandard({
              type: 'YJ'
            }).then(res => {
              this.tableDataOne = res.body.list
              this.getEcho('YJ', 'One')
            })
            getFourCheckStandard({
              type: 'GD'
            }).then(res => {
              this.tableDataTwo = res.body.list
              this.getEcho('GD', 'Two')
            })
            getFourCheckStandard({
              type: 'BC'
            }).then(res => {
              this.tableDataThree = res.body.list
              this.getEcho('BC', 'Three')
            })
            break;
        }
      },
      getEcho(val, name) {
        getFourCheckSetting({}).then(res => {
          this.$refs.eightBox['multipleSelection' + name] = res.body[val]
          this['tableData' + name].forEach((item, index) => {
            res.body[val].forEach(ele => {
              if (item.number === ele) {
                this.$refs.eightBox.$refs['table' + name].toggleRowSelection(item)
              }
            })
          })
        })
      },
      handleNodeClick(data, node) {
        this.clickObj = data;
        this.nodeObj = node;
        switch (this.activeName) {
          case 'first':
            break;
          case 'second':
            break;
          case 'third':
            if (!data.hasOwnProperty('classType')) {
              this.$store.dispatch("templateSetting/getTentityType", {
                id: data.id
              })
            } else {
              this.dictionariesFormVal = {
                ...data,
                isType: 2,
              };
            }

            break;
          case 'fourth':
            break;
          case 'fifth':
            break;
          case 'sixth':
            break;
          case 'seventh':
            break;
          case 'eighth':
            break;
        }
      },
      getdownTypeList() {
        this.$store.dispatch('templateSetting/getFindList', {
          type: 'downTypeList'
        })
      },
    },
    mounted() {
      this.handleClick({
        name: "third"
      });
      this.getdownTypeList();
    },
  }

</script>
<style lang="scss" scoped>
  .page {



    ::v-deep .el-tabs__content {
      background: #f6f8fc;
      padding: 8px;
    }




  }

</style>
