<template>
<el-dialog
  title="企业树"
  :visible.sync="treeVisible"
  v-el-drag-dialog
  :close-on-click-modal="false"
  width='498px'
  @close="closeHandle">
  <div v-loading="loading" :style="{'height':nodeHeight+'px'}" class="flex-tree" style="padding: 10px 50px;    min-width: 377px;margin: 0 auto;">
    <el-scrollbar style="height:100%">
      <el-tree
        class="my-tree"
        id="myTree"
        ref="myTree"
        style="overflow-y: scroll;"
        :data="filterTree"
        :indent="0"
        node-key="id"
        :current-node-key="currentNodeKey"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
      <!-- :render-content="renderContent" -->
        <template slot-scope="{node,data}">
          <el-tooltip effect="dark" :content="node.label" placement="top"
            v-if="node.label.length > 20">
            <span class="node-cnt">
              <img class="node-img" :src="imgPathUrl(data)" />
              <span class="node-sp">{{node.label}}</span>
            </span>
          </el-tooltip>
          <span class="node-cnt" v-else>
              <img class="node-img" :src="imgPathUrl(data)" />
              <span class="node-sp">{{node.label}}</span>
          </span>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
</el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import http from '@/api/http';
export default {
  directives: { elDragDialog },
  data() {
    return {
      loading: false,
      treeVisible: false,
      nodeHeight: 381,
      filterTree: [],
      currentNodeKey: undefined,
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'childs',
        label: 'custName'
      }
    }
  },
  methods: {
      imgPathUrl(data) {
      let { custType } = data;
      let imgPath = "";

      switch(custType) {
        case 1: {
          imgPath = require('@/assets/images/zigongsi.png')
          break;
        }
        case 2: {
          imgPath = require('@/assets/images/mugongsi.png');
          break;
        }
        case 3: {
          imgPath = require('@/assets/images/zigongsi.png');
          break;
        }
        case 4: {
          imgPath = require('@/assets/images/fengongsi.png');
          break;
        }
        default:
        break;
      }
      return imgPath;
    },
    init(row) {
      this.treeVisible = true
      this.$nextTick(() => {
        this.queryTreeLists(row)
      })
    },
    // 查询企业树信息列表
    queryTreeLists(row) {
      console.log(row);
      this.loading = true
      http.post('/cust/queryTreeLists', { id: row.custType !== 2 ? row.rootEnterpriseId : row.id }).then((res) => {
        this.loading = false
        this.filterTree = res.data || []
        this.$nextTick(() => {
          if (row.id) {
            this.currentNodeKey = row.id
            this.$refs.myTree.setCurrentKey(row.id)
          }
        })

      }).catch(() => { this.loading = false })
    },
    closeHandle() {},
    handleNodeClick(data) {},

    // 节点渲染
    renderContent(h, { node, data, store }) {
      let { isLeaf, level } = node;
      let { custType } = data;
      let imgPath = ''
      switch(custType) {
        case 1: {
          imgPath = require('@/assets/images/zigongsi.png')
          break;
        }
        case 2: {
          imgPath = require('@/assets/images/mugongsi.png');
          break;
        }
        case 3: {
          imgPath = require('@/assets/images/zigongsi.png');
          break;
        }
        case 4: {
          imgPath = require('@/assets/images/fengongsi.png');
          break;
        }
        default:
        break;
      }
      return (
        <span class="custom-tree-node">
          <span class="node-cnt">
            <img class="node-img" src={imgPath} />
            <span class="node-sp">{node.label}</span>
          </span>
        </span>
      );
    },
  }
}
</script>

<style lang="scss" scoped>
@import '~@/views/businessparameters/tree.scss';
.node-cnt{
  span{
    display: inline-block;
    width: 300px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}
</style>
