<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">人员：</span>
        <el-select v-model="peopleValue" placeholder="请选择人员" size="small" style="width: 150px" @change="getNumber();getNumberRight()">
          <el-option
            v-for="item in people"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <div style="margin-top: 10px;margin-left: 10px;">
          <el-transfer
            v-model="value"
            :data="data"
            :titles="titles"
            style="height: 700px"
            @change="distributionStation"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      data: [],
      value: [],
      titles: ['可选工位', '分配工位'],
      people: [], // 人员数组
      peopleValue: '' // 人员信息
    }
  },
  created() {
    this.getPeople()
    this.getNumber()
  },
  methods: {
    // 初始化获取产品型号
    getPeople() {
      this.people = []
      var param = []
      var Data = this.CreateData('11', '人员名单_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.people.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
    },
    getNumber() {
      this.data = []
      request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: `SELECT [工位号] FROM [dbo].[MES_计划BOM_工位与名称]`
        }
      }).then(response => {
        if (response.data.length) {
          for (let i = 0; i < response.data.length; i++) {
            this.data.push({
              label: response.data[i].工位号,
              key: response.data[i].工位号,
              disabled: this.peopleValue === ''
            })
          }
        }
      })
    },
    getNumberRight() {
      this.value = []
      request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: `SELECT dbo.MES_Web_User.Id,
                        dbo.MES_Web_User.UserId,
                        dbo.MES_Web_User.OpCode,
                        dbo.MES_Web_User.OpName,
                        dbo.MES_计划BOM_工位与名称.工位名称
                        FROM dbo.MES_计划BOM_工位与名称 INNER JOIN dbo.MES_Web_User
                        ON dbo.MES_计划BOM_工位与名称.工位代码 = dbo.MES_Web_User.OpCode
                        WHERE   (MES_Web_User.UserId = ${this.peopleValue})`
        }
      }).then(response => {
        console.log(response.data, 'response.data')
        if (response.data.length) {
          for (let i = 0; i < response.data.length; i++) {
            this.value.push(
              response.data[i].OpName
            )
          }
        }
      })
    },
    async distributionStation(value, direction, keyArr) {
      // value为左/右的所有数值，direction为方向left or right，keyArr为选中的key
      // eslint-disable-next-line no-unused-vars
      let valueName
      switch (direction) {
        // 右到左 绑定
        case 'left':
          console.log(value, keyArr)
          // 调用后端api绑定接口
          for (let i = 0; i < keyArr.length; i++) {
            valueName = keyArr[i]
            await this.deleteAdd(valueName)
          }
          this.$message({
            message: '分配成功',
            type: 'success'
          })
          break
        // 从左到右 解绑
        case 'right':
          console.log(value, keyArr)
          // 调用后端api解绑接口
          for (let i = 0; i < keyArr.length; i++) {
            valueName = keyArr[i]
            await this.opnameAdd(valueName)
          }
          this.$message({
            message: '分配成功',
            type: 'success'
          })
          break
      }
    },
    async opnameAdd(val) {
      var param = []
      param[0] = ['UserId', this.peopleValue]
      param[1] = ['OpName', val]
      console.log(param)
      var Data = this.CreateData('12', 'MES_Web_User_Add', param)
      return new Promise((resolve, reject) => {
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            console.log('1')
            resolve(1)
          } else {
            console.log('0')
            reject(2)
          }
        })
      })
    },
    async deleteAdd(val) {
      var param = []
      param[0] = ['UserId', this.peopleValue]
      param[1] = ['OpName', val]
      console.log(param)
      var Data = this.CreateData('12', 'MES_Web_User_Delete', param)
      return new Promise((resolve, reject) => {
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            console.log('1')
            resolve(1)
          } else {
            console.log('0')
            reject(2)
          }
        })
      })
    }
  }
}
</script>

<style scoped>
  .topCard{
    margin: 5px;
    height: 840px;
  }
  .topDiv{
    margin-bottom: 10px;
  }
  /deep/.el-transfer-panel__list{
    height: 700px;
  }
  /deep/.el-transfer-panel__body{
    height: 700px;
  }
</style>
