<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <span>项目名称:</span>
        <el-select v-model="project" size="small" filterable clearable placeholder="项目名称" style="width: 180px;" @change="getMachine">
          <el-option
            v-for="item in projects"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>机床号:</span>
        <el-select v-model="Machine" size="small" clearable placeholder="机床号" style="width: 180px;" @change="getGroup">
          <el-option
            v-for="item in Machines"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>组号:</span>
        <el-select v-model="Group" size="small" clearable placeholder="组号" style="width: 180px;">
          <el-option
            v-for="item in Groups"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-row>
      <el-row>
        <el-select v-show="false" v-model="part" size="small" placeholder="是否外协">
          <el-option
            v-for="item in parts"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>零件图号:</span>
        <el-input v-model="number" placeholder="零件号" clearable size="small" style="width: 180px;"/>
        <el-button type="success" class="el-icon-search" size="small" style="margin: 10px 0 0 10px" @click="getTableData();pageCurrent=1;pageSize=10;total = 0">查询</el-button>
        <span>进度颜色：</span>
        <span style="background-color: red">拖期</span>
        <span style="background-color: yellow">即将拖期</span>
        <span style="background-color: lawngreen">如期</span>
        <span style="background-color: deepskyblue">工序外协</span>
        <span style="background-color: grey">报废</span>
      </el-row>
    </el-card>

    <el-card>
      <el-table
        v-loading="listLoading1"
        :data="tableData1"
        class="table"
        border
        height="650">
        <el-table-column
          label="序号"
          align="center"
          width="50"
          type="index"/>
        <el-table-column
          align="center"
          label="零件图号"
          width="200px">
          <template slot-scope="scope">{{ 零件图号[scope.$index] }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="零件名称"
          width="120px">
          <template slot-scope="scope"> {{ 零件名称[scope.$index] }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="数量">
          <template slot-scope="scope">{{ 投产数量[scope.$index] }}</template>
        </el-table-column>
        <el-table-column label="零件加工计划进度(工艺名称,计划完成时间,实际完成时间,员工名称)" >
          <el-table-column label="[1]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][0]">
                <h4>{{ process[scope.$index][0] }}</h4><h4>{{ planDate[scope.$index][0] }} </h4><h4> {{ realDate[scope.$index][0] }}</h4><h4> {{ worker[scope.$index][0] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[2]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][1]">
                <h4>{{ process[scope.$index][1] }}</h4><h4>{{ planDate[scope.$index][1] }} </h4><h4> {{ realDate[scope.$index][1] }}</h4><h4> {{ worker[scope.$index][1] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[3]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][2]">
                <h4>{{ process[scope.$index][2] }}</h4><h4>{{ planDate[scope.$index][2] }} </h4><h4> {{ realDate[scope.$index][2] }}</h4><h4> {{ worker[scope.$index][2] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[4]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][3]">
                <h4>{{ process[scope.$index][3] }}</h4><h4>{{ planDate[scope.$index][3] }} </h4><h4> {{ realDate[scope.$index][3] }}</h4><h4> {{ worker[scope.$index][3] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[5]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][4]">
                <h4>{{ process[scope.$index][4] }}</h4><h4>{{ planDate[scope.$index][4] }} </h4><h4> {{ realDate[scope.$index][4] }}</h4><h4> {{ worker[scope.$index][4] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[6]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][5]">
                <h4>{{ process[scope.$index][5] }}</h4><h4>{{ planDate[scope.$index][5] }} </h4><h4> {{ realDate[scope.$index][5] }}</h4><h4> {{ worker[scope.$index][5] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[7]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][6]">
                <h4>{{ process[scope.$index][6] }}</h4><h4>{{ planDate[scope.$index][6] }} </h4><h4> {{ realDate[scope.$index][6] }}</h4><h4> {{ worker[scope.$index][6] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[8]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][7]">
                <h4>{{ process[scope.$index][7] }}</h4><h4>{{ planDate[scope.$index][7] }} </h4><h4> {{ realDate[scope.$index][7] }}</h4><h4> {{ worker[scope.$index][7] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[9]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][8]">
                <h4>{{ process[scope.$index][8] }}</h4><h4>{{ planDate[scope.$index][8] }} </h4><h4> {{ realDate[scope.$index][8] }}</h4><h4> {{ worker[scope.$index][8] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[10]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][9]">
                <h4>{{ process[scope.$index][9] }}</h4><h4>{{ planDate[scope.$index][9] }} </h4><h4> {{ realDate[scope.$index][9] }}</h4><h4> {{ worker[scope.$index][9] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[11]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][10]">
                <h4>{{ process[scope.$index][10] }}</h4><h4>{{ planDate[scope.$index][10] }} </h4><h4> {{ realDate[scope.$index][10] }}</h4><h4> {{ worker[scope.$index][10] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[12]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][11]">
                <h4>{{ process[scope.$index][11] }}</h4><h4>{{ planDate[scope.$index][11] }} </h4><h4> {{ realDate[scope.$index][11] }}</h4><h4> {{ worker[scope.$index][11] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[13]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][12]">
                <h4>{{ process[scope.$index][12] }}</h4><h4>{{ planDate[scope.$index][12] }} </h4><h4> {{ realDate[scope.$index][12] }}</h4><h4> {{ worker[scope.$index][12] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[14]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][13]">
                <h4>{{ process[scope.$index][13] }}</h4><h4>{{ planDate[scope.$index][13] }} </h4><h4> {{ realDate[scope.$index][13] }}</h4><h4> {{ worker[scope.$index][13] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[15]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][14]">
                <h4>{{ process[scope.$index][14] }}</h4><h4>{{ planDate[scope.$index][14] }} </h4><h4> {{ realDate[scope.$index][14] }}</h4><h4> {{ worker[scope.$index][14] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[16]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][15]">
                <h4>{{ process[scope.$index][15] }}</h4><h4>{{ planDate[scope.$index][15] }} </h4><h4> {{ realDate[scope.$index][15] }}</h4><h4> {{ worker[scope.$index][15] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[17]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][16]">
                <h4>{{ process[scope.$index][16] }}</h4><h4>{{ planDate[scope.$index][16] }} </h4><h4> {{ realDate[scope.$index][16] }}</h4><h4> {{ worker[scope.$index][16] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[18]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][17]">
                <h4>{{ process[scope.$index][17] }}</h4><h4>{{ planDate[scope.$index][17] }} </h4><h4> {{ realDate[scope.$index][17] }}</h4><h4> {{ worker[scope.$index][17] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[19]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][18]">
                <h4>{{ process[scope.$index][18] }}</h4><h4>{{ planDate[scope.$index][18] }} </h4><h4> {{ realDate[scope.$index][18] }}</h4><h4> {{ worker[scope.$index][18] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[20]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][19]">
                <h4>{{ process[scope.$index][19] }}</h4><h4>{{ planDate[scope.$index][19] }} </h4><h4> {{ realDate[scope.$index][19] }}</h4><h4> {{ worker[scope.$index][19] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[21]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][20]">
                <h4>{{ process[scope.$index][20] }}</h4><h4>{{ planDate[scope.$index][20] }} </h4><h4> {{ realDate[scope.$index][20] }}</h4><h4> {{ worker[scope.$index][20] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[22]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][21]">
                <h4>{{ process[scope.$index][21] }}</h4><h4>{{ planDate[scope.$index][21] }} </h4><h4> {{ realDate[scope.$index][21] }}</h4><h4> {{ worker[scope.$index][21] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[23]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][22]">
                <h4>{{ process[scope.$index][22] }}</h4><h4>{{ planDate[scope.$index][22] }} </h4><h4> {{ realDate[scope.$index][22] }}</h4><h4> {{ worker[scope.$index][22] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[24]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][23]">
                <h4>{{ process[scope.$index][23] }}</h4><h4>{{ planDate[scope.$index][23] }} </h4><h4> {{ realDate[scope.$index][23] }}</h4><h4> {{ worker[scope.$index][23] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[25]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][24]">
                <h4>{{ process[scope.$index][24] }}</h4><h4>{{ planDate[scope.$index][24] }} </h4><h4> {{ realDate[scope.$index][24] }}</h4><h4> {{ worker[scope.$index][24] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[26]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][25]">
                <h4>{{ process[scope.$index][25] }}</h4><h4>{{ planDate[scope.$index][25] }} </h4><h4> {{ realDate[scope.$index][25] }}</h4><h4> {{ worker[scope.$index][25] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[27]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][26]">
                <h4>{{ process[scope.$index][26] }}</h4><h4>{{ planDate[scope.$index][26] }} </h4><h4> {{ realDate[scope.$index][26] }}</h4><h4> {{ worker[scope.$index][26] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[28]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][27]">
                <h4>{{ process[scope.$index][27] }}</h4><h4>{{ planDate[scope.$index][27] }} </h4><h4> {{ realDate[scope.$index][27] }}</h4><h4> {{ worker[scope.$index][27] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[29]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][28]">
                <h4>{{ process[scope.$index][28] }}</h4><h4>{{ planDate[scope.$index][28] }} </h4><h4> {{ realDate[scope.$index][28] }}</h4><h4> {{ worker[scope.$index][28] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[30]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][29]">
                <h4>{{ process[scope.$index][29] }}</h4><h4>{{ planDate[scope.$index][29] }} </h4><h4> {{ realDate[scope.$index][29] }}</h4><h4> {{ worker[scope.$index][29] }}</h4>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :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>

  </div>
</template>
<script>
import { getNames, getMachines, getGroups, getTable, getTable2 } from '@/api/ManufacturingCenter/ProcessingStatus'

export default {
  data() {
    return {
      liushuihao: '',
      // value2: null,
      radioList: '0',
      length: 0,
      listLoading1: false,
      tableData1: [],
      project: '',
      projects: [],
      Machine: '',
      Machines: [],
      Group: '',
      Groups: [],
      part: '',
      parts: [{
        value: 0,
        label: '全部零件'
      }, {
        value: 1,
        label: '自家生产'
      }, {
        value: 2,
        label: '外协生产'
      }],
      Speed: '',
      Speeds: [{
        value: 5,
        label: '全部'
      }, {
        value: 1,
        label: '拖期'
      }, {
        value: 2,
        label: '即将拖期'
      }, {
        value: 3,
        label: '如期'
      }, {
        value: 4,
        label: '工序外协'
      }],
      number: '',
      checkbox_project: false,
      checkbox_Machine: false,
      checkbox_Group: false,
      checkbox_part: false,
      checkbox_number: false,
      零件图号: [],
      零件名称: [],
      投产数量: [],
      result: [],
      process: [[]],
      planDate: [[]],
      worker: [[]],
      colorCode: [[]],
      realDate: [[]],
      // waixie: [[]],
      total: 0, // 总条数
      pageSize: 10,
      pageCurrent: 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 查询供应商名称
    fetchData() {
      this.projects = []
      getNames().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.projects.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号
          })
        }
      })
      this.part = 1
    },
    getMachine() {
      this.Machine = ''
      this.Machines = []
      this.Group = ''
      this.Groups = []
      if (this.project !== '') {
        getMachines(this.project).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.Machines.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号
            })
          }
        })
      }
    },
    getGroup() {
      this.Group = ''
      this.Groups = []
      getGroups(this.Machine).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Groups.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
      })
    },
    // 按条件查询
    getTableData() {
      this.listLoading1 = true
      if (this.project === '') {
        this.checkbox_project = false
      } else {
        this.checkbox_project = true
      }
      if (this.Machine === '') {
        this.checkbox_Machine = false
      } else {
        this.checkbox_Machine = true
      }
      if (this.Group === '') {
        this.checkbox_Group = false
      } else {
        this.checkbox_Group = true
      }
      if (this.part === '') {
        this.checkbox_part = false
      } else {
        this.checkbox_part = true
      }
      if (this.number === '') {
        this.checkbox_number = false
      } else {
        this.checkbox_number = true
      }
      this.tableData1 = []
      this.零件图号 = []
      this.零件名称 = []
      this.投产数量 = []
      this.result = []
      this.process = [[]]
      this.planDate = [[]]
      this.worker = [[]]
      this.colorCode = [[]]
      this.realDate = [[]]
      this.length = 0
      getTable(this.checkbox_project, this.project, this.checkbox_Machine, this.Machine, this.checkbox_Group, this.Group, this.checkbox_number, this.number, this.part, this.pageCurrent, this.pageSize).then(response => {
        this.length = parseInt(response.data.total)
        for (let i = 0; i < response.data.rows.length; i++) { // 声明二维数组
          this.零件图号.push(response.data.rows[i].零件图号)
          this.零件名称.push(response.data.rows[i].零件名称)
          this.投产数量.push(response.data.rows[i].投产数量)
          this.process[i] = []
          this.planDate[i] = []
          this.worker[i] = []
          this.colorCode[i] = []
          this.realDate[i] = []
          this.result.push(response.data.rows[i])
        }
        if (this.零件图号.length !== 0) {
          for (let i = 0; i < this.零件图号.length; i++) {
            getTable2(this.checkbox_project, this.project, this.checkbox_Machine, this.Machine, this.checkbox_Group, this.Group, this.零件图号[i], this.part).then(response => {
              this.liushuihao = response.data[0].工艺计划流水号
              for (let k = 0; k < response.data.length; k++) {
                if (response.data[k].工艺计划流水号 === this.liushuihao) {
                  this.process[i][k] = response.data[k].工艺名称简称
                  this.planDate[i][k] = response.data[k].计划日期_短
                  this.worker[i][k] = response.data[k].员工姓名
                  this.realDate[i][k] = response.data[k].完成日期_短
                  if (response.data[k].工序状态 === 5) { // 灰色是已经完成 未入库
                    this.colorCode[i][k] = 'grey'
                  } else {
                    this.colorCode[i][k] = response.data[k].进度颜色
                  }
                  if (response.data[k].工序间是否外协 === 2) {
                    this.colorCode[i][k] = 'lightblue'
                  }
                }
              }
            }).then(() => {
              this.tableData1.push(this.result[i])
              this.listLoading1 = false
              this.total = this.length
            })
          }
        } else {
          this.tableData1 = []
          this.listLoading1 = false
          this.total = 0
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.getTableData()
    }
  }
}
</script>

<style scoped>
  .el-form-item{
    margin-bottom: 22px;
  }
  .el-card{
    margin-bottom: 15px;
  }
  span{
    margin: 10px 0 10px 10px;
  }
  .table h4{
    border: 1px solid transparent;
    margin: 0;
    font-weight: normal;
    width: 100px;
    height: 24px;
  }
  .white{
    background-color: ghostwhite;
    border: 1px solid #1f2d3d;
  }
  .grey{
    background-color: grey;
    border: 1px solid #1f2d3d;
  }
  .red{
    background-color: orangered;
    border: 1px solid #1f2d3d;
  }
  .lightblue{
    background-color: deepskyblue;
    border: 1px solid #1f2d3d;
  }
  .yellow{
    background-color: yellow;
    border: 1px solid #1f2d3d;
  }
  .blank{
    background-color: transparent;
    border: 0px solid white;
  }
  .green{
    background-color: lightgreen;
    border: 1px solid #1f2d3d;
  }
</style>
