<template>
  <div>
    <el-row>
      <el-col style="width: 610px">
        <el-card style="height: 680px">
          <el-row style="margin-top: 5px">
            <el-input v-model="Parts" placeholder="零件图号" size="small" style="width: 170px" @keyup.enter.native="getParts"/>
            <el-select v-model="PersonValue" filterable placeholder="操作者" size="small" style="width: 100px;float: right" @change="searchTableData2">
              <el-option
                v-for="item in Person"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-row>
          <el-table v-loading="loading1" :data="tableData1" :row-class-name="tableData1ClassName" height="600" highlight-current-row size="mini" style="width: 100%" border @row-click="getGongxu">
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"/>
            <el-table-column label="图号及规格" show-overflow-tooltip align="center" width="150px">
              <template slot-scope="scope">
                {{ scope.row.图号及规格 }}
              </template>
            </el-table-column>
            <el-table-column label="制品名称" align="center" width="120px">
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" width="70px">
              <template slot-scope="scope">
                {{ scope.row.投产数量 }}
              </template>
            </el-table-column>
            <el-table-column label="计划开始" align="center" width="90px">
              <template slot-scope="scope">
                {{ scope.row.计划开始时间 }}
              </template>
            </el-table-column>
            <el-table-column label="计划完成" align="center" width="90px">
              <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="[50, 100, 200, 500, 1000]"
              :page-size="pageSize"
              :total="total"
              :pager-count="4"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
          </div>
        </el-card>
      </el-col>
      <el-col style="width: 600px">
        <el-card style="height: 680px">
          <el-table :data="tableData2" height="380" highlight-current-row size="mini" style="width: 100%" border stripe @row-dblclick="XuanChu">
            <el-table-column label="零件图号" align="center" width="190px">
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column label="制品名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column label="工序名" align="center" width="100px">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" width="70px">
              <template slot-scope="scope">
                {{ scope.row.投产数量 }}
              </template>
            </el-table-column>
            <el-table-column label="操作者" align="center" width="70px">
              <template slot-scope="scope">
                {{ scope.row.姓名 }}
              </template>
            </el-table-column>
          </el-table>
          <el-table :data="tableData3" :row-class-name="tableData3ClassName" height="393" size="mini" style="width: 100%" border @row-dblclick="XuanRu">
            <el-table-column label="序号" align="center" width="50px">
              <template slot-scope="scope">
                {{ scope.row.工序顺序 }}
              </template>
            </el-table-column>
            <el-table-column label="工序名" align="center">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column label="操作者" align="center" width="90px">
              <template slot-scope="scope">
                {{ scope.row.姓名 }}
              </template>
            </el-table-column>
            <el-table-column label="排产时间" align="center" width="120px">
              <template slot-scope="scope">
                {{ scope.row.排产时间 }}
              </template>
            </el-table-column>
            <el-table-column label="完成日期" align="center" width="120px">
              <template slot-scope="scope">
                {{ scope.row.完成日期 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getPerson, getParts, getGongxu, XuanRu, XuanChu, searchTableData2, panDuan } from '@/api/ManufacturingCenter/ShopScheduling'
export default {
  data() {
    return {
      Parts: '',
      index: 0,
      工艺计划流水号: '',
      PersonValue: '',
      Person: [],
      loading1: false,
      loading2: false,
      loading3: false,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      total: 0, // 总条数
      pageSize: 500,
      pageCurrent: 1
    }
  },
  created() {
    this.getPerson()
    this.getParts()
  },
  methods: {
    getPerson() {
      this.PersonValue = ''
      this.Person = []
      getPerson().then(response => {
        response.data.map(v => {
          this.Person.push({
            label: v.姓名,
            value: v.人员编号
          })
        })
        this.PersonValue = this.Person[0].value
        this.searchTableData2()
      })
    },
    getParts() {
      this.tableData1 = []
      this.loading1 = true
      let check
      this.Parts ? check = 1 : check = 0
      getParts(check, this.Parts, this.pageCurrent, this.pageSize).then(response => {
        response.data.rows.map(v => {
          this.tableData1.push({
            工艺计划流水号: v.工艺计划流水号,
            图号及规格: v.图号及规格,
            零件名称: v.零件名称,
            投产数量: v.投产数量,
            计划开始时间: v.计划开始时间 ? v.计划开始时间.split(' ')[0] : '',
            计划结束时间: v.计划结束时间 ? v.计划结束时间.split(' ')[0] : '',
            状态: v.状态
          })
        })
        this.total = response.data.total
        this.loading1 = false
      })
    },
    getGongxu(row) {
      this.loading3 = true
      this.tableData3 = []
      this.index = row.index
      this.工艺计划流水号 = row.工艺计划流水号
      getGongxu(row.工艺计划流水号).then(response => {
        response.data.map(v => {
          this.tableData3.push({
            工序流水号: v.工序流水号,
            工序状态: v.工序状态,
            工序顺序: v.工序顺序,
            工艺名称: v.工艺名称,
            姓名: parseInt(v.工序间是否外协) === 2 ? '外协' : v.姓名,
            排产时间: v.排产时间 ? v.排产时间.split(' ')[0] : '',
            完成日期: v.完成日期 ? v.完成日期.split(' ')[0] : '',
            工序间是否外协: v.工序间是否外协
          })
        })
        this.loading3 = false
      })
    },
    tableData1ClassName({ row, rowIndex }) {
      row.index = rowIndex
      if (row.状态 === '1') {
        return 'CJPClingjianjinxing'
      }
    },
    tableData3ClassName({ row, rowIndex }) {
      if (row.工序状态 === 4) {
        return 'CJPCgongxuwancheng'
      }
      if (row.工序间是否外协 === 2) {
        return 'CJPCxujianwaixie'
      }
    },
    searchTableData2() {
      this.loading2 = true
      this.tableData2 = []
      searchTableData2(this.PersonValue).then(response => {
        this.tableData2 = response.data
        this.loading2 = false
      })
    },
    XuanRu(row) {
      if (row.工序状态 !== 4 && row.工序间是否外协 !== 2) {
        XuanRu(this.PersonValue, row.工序流水号).then(response => {
          if (response.data[0].result === '1') {
            this.tableData1[this.index].状态 = '1'
            this.loading3 = true
            this.tableData3 = []
            getGongxu(this.工艺计划流水号).then(response => {
              response.data.map(v => {
                this.tableData3.push({
                  工序流水号: v.工序流水号,
                  工序状态: v.工序状态,
                  工序顺序: v.工序顺序,
                  工艺名称: v.工艺名称,
                  姓名: parseInt(v.工序间是否外协) === 2 ? '外协' : v.姓名,
                  排产时间: v.排产时间 ? v.排产时间.split(' ')[0] : '',
                  完成日期: v.完成日期 ? v.完成日期.split(' ')[0] : '',
                  工序间是否外协: v.工序间是否外协
                })
              })
              this.loading3 = false
            })
            this.searchTableData2()
          }
        })
      }
    },
    XuanChu(row) {
      XuanChu(row.工序流水号).then(response => {
        if (response.data[0].result === '1') {
          panDuan(row.工艺计划流水号).then(res => {
            if (res.data[0].状态 === 0) {
              this.tableData1.map(v => {
                if (parseInt(v.工艺计划流水号) === parseInt(res.data[0].工艺计划流水号)) {
                  v.状态 = ''
                }
              })
            }
          })
          this.loading3 = true
          this.tableData3 = []
          getGongxu(this.工艺计划流水号).then(response => {
            response.data.map(v => {
              this.tableData3.push({
                工序流水号: v.工序流水号,
                工序状态: v.工序状态,
                工序顺序: v.工序顺序,
                工艺名称: v.工艺名称,
                姓名: parseInt(v.工序间是否外协) === 2 ? '外协' : v.姓名,
                排产时间: v.排产时间 ? v.排产时间.split(' ')[0] : '',
                完成日期: v.完成日期 ? v.完成日期.split(' ')[0] : '',
                工序间是否外协: v.工序间是否外协
              })
            })
            this.loading3 = false
          })
          this.searchTableData2()
        }
      })
    },
    handleSizeChange(val) {
      this.tableData3 = []
      this.pageSize = val
      this.getParts()
    },
    handleCurrentChange(val) {
      this.tableData3 = []
      this.pageCurrent = val
      this.getParts()
    }
  }
}
</script>

<style>
  .CJPCgongxuwancheng{
    background: #d8e5f6 !important;
  }
  .CJPClingjianjinxing{
    background: #9bd7fc !important;
  }
  .CJPCxujianwaixie{
    background: #e6eaee !important;
  }
</style>
