<template>
  <div class="app-container">
    <el-card>
      <el-radio-group v-show="false" v-model="radio" size="small" style="margin: 10px;" @change="radioChange()">
        <el-radio :label="1">当天</el-radio>
        <el-radio :label="2">全部</el-radio>
      </el-radio-group>
      <span>机床图号:</span>
      <el-select v-model="graphNumValue" filterable size="small" style="margin-bottom:10px;width: 220px" placeholder="机床图号" @change="getGroupNum()">
        <el-option
          v-for="item in graphNum"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <div style="float: left">{{ item.label }}</div>
          <div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
        </el-option>
      </el-select>
      <span>组号:</span>
      <el-select v-model="GroupNumValue" filterable clearable size="small" placeholder="组号" style="width: 220px" @change="total=0;PageCurrent=1;PageSize=10;getTable()">
        <el-option
          v-for="item in GroupNum"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button type="primary" size="small" style="margin-left: 10px" @click="selectAll(tableData)">全选</el-button>
      <el-button type="primary" size="small" icon="el-icon-cjn-09" style="" @click="save">保存</el-button>
    </el-card>

    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%;"
        height="580"
        highlight-current-row
        border
        @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection"/>
        <el-table-column align="center" label="零件号">
          <template slot-scope="scope">
            {{ scope.row.零件号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件名称">
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺开始时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.工艺开始时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺结束时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.工艺结束时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺员" width="230px">
          <template slot-scope="scope">
            <el-input v-model="tableData[scope.$index].工艺员" size="mini" style="width:150px" placeholder="工艺员" @click.native="selectPerson(scope.$index)"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量" width="80">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="投产时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.投产时间 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-show="!loading0"
          :current-page="PageCurrent"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="PageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible" title="工艺定额人员选择" center>
      <el-table
        :data="tableData2"
        style="width: 100%;max-height: 200px"
        border
        height="200px"
        highlight-current-row
        @row-click="confirmPerson">
        <el-table-column align="center" label="考勤编号">
          <template slot-scope="scope">
            {{ scope.row.考勤编号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="性别">
          <template slot-scope="scope">
            {{ scope.row.性别 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工作岗位">
          <template slot-scope="scope">
            {{ scope.row.岗位名称 }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tijiao()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProject0, getProject, getGraphNum, getGroupNum, getTable0, getGraphNum0, getGroupNum0, getTable00, save, initPerson } from '@/api/ManufacturingCenter/ProcessTaskAssignment'

export default {
  data() {
    return {
      num1: '', // 工艺员中间变量
      num2: '', // 工艺员流水号中间变量
      loading: false,
      loading0: false,
      projectNameValue: '',
      projectName: [],
      // machineToolNum: '',
      radio: 2,
      graphNumValue: '',
      graphNum: [],
      GroupNumValue: '',
      GroupNum: [],
      tableData: [],
      dialogFormVisible: false,
      tableData2: [],
      dialogPerson: '',
      index: '',
      multipleSelection: [],
      result: 0,
      PageCurrent: 1,
      PageSize: 10,
      total: 0
    }
  },
  created() {
    this.getGraphNum()
    this.initPerson()
  },
  methods: {
    fetchData() {
      getProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.projectName.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号
          })
        }
      })
    },
    initPerson() { // 初始化工艺员
      initPerson().then(response => {
        this.tableData2 = response.data
      })
    },
    radioChange() { // radio改变
      this.loading = true
      this.projectName = []
      this.projectNameValue = ''
      this.graphNumValue = ''
      this.GroupNumValue = ''
      this.GroupNum = []
      this.tableData = []
      this.total = 0
      if (this.radio === 1) {
        getProject0().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.projectName.push({
              label: response.data[i].项目名称,
              value: response.data[i].项目流水号
            })
          }
          this.loading = false
        })
      } else {
        getProject().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.projectName.push({
              label: response.data[i].项目名称,
              value: response.data[i].项目流水号
            })
          }
          this.loading = false
        })
      }
    },
    getGraphNum() { // 获取下拉图号
      this.tableData = []
      this.total = 0
      this.GroupNumValue = ''
      this.GroupNum = []
      if (this.radio === 2) { // 全部
        getGraphNum().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.graphNum.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号,
              value2: response.data[i].项目名称
            })
          }
        })
      } else { // 当天
        getGraphNum0(this.projectNameValue).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.graphNum.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号
            })
          }
        })
      }
    },
    getGroupNum() { // 获取下拉组号
      this.tableData = []
      this.total = 0
      this.GroupNum = []
      this.GroupNumValue = ''
      if (this.radio === 2) { // 全部
        getGroupNum(this.graphNumValue).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.GroupNum.push({
              label: response.data[i].组号,
              value: response.data[i].组件流水号
            })
          }
        })
      } else { // 当天
        getGroupNum0(this.graphNumValue).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.GroupNum.push({
              label: response.data[i].组号,
              value: response.data[i].组件流水号
            })
          }
        })
      }
    },
    getTable() { // 获取主表
      this.loading0 = true
      this.tableData = []
      if (this.radio === 2) { // 全部
        getTable0(this.PageCurrent, this.PageSize, this.GroupNumValue).then(response => {
          this.total = response.data.total
          for (let i = 0; i < response.data.rows.length; i++) {
            response.data.rows[i].工艺计划开始时间 = response.data.rows[i].工艺计划开始时间.split(' ')[0]
            response.data.rows[i].工艺计划结束时间 = response.data.rows[i].工艺计划结束时间.split(' ')[0]
            response.data.rows[i].操作时间 = response.data.rows[i].操作时间.split(' ')[0]
          }
          for (let i = 0; i < response.data.rows.length; i++) {
            this.tableData.push({
              零件号: response.data.rows[i].零件图号,
              零件名称: response.data.rows[i].零件名称,
              工艺开始时间: response.data.rows[i].工艺计划开始时间,
              工艺结束时间: response.data.rows[i].工艺计划结束时间,
              数量: response.data.rows[i].批次数量,
              投产时间: response.data.rows[i].操作时间,
              工艺员: '',
              人员编号: '',
              工艺计划流水号: response.data.rows[i].工艺计划流水号
            })
          }
          this.loading0 = false
        })
      } else { // 当天
        getTable00(this.PageCurrent, this.PageSize, this.GroupNumValue).then(response => {
          this.total = response.data.total
          for (let i = 0; i < response.data.rows.length; i++) {
            this.tableData.push({
              零件号: response.data.rows[i].零件图号,
              零件名称: response.data.rows[i].零件名称,
              工艺开始时间: response.data.rows[i].工艺计划开始时间,
              工艺结束时间: response.data.rows[i].工艺计划结束时间,
              数量: response.data.rows[i].批次数量,
              投产时间: response.data.rows[i].操作时间,
              工艺员: '',
              人员编号: '',
              工艺计划流水号: response.data.rows[i].工艺计划流水号
            })
          }
          this.loading0 = false
        })
      }
    },
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.PageSize = val
      this.getTable()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.getTable()
    },
    selectPerson(index) { // 点击查询按钮
      this.index = index
      this.dialogFormVisible = true
    },
    confirmPerson(row) { // 选择一行
      this.num1 = row.姓名
      this.num2 = row.人员编号
    },
    tijiao() {
      this.tableData[this.index].工艺员 = this.num1
      this.tableData[this.index].人员编号 = this.num2
      this.dialogFormVisible = false
    },
    selectAll(rows) {
      if (this.tableData[0].工艺员 !== '') {
        for (let i = 0; i < rows.length; i++) {
          rows[i].工艺员 = this.tableData[0].工艺员
          rows[i].人员编号 = this.tableData[0].人员编号
        }
        this.$refs.multipleTable.clearSelection()
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else { this.$message.error('请在第一行中填写工艺员姓名') }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    save() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (this.multipleSelection[i].人员编号 === '') {
          this.$message.error('请选择工艺员')
        } else {
          this.result = 0
          save(this.multipleSelection[i].工艺计划流水号, this.multipleSelection[i].人员编号, this.multipleSelection[i].零件号).then(response => {
            this.result += parseInt(response.data[0].result)
            if (this.result === this.multipleSelection.length) {
              this.$message.success('保存成功')
              this.PageCurrent = 1
              this.getTable()
            } else if (i === this.multipleSelection.length - 1 && this.result !== this.multipleSelection.length) {
              this.$message.error('存在保存失败项')
            }
          })
        }
      }
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin-bottom: 15px;
  }
  span{
    margin: 10px 0 10px 10px;
  }
</style>
