<template>
  <div class="app-container">

    <button-bar ref="btnbar" view-title="设置关联人员" :btndisabled="btndisabled" @btnhandle="btnHandle" />
    <div class="main-content">
      <el-row class="mid">
        <el-col :span="8" class="left">
          <div class="listtop" style="width: 400px">
            <div class="tit">项目列表</div>
          </div>
          <el-table :data="formobj" border ref="multipleTab" max-height="560px" style="width: 400px;font-size: 16px"
            highlight-current-row @row-click="singleElection" :row-style="{height:'50px'}" :show-header="false">
            <el-table-column prop="entryName" label="项目名称" />
          </el-table>
        </el-col>
        <el-col :span="16" class="rigth">
          <div class="rihthGl">
            <div class="rigthJg">
              <div class="listtop" style="width: 100%">
                <span>关联人员</span>
                <button class="Waiting" @click="getWaiting">取消关联</button>
              </div>
              <!-- <el-table ref="multipleTable" :data="dataListOne" border max-height="440px" style="width: 450px"
               @selection-change="handlChange" tooltip-effect="dark" :row-style="{height:'50px'}" >
               <el-table-column type="selection" width="55" align="center"/>
               <el-table-column prop="name" label="ID" align="center" />
               <el-table-column prop="orgName" label="单位" align="center" />
             </el-table> -->

              <div class="org-tree">
                <el-tree :data="sysorganList" show-checkbox node-key="sid" :props="props" ref="tree" highlight-current
                  check-strictly :default-checked-keys="uploadData.users"
                  :default-expanded-keys="['2','fd6435f2-0005-11ec-a033-48452053aa33','3042d730-64e8-4e34-b08a-44adca4da3a5']"
                  @check="handleNodeClick1">

                  <div class="custom-tree-node" slot-scope="{ node, data }"
                    style=" width: 100%;display: flex;flex-direction: row; align-items: center;flex-shrink: 1;">
                    <div :class="{ 'title': data.psid==='0' }">{{ node.label }}</div>

                  </div>

                </el-tree>
              </div>
            </div>

            <div class="rigthYh">
              <div class="listtop" style="width: 100%">
                <span>未关联人员</span>
                <button class="relevance" @click="getRelevance">关联</button>
              </div>
              <div class="org-tree">
                <el-tree :data="sysorganList2" show-checkbox node-key="sid" :props="props" ref="tree2" highlight-current
                  check-strictly :default-checked-keys="uploadData.users"
                  :default-expanded-keys="['2','fd6435f2-0005-11ec-a033-48452053aa33','3042d730-64e8-4e34-b08a-44adca4da3a5']"
                  @check="handleNodeClick2">
                  <div class="custom-tree-node" slot-scope="{ node, data }"
                    style=" width: 100%;display: flex;flex-direction: row; align-items: center;flex-shrink: 1;">
                    <div :class="{ 'title': data.psid==='0' }">{{ node.label }}</div>


                  </div>

                </el-tree>
              </div>
            </div>
          </div>
          <!-- <div class="Btn">
            <el-button type="primary" @click="getPurchaseList">保存</el-button>
            <el-button type="primary" style="margin-left: 40px;" @click="getCancel">取消</el-button>
          </div> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import req from '@/api/projectStaff/index'
  import ButtonBar from '@/components/ButtonBar'
  import Pagination from '@/components/pagination'
  import pageye from '@/components/pagination/pageye'
  export default {
    name: 'SupplierBankInfoIndex',
    components: {
      ButtonBar,
      Pagination,
      pageye
    },
    data() {
      return {
        btndisabled: false,
        viewState: 1, // 1、列表 2、添加 3、修改 4、查看
        isSearchShow: false,
        searchxianshitit: '显示查询条件',
        tableLoading: false,
        formobj: [],
        dataListOne: [],
        props: {
          sid: 'sid',
          psid: "psid",
          label: 'name',
          children: 'children'
        },
        btnList: [{
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }],
        queryParams: {
          current: 1,
          size: 10,
          total: 0,
          params: {
            typeName: '',
          }
        },
        sids: [],
        templateSelection: "",
        //   当前选择的行的数据
        checkList: [],
        uploadData: {
          projectSid: '',
          users: [],
        },
        ValSid: [],
        ValSids: [],
        sysorganList: [],
        sysorganList2: [],
      }
    },
    watch: {
      formobj: function() {
        this.$nextTick(function() {
          this.$refs['multipleTab'].setCurrentRow(this.formobj[0])
        })
      },
    },
    mounted() {
      this.$refs['btnbar'].setButtonList(this.btnList)
    },
    created() {
      this.loadList()
    },
    methods: {
      // 搜索条件效果
      clicksearchShow() {
        this.isSearchShow = !this.isSearchShow
        if (this.isSearchShow) {
          this.searchxianshitit = '隐藏查询条件'
        } else {
          this.searchxianshitit = '显示查询条件'
        }
      },
      btnHandle(btnKey) {
        switch (btnKey) {
          case 'doClose':
            this.doClose()
            break
          default:
            break
        }
      },
      loadList() {
        req.projectinformation().then(res => {
          if (res.success) {
            this.formobj = res.data
            this.uploadData.projectSid = res.data[0].sid
            console.log("aaaaaaaaaa", this.uploadData.projectSid)
            req.associationUserList(this.uploadData.projectSid).then(res => {
              if (res.success) {
                this.sysorganList = res.data
              }
            })
            req.sysorganization(this.uploadData.projectSid).then(res => {
              if (res.success) {
                this.sysorganList2 = res.data
              }
            })
          }
        })

      },
      singleElection(row) {
        // this.clearList()
        this.uploadData.projectSid = row.sid
        req.associationUserList(this.uploadData.projectSid).then(res => {
          if (res.success) {
            this.sysorganList = res.data
          }
        })
        req.sysorganization(this.uploadData.projectSid).then(res => {
          if (res.success) {
            this.sysorganList2 = res.data
          }
        })
      },

      handleNodeClick1(val, num) {
        console.log("aaaaaaaaaa", val)
        console.log("aaaaaaaaaa", num)

        this.uploadData.users = num.checkedKeys

      },
      // 点击取消关联
      getWaiting() {
        console.log("aaaaaaaaaa", this.uploadData)

        req.usercancellation(this.uploadData).then(res => {
          if (res.success) {
            this.$message({
              message: '取消关联成功',
              type: 'success'
            });

            req.associationUserList(this.uploadData.projectSid).then(res => {
              if (res.success) {
                this.sysorganList = res.data
              }
            })
            req.sysorganization(this.uploadData.projectSid).then(res => {
              if (res.success) {
                this.sysorganList2 = res.data
              }
            })

          }
        })
        this.$nextTick(() => {

          this.$refs['tree'].setCheckedKeys([])
          this.$refs['tree2'].setCheckedKeys([])

        });

      },
      handleNodeClick2(val, num) {
        console.log("aaaaaaaaaa", val)
        console.log("aaaaaaaaaa", num)

        console.log("aaaaaaaaaa", val)
        console.log("aaaaaaaaaa", num)

        this.uploadData.users = num.checkedKeys
      },
      // 点击关联
      getRelevance() {
        console.log("aaaaaaaaaa", this.uploadData)

        req.userprojectSave(this.uploadData).then(res => {
          if (res.success) {
            this.$message({
              message: '关联成功',
              type: 'success'
            });


            req.associationUserList(this.uploadData.projectSid).then(res => {
              if (res.success) {
                this.sysorganList = res.data
              }
            })
            req.sysorganization(this.uploadData.projectSid).then(res => {
              if (res.success) {
                console.log("aaaaaaaaaa", res.data)
                this.sysorganList2 = []
                this.sysorganList2 = res.data

              }
            })
          }
        })
        this.$nextTick(() => {

          this.$refs['tree'].setCheckedKeys([])
          this.$refs['tree2'].setCheckedKeys([])

        });
      },
      doClose() {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped lang="scss">
  ::v-deep .el-tree .el-tree-node .is-leaf+.el-checkbox .el-checkbox__inner {
    display: inline-block;
  }

  ::v-deep .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
    display: none;
  }

  // 设置节点高度
  ::v-deep .el-tree-node__content {
    height: 35px;
  }

  ::v-deep .title {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    font-family: sans-serif;
  }

  // 树形结构 三角图标 设在右侧
  // ::v-deep .el-tree-node__expand-icon {
  //   position: absolute;
  //   right: 2%;
  // }

  .main-content {
    .mid {
      width: 100%;
      height: 540px;
      margin-top: 30px;

      .left {
        .listtop {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding-top: 25px;
          padding-bottom: 25px;
        }
      }

      .rigth {
        margin-left: -50px;
        height: 600px;
        border: 1px solid #dfe6ec;
        position: relative;

        .rihthGl {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;

          .rigthJg {
            margin-top: 30px;
            width: 450px;

            .org-tree {
              width: 100%;
              height: 450px;
              box-sizing: border-box;
              /*padding-right: 10px;*/
              border: 1px solid #edf1f7;
              overflow: scroll;
              overflow-x: hidden;
            }

            .listtop {
              display: flex;
              flex-direction: row;
              align-items: center;
              padding-top: 25px;
              padding-bottom: 25px;

              .Waiting {
                padding: 5px 10px;
                border: 2px solid #018ad2;
                color: #018ad2;
                font-size: 14px;
                border-radius: 5px;
                margin-right: 20px;
              }

              .Waiting:hover {
                background-color: #fff;
              }
            }
          }

          .rigthYh {
            margin-top: 30px;
            width: 450px;

            .org-tree {
              width: 100%;
              height: 450px;
              box-sizing: border-box;
              /*padding-right: 10px;*/
              border: 1px solid #edf1f7;
              overflow: scroll;
              overflow-x: hidden;
            }

            .listtop {
              display: flex;
              flex-direction: row;
              align-items: center;
              padding-top: 25px;
              padding-bottom: 25px;

              .relevance {
                padding: 5px 10px;
                border: 2px solid #018ad2;
                color: #018ad2;
                font-size: 14px;
                border-radius: 5px;
                margin-right: 20px;
              }

              .relevance:hover {
                background-color: #fff;
              }
            }
          }
        }

        .Btn {
          position: absolute;
          left: 45%;
          top: 92%;
        }
      }
    }

  }
</style>
