<template>
  <div class="equipment-tree-container">
    <div>
      <a-button type="primary" icon="plus"  style="width:13%;" @click="handleAdd"/>
      <a-input-search style="width:85%;margin-left:2%" placeholder="请输入" @change="onChange" />
    </div>

    <div class="tree-container">
      <a-tree
        :expanded-keys="expandedKeys"
        auto-expand-parent
        :tree-data="tpmTreeData"
        @expand="onExpand"
        :replace-fields="replaceFields"
        @select="selectNode"
        blockNode
        >
        <template v-slot:title="nodeData">
          <div style="display: flex; justify-content: space-between; width: 100%;">
            <div>{{nodeData.interlockName}}</div>
            <div>
              <a-dropdown>
                <a-icon type="more" />
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a @click="handleEdit(nodeData)">修改</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(nodeData.id)">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </template>
        <!-- :filter-tree-node="filterTreeNode" -->
      </a-tree>
    </div>

    <!-- 新增修改弹框 -->
    <base-InterLock-modal ref="modalForm" @ok="modalFormOk"></base-InterLock-modal>
  </div>
</template>

<script>
  import { getAction,deleteAction } from '@api/manage'
  import BaseInterLockModal from '../../../views/module_interLock/baseInterLock/modules/BaseInterLockModal.vue'
  export default({
    name: 'UEquipmentTree',
    components: {
      BaseInterLockModal
    },
    data () {
      return {
        expandedKeys: [],
        searchValue: '',
        autoExpandParent: true,
        tpmListData: [], // 原始数据
        // tpmTreeData: [], // 树形列表使用数据
        tpmTreeData: [], // 树形列表使用数据
        replaceFields: {
          children: 'children',
          title: 'interlockName',
        },
        url: {
          delete: "/base/interlockBase/delete",
        },
      }
    },
    created() {
      this.getTpmTreeData()
    },
    methods: {
      getTpmTreeData(){
        // 现版本
        // getAction(`/base/interlockBase/lever12`).then(res=>{
        // 原版本
        getAction(`/base/interlockBase/list`).then(res=>{
          // if (res.success) {
            console.log('11111',res)
            // 防止res.result对tpmListData造成地址赋值的问题
            this.tpmListData = JSON.parse(JSON.stringify(res))
            // 现版本
            // this.tpmTreeData = this.tpmListData
            // 原版本
            this.tpmTreeData = this.handleTree(res, "id", "pid")
            console.log(this.tpmTreeData)
          // } else {

          // }
        })
      },
      filterTreeNode(node) {
        // console.log(node)
        // if (!inputValue) return true;
        return node.title.indexOf('设备') !== -1;
      },
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onChange(e) {
        const value = e.target.value;
        // 筛选后数据
        var filterData = []
        // 筛选符合条件的数据：包含当前搜索的项
        console.log('原数据',this.tpmListData)
        filterData = this.tpmListData.filter(item => (item.interlockName.indexOf(value) !== -1))
        // var data = []
        // filterData.forEach(item => {
        //   var arr = this.tpmListData.filter(data => item.pid === data.id)
        //   console.log('父级', arr)
        //   // filterData = [...filterData, ...arr]
        // })
        // 循环寻找父级
        // console.log(this.findParents(this.tpmTreeData, '287813167808513'))



        // 原版本
        this.tpmTreeData = this.handleTree(filterData, "id", "pid")
        // 现版本
        // this.tpmTreeData = filterData
        // const expandedKeys = dataList.map(item => {
        //   if (item.name.indexOf(value) > -1) {
        //       // return getParentKey(item.key, gData);
        //       return this.filterNode(item.key, gData);
        //   }
        //   return null;
        // }).filter((item, i, self) => item && self.indexOf(item) === i);
        // Object.assign(this, {
        //   expandedKeys,
        //   searchValue: value,
        //   autoExpandParent: true,
        // });
      },
      // findParents(treeData,id){
      //   let allparents = []
      //   if(treeData.length==0){
      //     return
      //   }

      //   let findele = (data,id) => {
      //     if(!id) return
      //     data.forEach((item,index) => {
      //       if(item.id == id){
      //         allparents.unshift(item.id)
      //         findele(treeData,item.parentid)

      //       }else{
      //         if(!!item.children){
      //             findele(item.children,id)
      //         }

      //       }
      //     })
      //   }

      //   findele(treeData,id)
      //   return allparents

      // },
      selectNode(selectedKeys, e){
        this.$emit('select', selectedKeys, e)
      },
      handleAdd: function () {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "新增";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDelete: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {id: id}).then((res) => {
          if (res.success) {
            that.getTpmTreeData();
            that.$message.success(res.message);
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      modalFormOk() {
        // 新增/修改 成功时，重载列表
        this.getTpmTreeData();
      },
    },
  })
</script>

<style lang="less" scoped>
.equipment-tree-container{
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
  .tree-container{
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
  }
}
</style>
