<template>
<el-dialog
    title="引用元素表"
    :visible.sync="dialogVisible"
    width="70%"
    append-to-body
    destroy-on-close
    custom-class="flow-design-dialog"

    >

      <div  class="flexStar" >
        <div class="boxswai" style="width:30%;padding-left:0px;height:747px">
           <div class="boxnei" style="display: flex;flex-direction: column;">
             <div style="overflow: auto;flex:1">
                <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"   style="display: inline-block;min-width: 100%;"></avue-tree>
             </div>
           </div>
        </div>
         <div class="boxswai" style="width:70%;padding-left:0px;padding-right:0px;height:747px">
            <div class="boxnei"  style="flex:1;">
                <avue-crud
                  :data="loadData"
                  :option="loadOption"
                  v-model="obj"
                  :page.sync="page"
                  @on-load="quteonLoad"
                  @selection-change="selectionChange"
                  :table-loading="loading"
                  @current-change="currentChange"
                  @size-change="sizeChange"
                  ref="crud"
                 class="tableclass">
                    <template slot="menuLeft" slot-scope="{size}">
                    <div style="display:flex">
                      <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size"  clearable  @clear="clearinput" >  </el-input>
                        <el-button type="primary" icon="el-icon-search"  size="small"  @click="searchChange">搜索</el-button>
                    </div>
                    </template>
                  </avue-crud>
              </div>
            </div>
     </div>


        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitQute">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {tabTypeLazyTreeAll,projecttabInfo} from "@/api/manager/wbsprivate";
export default {
    data() {
      return {
        input3:'',
        dialogVisible:false,
        obj: {},
        treeData:[],

        treeOption:{
          filter:false,
          addBtn:false,
          indexFixed:false,
          selectionFixed:false,
          expandFixed:false,
          props:{
            labelText:'标题',
            label:'title',
            value:'id',
            children:'children'
          },
          lazy: true,
          treeLoad: function (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
                  }
                }))

              });
          },
        },
      selectionList:[],
      loadData:[],
      loading:false,
      loadOption: {
          height: 600,
          calcHeight: 30,
          tip: false,
          searchShow:false,

          border: true,
          index: true,
          viewBtn: false,
          selection: true,
          editBtn:false,
          delBtn:false,
          addBtn:false,
          menu:false,

          dialogClickModal: false,
         column: [
          {
            label: "元素表名称",
            prop: "title",
            editDisplay: false,
            addDisplay: false,
          },
          {
            label: "元素表类型",
            prop: "tabType",
            // search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },

          {
            label: "元素总量",
            prop: "elementTotal",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所书方",
            prop: "tabOwner",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "填报率",
            prop: "fillRate",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
        ],

        },
        page:{
          current:1,
          size:10,
          total:10
        },
        treeId:'',
        curTreedata:[],
        curTreeNode:{},

     }
    },
    props:{
      projectid:String,
      onLoad1:Function,
      refreshTree:Function
    },
    computed:{
     ids () {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
    created(){
      //  this.loadData=this.loadData1;

    },


  methods: {
    quteonLoad(page){
       if(this.input3||this.treeId){
         this.loading=true;
          this.tabTypeLazyTreeAll(this.treeId, page.currentPage,page.pageSize,this.input3).then((res)=>{
          this.loadData=res.records
          this.page.total=res.total;
          this.loading=false
        })
       }


    },
    selectionChange (list) {
      this.selectionList = list;
    },
    selectionClear () {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
    },
    currentChange (currentPage) {
    this.page.current = currentPage;
    this.page.currentPage = currentPage;
      //  this.searchChange();

    },
    sizeChange (pageSize) {
        this.page.size = pageSize;
      //  this.searchChange();

    },
      //搜索
    searchChange(){
      if(this.treeId){
            if(this.curTreedata.hasChildren){
            this.loading=true
             this.tabTypeLazyTreeAll(this.curTreedata.id, this.page.current,this.page.size,this.input3).then((res)=>{
              this.loadData=res.records
              this.page.total=res.total
              this.loading=false
            })
          }
        if(this.curTreedata.hasChildren===false&&this.curTreeNode.level==2){
           this.loading=true
          let arr=[]
            arr.push(this.curTreedata);
            this.loadData=arr
            this.page.total=1
            setTimeout(() => {
            this.loading=false

            }, 1000);
        }else{
           this.loading=true
           this.loadData=[]
           this.page.total=0
           setTimeout(() => {
              this.loading=false

            }, 1000);
        }
      }else{
        //  this.$message.warning("请先选择左侧节点");
        if(this.input3){
           this.page.current=1;
          this.page.currentPage=1
           this.loading=true
          this.tabTypeLazyTreeAll(this.curTreedata.id, this.page.current,this.page.size,this.input3).then((res)=>{
          this.loadData=res.records
          this.page.total=res.total
          this.loading=false
          })
        }else{
            this.$message.warning("请输入你想搜索的表单名称");
        }

      }

    },
    clearinput(){
      this.searchChange()
    },
    resetChange(item){
      console.log(item);
        this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size).then((res)=>{
          this.loadData=res.records
          this.page.total=res.total

        })
    },
    async tabTypeLazyTreeAll ( parentId,current,size,titleName) {//清表树
      console.log(parentId);
      const { data: res } = await tabTypeLazyTreeAll({parentId,current,size,titleName}	)
      console.log(res,'tabTypeLazyTreeAll');
      if (res.code === 200) {
        return res.data

      }
    },
    nodeClick(data,node){
          console.log(data,'treedata');
          this.treeId=data.id;
          this.curTreedata=data;
          this.curTreeNode=node;
          this.page.current=1;
          this.page.size=10;
          this.page.pageSize=10;
          this.page.currentPage=1;
          if(data.hasChildren){
            this.loading=true
            this.tabTypeLazyTreeAll(data.id, this.page.current,this.page.size,this.input3).then((res)=>{
              this.loadData=res.records
              this.page.total=res.total
              this.loading=false
            })
          }
        if(data.hasChildren===false&&node.level==2){
          let arr=[]
            arr.push(data)
            this.loadData=arr
            this.page.total=1
        }else{
           this.loadData=[]
            this.page.total=0
        }

      },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    show(){
        this.dialogVisible=true;
        this.treeId=''
        this.loadData=[]

      },
    submitQute(){
        projecttabInfo(this.ids,this.projectid).then((res)=>{
          console.log(res,'res');
          if(res.data.code===200){
             this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
          this.dialogVisible=false;
          this.onLoad1();
          this.refreshTree()
          }
        })
      }

    },


}
</script>

<style  scoped lang="scss">
::v-deep.avue-crud__left{
  width: 75% !important;
}
.boxswai1 .boxnei {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 14px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    overflow: auto;
}
.tablesss{
  max-height: 600px !important;

}
::v-deep.el-input-group__append{
   background-color: #ecf5ff;
    color: #409EFF;
}
::v-deep.el-input-group__append:hover{
   background-color: #409EFF;
    color: white;
}
::v-deep.el-input-group__prepend:hover{
  background-color:  #409EFF;
  color: white;
}
::v-deep.el-input-group__append:active{
   background-color: #9dc5ee;
    color: white;
}
::v-deep.el-input-group__prepend:active{
  background-color: #9dc5ee;
  color: white;
}
</style>
