<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <span>机床编号:</span>
        <el-select v-model="machineNumberValue" filterable clearable placeholder="机床编号" size="small">
          <el-option
            v-for="item in machineNumber"
            :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.name }}</div>
          </el-option>
        </el-select>
        <el-button type="success" size="small" icon="el-icon-search" style="margin-left:10px" @click="total=0;pageCurrent=1;pageSize=10;searchTable()">查询</el-button>
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:10px" @click="Preservation()">保存</el-button>
      </el-row>
    </el-card>
    <el-card>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        size="small"
        highlight-current-row
        min-height="500px"
        height="500px"
        border
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          align="center"
          width="35"/>
        <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-column align="center" label="工艺员">
          <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="下达时间">
          <template slot-scope="scope">
            {{ scope.row.下发时间 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40, 50]"
          :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
        size="mini"
        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="dialogFormVisible=false">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { initProject, initPerson, searchTable, Preservation } from '@/api/Assembly/AssemblyProcessAssignment'
export default {
  data() {
    return {
      machineNumberValue: '',
      machineNumber: [],
      tableData: [],
      tableData2: [],
      ProcessSerialNumber: [],
      PersonnelNumber: [],
      index: '',
      check: 0,
      check1: 0,
      check2: 0,
      result: 0,
      loading: false,
      dialogFormVisible: false,
      multipleSelection: [],
      pageSize: 1,
      pageCurrent: 10,
      total: 0
    }
  },
  created() {
    this.fetchData()
    this.initPerson()
  },
  methods: {
    fetchData() {
      initProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machineNumber.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号,
            name: response.data[i].项目名称
          })
        }
      })
    },
    initPerson() { // 初始化工艺员
      initPerson().then(response => {
        this.tableData2 = response.data
      })
    },
    selectPerson(index) { // 点击查询按钮
      this.index = index
      this.dialogFormVisible = true
      console.log(this.index)
    },
    confirmPerson(row) { // 选择一行
      this.tableData[this.index].工艺员 = row.姓名
      this.tableData[this.index].人员编号 = row.人员编号
      console.log(this.tableData)
    },
    searchTable() {
      this.tableData = []
      this.loading = true
      this.machineNumberValue ? this.check1 = 1 : this.check1 = 0
      searchTable(this.check1, this.machineNumberValue, this.pageCurrent, this.pageSize).then(response => {
        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.total = response.data.total
        this.loading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    Preservation() {
      if (this.multipleSelection.length !== 0) {
        this.result = 0
        for (let i = 0; i < this.multipleSelection.length; i++) {
          console.log(this.multipleSelection[i].人员编号)
          if (this.multipleSelection[i].人员编号 === '') {
            this.$message.error('请选择工艺员')
          } else {
            Preservation(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.searchTable()
              }
            })
          }
        }
      } else {
        this.$message.warning('至少选择一条')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
  span{
    margin: 10px 0px 10px 10px;
  }
</style>
