<template>
        <el-dialog
            :visible.sync="allocatedialogVisible"
            title="关联WBS"
            width="500"
            append-to-body
        >
        <div class="flex1 ov-hidden" style="height: 500px;">
            <el-scrollbar class="h-100p">
                <div v-loading="treeLoad">
                  <el-tree
                    :key="treeKey"
                    class="filter-tree"
                    lazy
                    :load="loadNode"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    highlight-current
                    check-strictly
                    :check-on-click-node="false"
                    node-key="id"
                    ref="tree"
                    >
                  <span class="custom-tree-node" slot-scope="{node,data}" style="justify-content: flex-start;">
                   <span> <el-checkbox v-model="data.checked" v-if="!data.hasChildren" @change="handleCheck($event,data)"></el-checkbox></span>
                    {{ node.label }}
                
                  </span>
                    </el-tree>
        
                </div>
              </el-scrollbar>
        </div>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="quitWbs">取消</el-button>
                <el-button type="primary" @click="saveWbs" :loading="saveLoading">
                确认
                </el-button>
            </div>
            </template>
      </el-dialog>
 </template>
  
  <script>
  import { getLazytree,syncFormToContractNode} from "@/api/manager/wbsprivate";
  import { mapGetters } from "vuex";
  
  export default {
    props:{
        projectId:'',
        wbsId:'',
        wbsType:'',
        id:"",
        treeKey:Math.random()
    },
    data () {
     return {
        allocatedialogVisible:false,
        treeLoad:false,
        defaultProps: {
        children: "children",
        label: "title",
        isLeaf: function (data) {
          //console.log(data, !data.hasChildren, data.isExistForm);
          let tag = false;
          if (!data.hasChildren) {
            tag = true;
          }
          if (data.isExistForm == 1) {
            tag = true;
          }
          if (data.nodeType >= 6 && data.nodeType <= 13) {
            tag = true;
          }
          //中间交工。开工报告、质量评定）
          if (
            data.majorDataType == 1 ||
            data.majorDataType == 2 ||
            data.majorDataType == 3
          ) {
            tag = true;
          }
          return tag;
          // return !data.hasChildren || (data.isExistForm == 1);
        },
       
      },
      selectData:[],
      saveLoading:false
     }
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    watch: {
      id: {
        handler: function(n) {
          this.id=n
        },
        deep: true,
      },
    },
    
    created () {
     
    },
    mounted () {
      
    },
    methods: {
     show(){
        this.allocatedialogVisible=true
        this.treeKey=Math.random()
        this.selectData=[]
     },
     renderContent(h, { node, data, store }) {
      // 只有当节点没有子节点时才显示复选框
      if (!data.hasChildren ) {
        return (
          <span>
            <el-checkbox v-model={data.checked}></el-checkbox>
            <span>{node.label}</span>
          </span>
        );
      } else {
        return (
          <span>{node.label}</span>
        );
      }
    },
     loadNode(node, resolve) {
        let pid = 0;
        if (node.level != 0) {
            pid = node.data.id;
        }
        getLazytree(this.wbsId, pid, this.userInfo.tenant_id, this.projectId, {
            wbsType: this.wbsType,
        }).then((res) => {
            let arr = [];
            if (Array.isArray(res.data.data)) {
            arr = res.data.data;
            }

            return resolve(arr);
        });
    },
    handleCheck(isCheck,data){
      if(isCheck){
        this.selectData.push(data)
      }else{
        const index = this.selectData.indexOf(data); // 找到要删除的对象的索引
        if (index !== -1) {
          this.selectData.splice(index, 1); // 从数组中删除指定索引位置的元素
        }
      }
    
    },
    async saveWbs(){
      console.log(this.selectData,'this.selectData');
      const nodesIdArray = this.selectData.map(obj => obj.primaryKeyId); 
      const commaSeparatedIds = nodesIdArray.join(','); // 使用逗号连接数组中的所有元素
      this.saveLoading=true
      const { data: res } =await syncFormToContractNode({nodeIds:commaSeparatedIds,projectId:this.projectId,primaryKeyId:this.id})
      this.saveLoading=false
      if (res.code == 200) {
       this.$message.success(res.msg)
        this.allocatedialogVisible=false
        this.selectData=[]
      }
 
    },
    quitWbs(){
      this.allocatedialogVisible=false;
      this.selectData=[]
    }
  
    }
  };
  </script>
  
  <style scoped lang="scss">
  </style>
  