<template>
  <div class="teamwork-box">
    <div>
<!--      <el-input-->
<!--        @change="treeQueryChange"-->
<!--        @clear="treeQueryChange"-->
<!--        clearable-->
<!--        placeholder="请输入内容"-->
<!--        v-model="treeQuery.deptName"-->
<!--      >-->
<!--        <i class="el-input__icon el-icon-search" slot="prefix"></i>-->
<!--      </el-input>-->
      <el-button @click="addSpecimen('batch')" icon="el-icon-plus" size="small" style="margin: 20px 0">批量添加样品
      </el-button>
      <el-tree
        :data="treeData"
        :default-checked-keys="dfEhecked"
        :default-expanded-keys="dfExpanded"
        :expand-on-click-node="false"
        @check="nodeCheckChange"
        @node-click="nodeClick"
        node-key="id"
        show-checkbox
      >
      </el-tree>
    </div>
    <div>
      <DoorView :title="testViewData.deptName" class="teamwork-right-one">
        <div slot="header">
          <el-button @click="addSpecimen('singular')" icon="el-icon-plus" size="small" type="primary">添加样品</el-button>
        </div>
        <div slot="main">
          <el-tag
            :key="tag.id"
            @close="deptSampleListDel(tag,ind)"
            closable
            disable-transitions
            style="margin:8px"
            type="info"
            v-for="(tag,ind) in testViewData.deptSampleList"
          >
            {{tag.sampleName}}
          </el-tag>
        </div>
      </DoorView>
      <DoorView :titleStyle="{fontSize:'16px',fontWeight: 'medium'}" class="teamwork-right-two" title="化检室分工">
        <div slot="header" style="display: flex">
          <el-input
            placeholder="请输入内容按回车键搜索"
            v-model="testQuery.nickName"
            @change="upTestDeptUserList(null)"
            @clear="upTestDeptUserList(null)"
            clearable>
          </el-input>
          <el-button style="margin-left: 10px" @click="addTestSelect('batch')" icon="el-icon-plus" size="small">批量添加化验项</el-button>
        </div>
        <el-table
          :data="testViewData.userInspectionList"
          @selection-change="handleSelectionChange($event,'testTeamwork')"
          ref="testTeamwork"
          slot="main"
          style="width: 100%"
          height="90%"
          tooltip-effect="dark"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="员工"
            prop="nickName"
            width="100"
          >
          </el-table-column>
          <el-table-column
            label="是否为班长"
            width="100"
            prop="isMonitor">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isMonitor"
                active-color="#13ce66"
                inactive-color="#ff4949"
              @change="switchChange($event,scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="化验项"
            prop="num">
            <template slot-scope="scope">
              <el-tag
                :key="tag.id"
                @close="testUserInspectionItemListDel(scope.$index,ind,tag,)"
                closable
                disable-transitions
                style="margin:2px 8px"
                type="info"
                v-for="(tag,ind) in scope.row.testUserInspectionItemList"
              >
                {{tag.inspectionItemName}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="num"
            width="100"
          >
            <template slot-scope="scope">
              <el-link @click="addTestSelect('singular',scope.row)" type="primary">新增化验项</el-link>
            </template>
          </el-table-column>
        </el-table>
      </DoorView>
      <el-dialog :title="testDialogType?'添加检验项':'批量添加检验项'" :visible.sync="testDialogVisible">
        <el-table
          :data="testAddInspectionList"
          @selection-change="handleSelectionChange($event,'testSelect')"
          align="center"
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
        >
          <el-table-column
            align="center"
            type="selection">
          </el-table-column>
          <el-table-column
            align="center"
            label="检验项名称"
            prop="itemName"
          ></el-table-column>
          <el-table-column
            align="center"
            label="单位"
            prop="unit"
          >
          </el-table-column>
        </el-table>
        <div class="dialog-footer" slot="footer">
          <el-button @click="testDialogVisible = false">取 消</el-button>
          <el-button @click="testDataSubmit('testSelect')" type="primary">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="specimenDialogType?'添加样品':'批量添加样品' " :visible.sync="specimenDialogVisible">
        <el-form :inline="true" :model="testAddSampleQuery" class="demo-form-inline">
          <el-form-item label="所属分厂">
            <el-input clearable placeholder="请输入" size="mini" v-model="testAddSampleQuery.branchName"></el-input>
          </el-form-item>
          <el-form-item label="样品分类">
            <el-input clearable placeholder="请输入" size="mini" v-model="testAddSampleQuery.sampleType"></el-input>
          </el-form-item>
          <el-form-item label="样品名称">
            <el-input clearable placeholder="请输入" size="mini" v-model="testAddSampleQuery.sampleName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="testSampleClick(1)" size="mini" type="primary">查询</el-button>
            <el-button @click="testSampleClick(0)" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="testAddSampleList"
          @selection-change="handleSelectionChange($event,'specimen')"
          align="center"
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
        >
          <el-table-column
            align="center"
            type="selection">
          </el-table-column>
          <el-table-column
            align="center"
            label="所属分厂"
            prop="branchName"
          ></el-table-column>
          <el-table-column
            align="center"
            label="样品分类"
            prop="sampleType"
          ></el-table-column>
          <el-table-column
            align="center"
            label="样品名称"
            prop="sampleName"
          >
          </el-table-column>
        </el-table>
        <div class="dialog-footer" slot="footer">
          <el-button @click="specimenDialogVisible = false">取 消</el-button>
          <el-button @click="testDataSubmit('specimen')" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>

</template>

<script>
  import DoorView from '@/components/YuComponents/DoorView.vue'
  import * as testTeamwork from '@/api/business/baseData/testTeamwork'

  export default {
    name: 'TestTeamwork',
    data() {
      return {
        treeQuery: {
          deptName: null
        },
        testQuery:{
          id:null,
          nickName:null,//化验项搜素名称
        },
        treeId:null,
        treeData: [],//树状结构数据
        dfExpanded:[],//树状结构默认展开的id
        dfEhecked:[],//树状结构默认勾选的id
        testViewData:{},//化验视图数据
        testAddSampleQuery:{
          branchName:null,
          sampleName:null,
          sampleType:null
        },//样品列表查询参数
        testAddSampleList:[],//获取样品列表
        testAddInspectionList:[],//化检项列表
        testDialogVisible: false,//化检添加弹框
        testDialogType: 0,//0为批量,1为单个添加
        specimenDialogVisible: false,//样品添加弹框
        specimenDialogType: 0,//0为批量,1为单个添加
        nodesArr:[],//树形结构勾选id数组
        specimenArr:[],//添加样品选择id数组
        testTeamworkId:null,//化检分工单个添加id
        testTeamworkArr:[],//化检室分工多选id数组
        testSelectArr:[],//添加检验项选择id数组
      }
    },
    components: { DoorView },
    watch:{
      specimenDialogVisible(now){
        console.log(now)
        this.testAddSampleQuery={
          branchName:null,
          sampleName:null,
          sampleType:null
        }
      }
    },
    created() {
      this.treeQueryChange();
    },
    methods: {
      //树状结构查询
      treeQueryChange(){
        testTeamwork.listDepts(this.treeQuery).then(res=>{
          this.treeData = res.data;
          this.foreachChildren(this.treeData);
          this.upTestDeptUserList(this.dfEhecked[0]);
          this.nodesArr = [...this.dfEhecked]
        })
      },
      //递归判断默认勾选项
      foreachChildren(dataArr,keyArr=[]){
        for (let i = 0; i < dataArr.length; i++) {
          let arr = dataArr[i];
          let karr = [...keyArr]
          karr.push(arr.id)
          if(arr.hasOwnProperty("children")){
            arr.disabled=true,
            this.foreachChildren(arr.children,karr)
          }else if (arr.isChoosed) {
            this.dfExpanded=this.dfExpanded.concat(karr);
            this.dfEhecked=this.dfEhecked.concat([karr[karr.length-1]]);
          }
        }
      },
      //更新检验项视图数据
      upTestDeptUserList(id){
        if(id)this.testQuery.id=id
        testTeamwork.getTestDeptUserList(this.testQuery).then(listRes=>{
          this.testViewData = listRes.data
          console.log('list',listRes)
        })
      },
      //节点点击
      nodeClick(res){
        console.log(res)
        // if (res.children){
        //   return
        // }
        this.upTestDeptUserList(res.id);
      },
      //部门树状结构选择
      nodeCheckChange(row,nodes){
        let nds = [];
        nodes.checkedNodes.forEach(item=>{
          if (!item.hasOwnProperty("children")){
            nds.push(item.id)
          }
        })
        this.nodesArr = nds;
      },
      //列表多选
      handleSelectionChange(obj, type) {
        console.log(obj, type)
        let dataArr = [];
        switch (type) {
          case 'testTeamwork':
            obj.forEach(item=>{
              dataArr.push(item.userId);
            })
            this.testTeamworkArr = dataArr
            break;
          case 'testSelect':
            obj.forEach(item=>{
              dataArr.push(item.id);
            })
            this.testSelectArr = dataArr;
            break;
          case 'specimen':
            obj.forEach(item=>{
              dataArr.push(item.id);
            })
            this.specimenArr = dataArr;
            break;
          default:
            break
        }
      },
      // 样品查询或重置
      testSampleClick(type){
        if(!type){
          this.testAddSampleQuery={
            branchName:null,
            sampleName:null,
            sampleType:null
          }
        }
        testTeamwork.getTestAddSampleList(this.testAddSampleQuery).then(res=>{
          this.testAddSampleList  = res.data
        })
      },
      //样品添加和批量样品添加点击按钮
      addSpecimen(type) {
        testTeamwork.getTestAddSampleList().then(res=>{
          this.testAddSampleList  = res.data
        })
        switch (type) {

          case 'batch':
            if(!this.nodesArr.length){
              this.$message.error('至少选择一个部门添加样品');
              return
            }
            this.specimenDialogVisible = true
            this.specimenDialogType = 0
            break
          case 'singular':
            this.specimenDialogVisible = true
            this.specimenDialogType = 1
            break
          default:
            break
        }
      },
      //化验添加和批量添加点击按钮
      addTestSelect(type,row) {
        testTeamwork.getTestAddInspectionList().then(res=>{
          this.testAddInspectionList = res.data
        })
        switch (type) {
          case 'batch':
            if(!this.testTeamworkArr.length){
              this.$message.error('至少选择一位员工进行添加化检项');
              return
            }
            this.testDialogVisible = true
            this.testDialogType = 0
            console.log('批量添加化验')
            break
          case 'singular':
            this.testDialogVisible = true
            this.testDialogType = 1
            this.testTeamworkId =row.userId
            console.log('添加单个化验',row)
            break
          default:
            break
        }
      },
      //弹框添加提交
      testDataSubmit(type){
        //保存部门id/员工id
        let ids;
        switch (type) {
          //员工检验项添加
          case 'testSelect':
            if (this.testDialogType){
              ids = this.testTeamworkId
            }else{
              ids = this.testTeamworkArr.join(',')
            }
            testTeamwork.saveTestUserInspectionItem({userIds:ids,inspectionIds:this.testSelectArr.join(',')}).then(res=>{
              this.upTestDeptUserList(this.testViewData.deptId)
              this.testDialogVisible = false;
              this.$message({
                message: '员工化检项添加成功',
                type: 'success'
              });
            })
            break;
          //样品添加
          case 'specimen':
            if(this.specimenDialogType){
              ids = this.testViewData.deptId
            }else {
              ids=this.nodesArr.join(',')
            }
            testTeamwork.saveTestDeptSample({ids:ids,sampleIds:this.specimenArr.join(',')}).then(res=>{
              this.upTestDeptUserList(this.testViewData.deptId)
              this.specimenDialogVisible = false;
              this.$message({
                message: '部门样品添加成功',
                type: 'success'
              });
            })
            break;
        }
      },
      //删除样品
      deptSampleListDel(row,ind){
        testTeamwork.deleteTestDeptSample(row.id).then(res=>{
          this.testViewData.deptSampleList.splice(ind,1);//优化视觉延迟
          this.upTestDeptUserList(this.testViewData.deptId)
        })
      },
      //删除化检分工
      testUserInspectionItemListDel(index,ind,row){
        testTeamwork.deleteTestUserInspectionItem(row.id).then(res=>{
          this.testViewData.userInspectionList[index].testUserInspectionItemList.splice(ind,1);//优化视觉延迟
          this.upTestDeptUserList(this.testViewData.deptId)
        })
      },
      //修改是否为部长
      switchChange(e,row){
        testTeamwork.updateUserIsMonitor({isMonitor:e,userId:row.userId}).then(res=>{
          console.log('???',res)
          }
        )
        this.upTestDeptUserList(this.testViewData.deptId)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .teamwork-box {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    background: #ecf0f3;

    & > div {
      overflow-y: auto;
    }

    & > div:first-child {
      height: 100%;
      width: 260px;
      background: #ffffff;
      padding: 16px;
    }

    & > div:last-child {
      margin: 16px;
      width: 100%;
      height: calc(100% - 32px);

      .teamwork-right-one {
        border-radius: 0;
        height: 172px;
      }

      .teamwork-right-two {
        border-radius: 0;
        height: calc(100% - 188px)
      }
    }
  }
</style>
