<!-- 使用方法 样例 -->
<template>
  <div class="trigger_tree">
    <TreeDynamic
      :tree-data="treeData"
      :tree-props="treeProps"
      @treeNodeClick="treeNodeClick"
    >
      <template slot-scope="{ data }">
        <span v-show="data.show" title="添加子级" class="el-icon-plus" />
        <span v-show="data.show" title="编辑" class="el-icon-edit" />
        <span v-show="data.show" title="删除" class="el-icon-close" />
      </template>
    </TreeDynamic>
  </dev>
</template>

<script>
export default {
  name: 'TriggerDialog',
  components: {
    // 树结构引入，如注册全局组件则克直接使用
    TreeDynamic: () => import('./TreeDynamic.vue')
  },
  props: {},
  data() {
    return {
      // 树结构数据
      treeData: [
        {
          'id': '1745253848118845442',
          'name': '对象分类',
          'value': 'objectClass',
          'businessCode': 'objectClass',
          'level': 1,
          'children': [
            {
              'id': '12618484347122',
              'name': '设备',
              'value': 'shebei',
              'level': 2,
              'children': [
                {
                  'id': '12618485050290',
                  'name': '容器类',
                  'value': 'rongqilei',
                  'level': 3,
                  'children': [
                    {
                      'id': '12618485152250',
                      'name': '分离器',
                      'value': 'fenliqi',
                      'level': 5
                    },
                    {
                      'id': '12618484578645',
                      'name': '过滤器',
                      'value': 'guolu:qi',
                      'level': 4
                    },
                    {
                      'id': '12618485917543',
                      'name': '容器',
                      'value': 'rongqi',
                      'level': 4
                    },
                    {
                      'id': '1754016181494267905',
                      'name': '篮式过滤器',
                      'value': 'lanshiguolu:qi',
                      'level': 4
                    }
                  ]
                }
              ]
            }
          ]
        }, {
          'id': '12618484760325',
          'name': '电气',
          'value': 'dianqi',
          'level': 2,
          'children': [
            {
              'id': '12618485975945',
              'name': '变压器类',
              'value': 'bianyaqilei',
              'level': 3,
              'children': [
                {
                  'id': '12618485384756',
                  'name': '变压器',
                  'value': 'bianyaqi',
                  'level': 4
                },
                {
                  'id': '12618485707383',
                  'name': '箱式变电站',
                  'value': 'xiangshibiandianzhan',
                  'level': 4
                },
                {
                  'id': '12618485371135',
                  'name': '光伏电站',
                  'value': 'guangfudianzhan',
                  'level': 4
                }
              ]
            },
            {
              'id': '12618485814127',
              'name': '发电机',
              'value': 'fadianji',
              'level': 3,
              'children': [
                {
                  'id': '12618485358015',
                  'name': '燃气轮发电机',
                  'value': 'ranqilunfadianji',
                  'level': 4
                },
                {
                  'id': '12618483950122',
                  'name': '燃气内燃发电机',
                  'value': 'ranqineiranfadianji',
                  'level': 4
                },
                {
                  'id': '12618485975170',
                  'name': '双燃料发电机',
                  'value': 'shuangranliaofadianji',
                  'level': 4
                },
                {
                  'id': '12618485691024',
                  'name': '应急柴油发电机',
                  'value': 'yingjichaiyoufadianji',
                  'level': 4
                }
              ]
            },
            {
              'id': '12618485453906',
              'name': '开关设备和控制设备',
              'value': 'kaiguanshebeihekongzhishebei',
              'level': 3,
              'children': [
                {
                  'id': '12618483905472',
                  'name': '低压成套开关设备',
                  'value': 'diyachengtaokaiguanshebei',
                  'level': 4
                },
                {
                  'id': '12618484387637',
                  'name': '中压成套开关设备树结构长度测试',
                  'value': 'zhongyachengtaokaiguanshebei',
                  'level': 4
                }
              ]
            },
            {
              'id': '12618484918030',
              'name': '电源装置',
              'value': 'dianyuanzhuangzhi',
              'level': 3,
              'children': [
                {
                  'id': '12618484390629',
                  'name': 'AC UPS',
                  'value': 'AC UPS',
                  'level': 4
                },
                {
                  'id': '12618484534407',
                  'name': 'DC UPS',
                  'value': 'DC UPS',
                  'level': 4
                }
              ]
            },
            {
              'id': '12618484767931',
              'name': '配电箱类',
              'value': 'peidianxianglei',
              'level': 3,
              'children': [
                {
                  'id': '12618485304400',
                  'name': '配电箱',
                  'value': 'peidianxiang',
                  'level': 4
                }
              ]
            },
            {
              'id': '12618485729502',
              'name': '变频器类',
              'value': 'bianpinqilei',
              'level': 3,
              'children': [
                {
                  'id': '12618483944869',
                  'name': '变频器',
                  'value': 'bianpinqi',
                  'level': 4
                }
              ]
            },
            {
              'id': '12618485102937',
              'name': '软起动器类',
              'value': 'ruanqidongqilei',
              'level': 3,
              'children': [
                {
                  'id': '12618484212277',
                  'name': '软起动器',
                  'value': 'ruanqidongqi',
                  'level': 4
                }
              ]
            },
            {
              'id': '12618485021977',
              'name': '电机类',
              'value': 'dianjilei',
              'level': 3,
              'children': [
                {
                  'id': '12618484664538',
                  'name': '电机',
                  'value': 'dianji',
                  'level': 4
                }
              ]
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: { },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /* 点击树结构返回数据 */
    treeNodeClick(node) {
      console.log(node)
    }
  }
}
</script>
<style lang="scss" scoped>
.trigger_tree {
  height: 100%;
  width: 300px;
background-color: #fff;
}
.el-icon-plus, .el-icon-edit, .el-icon-close {
  color: #1890ff;
  text-align: right;
  margin-right: 8px;
  font-size: 14px;
}
</style>
