
<template>
  <div class="root">
    <div class="operation">
      <div>
        <el-button type="success" @click="dialogBatchImport">批量导入小区楼栋信息</el-button>
      </div>
    </div>
    <el-tree
      :default-expanded-keys="liste"
      :props="defaultProps"
      :load="loadTree"
      lazy
      show-checkbox
      node-key="id"
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
  </div>
</template>

<script>
 let id = 1000;
import { mapActions, mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      treeQuery: {
        id: '',
        treeType: '',
        nodeNumber: '',
        id:'',
        type:'',
        name: ''
      },
      defaultProps: {
        label: 'name', 
        isLeaf: 'leaf',
      },
      liste: []
    }
  },
  computed: {
    ...mapState('buildingTree', {
      buildingTreeList: s => s.list
    }),
    ...mapGetters([
      'userData'
    ]),
    
    defaulData() {
      return [{
        name: this.userData.communityName,
        id: this.userData.id,
        type: 'phase'
      }]
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    
  },
  methods: {
    append(data) {
      this.treeQuery.id = data.id
      this.treeQuery.name = data.name
      this.treeQuery.type = data.type
      if(data.type=='end'){
        this.$message({
            type: 'info',
            message: '当前节点不允许添加'
          }); 
          return
      }
      this.$prompt('请输入当前节点', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
            this.treeQuery.nodeNumber = value
            console.log(data.label)
        console.log('当前节点',data.id)
        console.log('当前名称',data.name)
        console.log('当前类型',data.type)
        console.log('输入的值',this.treeQuery.nodeNumber)
        this.aAddNode(data.id)
        }) 
    },
      aAddNode(id){
      // 添加当前节点
      this.$store.dispatch('AddNode', this.treeQuery).then((res) => {
         console.log('res.code',res)
        if(res.code=='1'){
        this.$message({
          showClose: true,
          message: res.message,
          type: 'warning'
        })
        return
        }   
          this.$router.go(0)
      }).catch(() => {
        console.log('error addNode')
      })
      },
      //删除当前节点
      remove(data){
      this.treeQuery.id = data.id
      this.treeQuery.name = data.name
      this.treeQuery.type = data.type
      this.$store.dispatch('DeleteNode', this.treeQuery).then((res) => {
        if(res.code=='1'){
          this.$message({
          showClose: true,
          message: res.message,
          type: 'warning'
        }) 
        return 
        }
         location.reload()
      }).catch(() => {
        console.log('error addNode')
      })
      },
    ...mapActions('buildingTree', [
      'BuildingTreeList'
    ]),
    loadTree(node, resolve) {
      if (node.level === 0) {
          return resolve(this.defaulData);
        }
          this.treeQuery.treeType = node.data.type
          this.treeQuery.id = node.data.id
          this.BuildingTreeList(this.treeQuery).then(response => {
            console.log(response.data)
              if (response.code === "0") {
                resolve(response.data);
              }
          }).catch(() => {
            console.log("get tree error");
          });
    },
    dialogBatchImport() {
      this.$router.push({ name: 'building-batch-import' })
    },

    renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>添加节点</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(data) }>删除节点</el-button>
            </span>
          </span>);
      }
  }
}
</script>

<style >
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 30%;
  }
.root{
  display: flex;
  flex-flow: column;
}
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.operation{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>

