<template>
  <div>

    <el-dialog :visible.sync="dialogVisible" title="选择元素" width="80%"  append-to-body >
      <div class="dialog-content boxswai">
                <div class="left-panel boxnei">
                    <el-tree :load="loadNode" lazy :props="defaultProps" @node-click="handleNodeClick" node-key="id" :expand-on-click-node="false"
                ></el-tree>
                </div>
       
        <div class="right-panel ">
        <div class="boxnei">
            <div style="display:flex">
                        <el-input placeholder="请输入你想搜索的表单名称" v-model="searchTitle"   clearable  >  </el-input>
                        <el-button type="primary" icon="el-icon-search"  size="small" @click="onLoad">搜索</el-button>
            </div>
            <el-table :data="tableData" class="tableclass" v-loading="tabloading">
                <el-table-column prop="title" label="元素表名称"></el-table-column>
                <el-table-column prop="tabType" label="元素表类型" with="120"></el-table-column>
                <el-table-column prop="elementTotal" label="元素总量"  width="80"></el-table-column>
                <el-table-column prop="tabOwner" label="所属方"></el-table-column>
                <el-table-column prop="fillRate" label="填报率" width="80"></el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-link type="primary" @click="selectElement(scope.row)">选择元素</el-link>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
              style="text-align: right;"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
            <div class="bottom-box">
              <el-tag type="info"  closable v-for="item in selectedData" :key="id" class="mr-5"   @close="handleClose(tag)">{{ item.eName }}</el-tag>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </span>
    </el-dialog>
   <checkDetailEle ref="checkDetailEleDialog"  @confirm-selection="handleConfirmSelection" ></checkDetailEle>
  </div>
</template>

<script>
import {tabTypeLazyTreeAll} from "@/api/manager/wbsprivate";
import checkDetailEle from "./checkDetailEle.vue";
export default {
  components: {
    checkDetailEle
  },
  data() {
    return {
      dialogVisible: false,
      defaultProps: {
        children:'children',
        label: 'title',
        isLeaf: function (data) {
          return !data.hasChildren || (data.isExistForm == 1);
        },
      },
      tableData: [],
      selectedElement: null,
      currentPage:1,
      treeId:'',
      tabloading:false,
      total:0,
      page:{
        currentPage:1,
        pageSize:10,
        total:0
      },
      searchTitle:'',
      rowId:'',
      selectedData:[]
     
    };
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    async loadNode(node, resolve) {
        const parentId = (node.level === 0) ? 12345678910 : node.data.id;
        tabTypeLazyTreeAll({parentId,current:1,size:1000}).then(res => {
            resolve(res.data.data.records.map(item => {
                return {
                ...item,
                leaf: !item.hasChildren
                }
            }))
        });
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.currentPage=1;
        this.page.pageSize=val
        this.onLoad(this.page)

    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.currentPage=val;
        this.page.pageSize=10
        this.onLoad(this.page)
    },
    onLoad(page){
        if(this.treeId){
        this.tabloading=true;
         this.tabTypeLazyTreeAll(this.treeId, page.currentPage,page.pageSize,this.searchTitle).then((res)=>{
          this.tableData=res.records
           this.total=res.total
           this.tabloading=false
        })
      }
    },
    async tabTypeLazyTreeAll ( parentId,current,size,titleName) {//清表树
      const { data: res } = await tabTypeLazyTreeAll({parentId,current,size,titleName}	)
      if (res.code === 200) {
        return res.data

      }
    },
    handleNodeClick(data,node) {
      console.log('节点被点击:', data);
      this.treeId=data.id
      // 根据节点数据更新表格数据
      this.page.pageSize=10;
      this.page.currentPage=1
      if(data.hasChildren){
        this.onLoad(this.page)
      }
      if(data.hasChildren===false&&node.level==2){
           this.tabloading=true;
          let arr=[]
            arr.push(data)
            this.tableData=arr
            this.total=1
            setTimeout(() => {
              this.tabloading=false

            }, 1000);
      }else{
           this.loadData=[]
           this.total=0
      }
    },
    selectElement(row) {
      this.selectedElement = row;
      this.$refs.checkDetailEleDialog.show(row.id,this.selectedData)
      console.log('选择的元素:', row);
    },
    confirmSelection() {
      if (this.selectedData) {
        console.log('确认选择的元素:', this.selectedData);
        this.$emit('confirmCheck', this.selectedData);
        this.dialogVisible = false;
      } else {
        this.$message.warning('请选择一个元素');
      }
    },
    handleConfirmSelection(selectedData) {
      this.selectedData=selectedData
      // 你可以在这里进行其他操作，比如更新状态、调用API等
    },
    handleClose(tag) {
        this.selectedData.splice(this.selectedData.indexOf(tag), 1);
      },
  }
};
</script>

<style scoped>

.dialog-content {
  display: flex;
  height: 500px;
}
.left-panel {
  width: 30%;
  padding-right: 20px;

  
}
.right-panel {
  width: 70%;
  margin-left:20px ;
}
.tableclass{
    width: 100%;height: 60%;margin-bottom: 15px;overflow-y: auto;
}
.bottom-box{
  width: 100%;
  height: 20%;
  border: 1px solid #DBDBDB;
  margin-top: 10px;
  padding: 5px;
}
.mr-5{
  margin-right: 5px;
}
</style>