<template>
  <div class="app-container">
    <el-row>
      <el-col style="width: 610px">
        <el-card style="width:610px">
          <span style="margin-left: 45%;font-size: 25px;">正在加工零件</span>
          <div>加工日期：{{ dateTime }}</div>
          <el-table :data="tableData" border size="mini" highlight-current-row style="width: 610px" stripe height="640px">
            <el-table-column label="机床图号" show-overflow-tooltip prop="机床图号" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.机床图号 }}
              </template>
            </el-table-column>
            <!--        <el-table-column label="机床名称" show-overflow-tooltip prop="机床名称" align="center" width="200px">-->
            <!--          <template slot-scope="scope">-->
            <!--            {{ scope.row.机床名称 }}-->
            <!--          </template>-->
            <!--        </el-table-column>-->
            <el-table-column label="组号" prop="组号" align="center" width="50px">
              <template slot-scope="scope">
                {{ scope.row.组号 }}
              </template>
            </el-table-column>
            <el-table-column label="零件图号" show-overflow-tooltip prop="零件图号" align="center" width="140px">
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <!--        <el-table-column label="零件名称" show-overflow-tooltip prop="零件名称" align="center" width="100px">-->
            <!--          <template slot-scope="scope">-->
            <!--            {{ scope.row.零件名称 }}-->
            <!--          </template>-->
            <!--        </el-table-column>-->
            <el-table-column label="数量" align="center" width="50px">
              <template slot-scope="scope">
                {{ scope.row.批次数量 }}
              </template>
            </el-table-column>
            <el-table-column label="工序" show-overflow-tooltip prop="工艺名" align="center" width="60px">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column label="工位" prop="终端编号" align="center" width="70px">
              <template slot-scope="scope">
                {{ scope.row.终端编号 }}
              </template>
            </el-table-column>
            <el-table-column label="操作者" prop="姓名" show-overflow-tooltip align="center" width="60px">
              <template slot-scope="scope">
                {{ scope.row.姓名 }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="70px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-search"
                  @click="viewProcedures(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col style="width: 610px">
        <el-card>
          <div style="margin-left: 45%;margin-bottom: 20px; font-size: 25px">待加工零件</div>
          <el-table :data="tableData3" border size="mini" highlight-current-row style="width: 610px" stripe height="640px">
            <el-table-column label="机床图号" show-overflow-tooltip prop="机床图号" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.机床图号 }}
              </template>
            </el-table-column>
            <!--        <el-table-column label="机床名称" show-overflow-tooltip prop="机床名称" align="center" width="200px">-->
            <!--          <template slot-scope="scope">-->
            <!--            {{ scope.row.机床名称 }}-->
            <!--          </template>-->
            <!--        </el-table-column>-->
            <el-table-column label="组号" prop="组号" show-overflow-tooltip align="center" width="60px">
              <template slot-scope="scope">
                {{ scope.row.组号 }}
              </template>
            </el-table-column>
            <el-table-column label="零件图号" show-overflow-tooltip prop="零件图号" align="center" width="130px">
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <!--        <el-table-column label="零件名称" show-overflow-tooltip prop="零件名称" align="center" min-width="100px">-->
            <!--          <template slot-scope="scope">-->
            <!--            {{ scope.row.零件名称 }}-->
            <!--          </template>-->
            <!--        </el-table-column>-->
            <el-table-column label="数量" align="center" width="50px">
              <template slot-scope="scope">
                {{ scope.row.批次数量 }}
              </template>
            </el-table-column>
            <el-table-column label="工序" prop="工艺名称" align="center" width="60px">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column label="工位" prop="mes终端编号" align="center" width="70px">
              <template slot-scope="scope">
                {{ scope.row.MES终端编号 }}
              </template>
            </el-table-column>
            <el-table-column label="操作者" show-overflow-tooltip prop="姓名" align="center" width="60px">
              <template slot-scope="scope">
                {{ scope.row.姓名 }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="70">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-search"
                  @click="viewProcedures(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="工序完成情况" center width="550px">
      <el-row>
        <span>零件图号:</span>
        <el-input v-model="SparePartsNumber" style="width: 150px" size="small"/>
        <span>零件名称:</span>
        <el-input v-model="SparePartsName" style="width: 150px" size="small"/>
      </el-row>
      <el-table
        :data="tableData2"
        style="width: 515px;margin-top: 20px"
        size="mini"
        height="320"
        stripe
        highlight-current-row
        border>
        <el-table-column align="center" label="工序顺序" width="70">
          <template slot-scope="scope">
            {{ scope.row.工序顺序 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺名称" width="90">
          <template slot-scope="scope">
            {{ scope.row.工艺名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺要求" width="100">
          <template slot-scope="scope">
            {{ scope.row.工艺要求 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作工" width="70">
          <template slot-scope="scope">
            {{ scope.row.操作员 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工序完成" width="80">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.工序状态)===4" type="success" size="small">已完成</el-tag>
            <el-tag v-if="parseInt(scope.row.工序状态)===5" type="warning" size="small">报废</el-tag>
            <el-tag v-if="parseInt(scope.row.工序状态)!==4 && parseInt(scope.row.工序状态)!==5" type="primary" size="small">未完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="工序质检" width="80">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.是否质检)===1" type="success" size="small">合格</el-tag>
            <el-tag v-if="parseInt(scope.row.是否质检)===2" type="warning" size="small">不合格</el-tag>
            <el-tag v-if="parseInt(scope.row.是否质检)!==1 && parseInt(scope.row.是否质检)!==2" type="primary" size="small">未检测</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { searchData, processingStatus, searchData1 } from '@/api/ManufacturingCenter/MachiningParts'
import { getNowShotTime } from '@/utils/tool'
export default {
  data() {
    return {
      tableData: [], // 正在加工零件列表
      dialogFormVisible: false,
      SparePartsNumber: '',
      SparePartsName: '',
      tableData2: [],
      tableData3: [],
      dateTime: getNowShotTime()
    }
  },
  mounted() {
    this.fetchData()
    this.fetchData1()
  },
  methods: {
    fetchData() {
      searchData().then(response => {
        this.tableData = response.data
      })
    },
    fetchData1() {
      searchData1().then(response => {
        console.log(response, 121212)
        this.tableData3 = response.data
      })
    },
    viewProcedures(row) {
      this.dialogFormVisible = true
      this.SparePartsNumber = row.零件图号
      this.SparePartsName = row.零件名称
      processingStatus(row.工艺计划流水号).then(response => {
        this.tableData2 = response.data
      })
    }
  }
}
</script>

<style scoped>

</style>
