<template>
  <div class="box">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: '8px' }" 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>
        <el-button @click="addStore" v-if="!status&&showButtons.addRoom" size="mini" type="primary">新增库房</el-button>
        <!-- <el-button v-if="!status" size="mini" type="primary">同步库房信息</el-button> -->
      </div>
      <div class="treeClass">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 200px)">
        <el-tree v-loading="treeLoading" highlight-current :data="treeData" :props="defaultProps"
          :expand-on-click-node="false" @node-click="handleNodeClick" :load="loadNode" lazy>
          <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.status "
              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'>
      <div slot="header" class="clearfix">
        <span v-show="!status">库房编辑</span>
      </div>
      <right-form ref="rightFoem" :treeRow='treeRow' :showButtons="showButtons" :treeNode='treeNode' @getTree='getTree'
        @cancels='cancels' @handleNodeClick='handleNodeClick' />
    </el-card>
    <dai-add ref="daiAdd" :diaFlage='diaFlage' @cancel='cancel' @getTree='getTree' />
  </div>
</template>

<script>
  import {
    queryTree,
  } from "@/api/intelligent-warehouse/warehouse-setting/room-setting.js"
  import rightForm from "./components/rightForm.vue"
  import daiAdd from "./components/daiAdd.vue"
  import {
    mapState
  } from "vuex";
  import {
    clearObjValue,
    dragControllerDiv
  } from '@/utils/common';
  export default {
    data() {
      return {
        status: false,
        defaultProps: {
          // children: 'childs',
          label: 'storeName',
          isLeaf: 'status'
        },
        treeRow: {},
        treeNode: {},
        diaFlage: false,
        // 保存上架区域临时存储
        addressObj: {}
      }
    },
    components: {
      rightForm,
      daiAdd
    },
    computed: {
      ...mapState({
        treeData: (state) => state.roomSet.treeData,
        showButtons: (state) => state.roomSet.showButtons,
        // downTypeList: (state) => state.roomSet.downTypeList,
      }),
      treeLoading: {
        get() {
          return this.$store.state.roomSet.treeLoading;
        },
        set(val) {
          this.$store.state.roomSet.treeLoading = val;
        },
      },
    },
    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%';
          }
        }
      }
    },
    methods: {
      btns() {
        this.status = !this.status
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([]);
        }
        let data = []
        queryTree({
          pId: node.data.id
        }).then(res => {
          data = res.body.tree
        })
        setTimeout(() => {
          resolve(data);
        }, 500);
      },
      handleNodeClick(tab, node) {
        this.$refs.rightFoem.btnType = false
        this.treeRow = tab
        this.treeNode = node
        this.$refs.rightFoem.form.fatherName = node.parent.label
        this.$refs.rightFoem.form.id = tab.id
        this.$refs.rightFoem.form.ip = tab.ip
        this.$refs.rightFoem.form.storeName = tab.storeName
      },
      getTree() {
        this.treeLoading = true
        this.$store.dispatch("roomSet/queryTree", {
          pId: -1
        }).catch(err => {
          this.treeLoading = false
        })
      },
      addStore() {
        this.diaFlage = true
      },
      cancel() {
        this.diaFlage = false
      },
      cancels() {
        this.treeRow = {}
        this.treeNode = {}
      }
    },
    mounted() {
      dragControllerDiv()
    },
    created() {
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.$store.dispatch("roomSet/getButtonList", btnData);
      this.getTree()

    }
  }

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

    .tree-box {
      width: 22%;
      // height: 720px;
      overflow-y: auto;

      .treeClass {
        padding: 0 10px
      }

      .el-tree {
        width: 100%;
        margin-top: 10px;

      }

      .btnClass {
        text-align: right;
      }

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

    }

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

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

    }

  }

</style>
