<template>
  <div class="app-container">
    <el-card>
      <el-select v-model="graphNumValue" filterable size="small" style="margin:3px 10px;width: 180px" 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>
      <el-select v-model="GroupNumValue" filterable clearable size="small" placeholder="组号" style="margin:3px 10px;width: 150px" @change="total=0;PageCurrent=1;PageSize=20;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" icon="el-icon-bangzhu" style="margin-left: 10px" plain @click="selectAll(tableData)">全选</el-button>
      <el-button v-positive="'loading'" :disabled="false" type="success" size="small" icon="el-icon-upload" style="margin-left: 10px" plain @click="save">保存</el-button>
      <el-button v-positive="'loading'" :disabled="false" type="success" size="small" icon="el-icon-upload" style="margin-left: 300px" plain @click="currency">通用件保存</el-button>
    </el-card>
    <el-card>
      <el-table ref="multipleTable" :data="tableData" :row-class-name="tableRowClassName1" style="width: 1000px;" size="mini" height="750" highlight-current-row border @selection-change="handleSelectionChange" @row-click="rowClick">
        <el-table-column align="center" type="selection"/>
        <el-table-column align="center" label="零件号" prop="零件号">
          <template slot-scope="scope">
            {{ scope.row.零件图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="零件名称" label="零件名称" width="150">
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺开始时间" width="130">
          <template slot-scope="scope">
            {{ scope.row.工艺开始时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺结束时间" width="130">
          <template slot-scope="scope">
            {{ scope.row.工艺结束时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺员" width="180px">
          <template slot-scope="scope">
            <el-select v-model="tableData[scope.$index].工艺员" filterable clearable size="small" placeholder="工艺员" style="margin:3px 10px;width: 150px">
              <el-option
                v-for="item in Craftsmens"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </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="130">
          <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, 50]"
          :page-size="PageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="title" center width="400px">
      <el-table :data="tableData2" size="mini" height="400" border>
        <el-table-column align="center" label="序号" width="80">
          <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="80">
          <template slot-scope="scope">
            {{ scope.row.单件定额工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="准结" width="80">
          <template slot-scope="scope">
            {{ scope.row.准结定额工时 }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getGraphNum, getGroupNum, getTable, save, save2, initPerson, selectTechnology } from '@/api/ManufacturingCenter/ProcessTaskAssignment'

export default {
  data() {
    return {
      loading: false,
      loading0: false,
      projectNameValue: '',
      projectName: [],
      graphNumValue: '',
      graphNum: [],
      GroupNumValue: '',
      GroupNum: [],
      tableData: [],
      dialogFormVisible: false,
      title: '',
      tableData2: [],
      index: '',
      multipleSelection: [],
      PageCurrent: 1,
      PageSize: 50,
      total: 0,
      Craftsmens: [], // 工艺员
      工艺计划流水号组: [],
      通用件图号: [],
      通用件规格: [],
      工艺员: []
    }
  },
  created() {
    this.getGraphNum()
    this.initPerson()
  },
  methods: {
    // 初始化工艺员
    initPerson() {
      initPerson().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Craftsmens.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
    },
    // 获取下拉图号
    getGraphNum() {
      this.graphNumValue = ''
      this.graphNum = []
      this.tableData = []
      this.total = 0
      this.GroupNumValue = ''
      this.GroupNum = []
      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].项目名称
          })
        }
      })
    },
    // 获取下拉组号
    getGroupNum() {
      this.tableData = []
      this.total = 0
      this.GroupNum = []
      this.GroupNumValue = ''
      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].组件流水号
          })
        }
      })
    },
    // 获取主表
    getTable() {
      if (this.GroupNumValue === null) {
        this.tableData = []
      } else {
        this.loading0 = true
        this.tableData = []
        getTable(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].规格,
              是否加急: response.data.rows[i].是否加急,
              工艺员: '',
              人员编号: '',
              工艺计划流水号: response.data.rows[i].工艺计划流水号
            })
          }
          this.loading0 = false
        })
      }
    },
    rowClick(row) {
      this.tableData2 = []
      selectTechnology(row.零件图号, row.规格).then(response => {
        if (response.data[0].结果 === 1) {
          this.title = response.data[0].机床图号
          this.tableData2 = response.data
          this.dialogFormVisible = true
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 全选
    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('请在第一行中填写工艺员姓名') }
    },
    save() {
      this.loading = true
      this.工艺计划流水号组 = []
      this.通用件图号 = []
      this.工艺员 = []
      var check = 1
      this.multipleSelection.map(v => {
        if (!v.工艺员) {
          check = 0
        }
        this.工艺计划流水号组.push(v.工艺计划流水号)
        this.通用件图号.push(v.零件图号)
        this.工艺员.push(v.工艺员)
      })
      if (check === 1) {
        save(this.工艺计划流水号组, this.通用件图号, this.工艺员).then(response => {
          this.$message.success('保存成功')
          this.PageCurrent = 1
          this.getTable()
          this.loading = false
        })
      } else {
        this.loading = false
        this.$message.error('请选择工艺员')
      }
    },
    // 直接保存工艺
    currency() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请先选择零件')
      } else {
        this.loading = true
        this.工艺计划流水号组 = []
        this.通用件图号 = []
        this.通用件规格 = []
        this.工艺员 = []
        var check = 1
        this.multipleSelection.map(v => {
          if (!v.工艺员) {
            check = 0
          }
          this.工艺计划流水号组.push(v.工艺计划流水号)
          this.通用件图号.push(v.零件图号)
          this.通用件规格.push(v.规格)
          this.工艺员.push(v.工艺员)
        })
        if (check === 1) {
          console.log(this.工艺计划流水号组, this.通用件图号, this.通用件规格, this.工艺员)
          save2(this.工艺计划流水号组, this.通用件图号, this.通用件规格, this.工艺员).then(response => {
            if (response.data[0].结果 === 'success') {
              this.$message.success('保存成功')
              this.PageCurrent = 1
              this.getTable()
              this.loading = false
            } else {
              var messages = []
              messages = response.data[0].结果.split('||||')
              messages.shift()
              this.$message.error(`图号${messages}无已完成工艺`)
              this.loading = false
            }
          })
        } else {
          this.$message.error('请选择工艺员')
          this.loading = false
        }
      }
    },
    tableRowClassName1({ row }) {
      console.log(row)
      if (row.是否加急 === '1') {
        return 'isUrgentItem'
      }
    },
    // 分页
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.PageSize = val
      this.getTable()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.getTable()
    }
  }
}
</script>

<style scoped>
  span{
   margin-right: 10px;
  }
</style>
<style>
  .el-table .isUrgentItem{
    background: #FF9797;
  }
</style>
