<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"/>
        </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
            )
          }
        }
      })
    }
  }
}
</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>
