<template>
  <div>
    <el-card>
      <div style="padding: 10px;background-color:#F5F5F5">
        <el-row style="margin-left: 20px">
          <el-col :span="3">
            <span style="font-size: 14px">维修班组管理</span>
            <el-select v-model="className" class="select12" placeholder="请选择" @change="goToWork();goOffWork()">
              <el-option
                v-for="item in classes"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-transfer v-model="value" :data="data" :titles="['上班', '下班']" style="margin-top: 20px;margin-left: 20px" @change="handleChange"/>
    </el-card>
  </div>
</template>
<script>
import { ExecDatabase } from '@/main'
export default {
  data() {
    return {
      className: '',
      classes: [],
      data: [],
      value: []
    }
  },
  created() {
    this.getclass()
  },
  methods: {
    // 初始化班组
    getclass() {
      this.classes = []
      var Data = this.CreateData('11', '基础数据_班组_查询')
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.classes.push({
            label: v.班组名称,
            value: v.班组代码
          })
        })
      })
    },
    // 初始化上班
    goToWork() {
      this.data = []
      var param = []
      param[0] = ['班组代码', this.className]
      var Data = this.CreateData('11', '基础数据_上下班_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.data.push({
            key: v.人员代码,
            label: v.姓名
          })
        })
      })
    },
    // 初始化下班
    goOffWork() {
      this.value = []
      var param = []
      param[0] = ['班组代码', this.className]
      var Data = this.CreateData('11', '基础数据_下班_查询', param)
      ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.value.push(
            response.data[i].人员代码
          )
        }
      })
    },
    // 获取穿梭数据
    handleChange(value, direction, movedKeys) {
      if (direction === 'left') {
        var param = []
        param[0] = ['人员代码', movedKeys]
        var Data = this.CreateData('12', '基础数据_下班_修改', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '出勤状态修改成功',
              type: 'success'
            })
            this.goOffWork()
          } else {
            this.$message.error('信息编辑失败')
          }
        })
      } else if (direction === 'right') {
        var param2 = []
        param2[0] = ['人员代码', movedKeys]
        Data = this.CreateData('12', '基础数据_上班_修改', param2)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '出勤状态修改成功',
              type: 'success'
            })
            this.goToWork()
          } else {
            this.$message.error('信息编辑失败')
          }
        })
      }
    }
  }
}
</script>

<style scoped>
  >>>.el-transfer-panel__item.el-checkbox .el-checkbox__label {
    background: rgb(239,239,240);
    width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 40px;
    line-height: 50px;
  }
  >>>.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 23px;
    color: #303133;
    font-weight: 200;
  }
  >>>.el-transfer-panel__item.el-checkbox {
    color: #606266;
    height: 60px;
  }
  >>>.el-transfer-panel .el-transfer-panel__header .el-checkbox {
    background: white;
    display: block;
    line-height: 40px;
  }
  >>>.el-transfer-panel .el-transfer-panel__header {
    height: 40px;
    line-height: 40px;
    background: #F5F7FA;
    margin-left: 8px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
    padding: 0px;
  }
  >>>.el-transfer-panel__item {
    height: 30px;
    line-height: 30px;
    padding-left: 0px;
    margin-left:8px;
    display: block;
  }
  >>>.el-transfer__button.is-disabled, .el-transfer__button.is-disabled:hover {
    border: 1px solid #ffffff;
    background-color: #ffffff;
    color: #bdbdc3;
  }
  >>>.el-transfer-panel__list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    height: 100%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  >>>.el-transfer__button {
    display: block;
    margin: 0 auto;
    padding: 10px;
    border-radius: 100%;
    color: rgba(0, 0, 57, 0.58);
    background-color: #ffffff;
  }
  >>>.el-checkbox__inner {
    display: inline-block;
    position: relative;
    border: 2px solid rgb(110,110,110);
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin:10px 10px 15px 10px;
    background-color: rgb(239,239,240);
    z-index: 1;
    -webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
  }
  >>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #008ecf;
  }
  >>>[data-v-778cbb37] .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 23px;
    color: #303133;
    font-weight: 200;
  }
</style>

