<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>
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 170px)">
          <el-tree v-loading="treeLoading" highlight-current :data="treeData" :props="defaultProps" default-expand-all
            @node-click="handleNodeClick"
            @node-drop="handleDrop"
            :allow-drop="allowDrop"
            draggable>
            <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>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm'>
      <cateSet ref="cate" :treeNodeData="treeNodeData" :btnFlage="btnFlage" :formDataFlage="formDataFlage"
        :formData="formData" :nowSort="nowSort" :EntityList="EntityList" :downTypeList="downTypeList"
        @reduction="reduction" @initGetTree="initGetTree" />

    </el-card>
  </div>
</template>
<script>
  import {
    falseObjValue,
    dragControllerDiv
  } from "@/utils/common.js";
  import {
    mapState
  } from "vuex";
  import cateSet from "./components/categorySet";
  import { dragClassTree } from '@/api/system-management/categoryManagement'

  export default {
    props: {
      btnFlage: {
        type: Object,
        default: () => {}
      },
      treeNodeData: {
        type: Object,
        default: () => {}
      },
      formDataFlage: {
        type: Object,
        default: () => {}
      },
      formData: {
        type: Object,
        default: () => {}
      },
      nowSort: {
        type: Number,
        default: () => null
      },
    },
    data() {
      return {
        status: false,
        fatherId: "",
        // 树形结构数据
        defaultProps: {
          children: "childClass",
          label: "className",
        },
      }
    },
    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 = '22%';
            cardForm.width = '77%';
          }
        }
      }
    },
    components: {
      cateSet,
    },
    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;
        },
      },
    },
    methods: {
      allowDrop(draggingNode, dropNode, type) {
        if(dropNode.data.classType === 'C' && type === 'inner'){
          return false
        }else{
          return true
        }
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        let params = JSON.parse(JSON.stringify(draggingNode.data))
        if(dropType === 'inner'){
          params.pId = dropNode.data.id
        }else{
          params.pId = dropNode.parent.data.id || -1
        }
        dragClassTree(params).then(res => {
          if(res.code === '100'){
            message('success', '门类拖拽成功', 2000)
          }
        })
      },
      initGetTree(val) {
        this.$emit('initGetTree', val)
      },
      handleNodeClick(data, node, ele) {
        this.$emit('handleNodeClick', data, node, ele);
        this.$refs.cate.getIds(data);
      },
      //取消还原缓存
      reduction() {
        this.formData = JSON.parse(this.$refs.cate.beforeForm);
        this.btnFlage = JSON.parse(this.$refs.cate.beforeBtn);
        this.formDataFlage = JSON.parse(this.$refs.cate.beforeformDataFlage);
      },

      btns() {
        this.status = !this.status
      },
    },
    mounted() {
      dragControllerDiv()
    }
  }

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

    .tree-box {
      width: 22%;
      background-color: #fff;
      padding: 5px 10px;

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

    .form-box {
      width: 77%;
      height: calc(100vh - 90px);
      overflow-y: auto;

      background-color: #fff;
      padding: 5px 10px;
    }
  }

</style>
