<template>
  <div class="app-container">
    <el-card style="height: 850px">
      <div style="margin-top: 7px; margin-bottom: 7px">
        &nbsp;&nbsp;
        <span class="show-text">操作人:</span>
        <el-select
          v-model="checker"
          placeholder="请选择检测人"
          clearable
          style="width: 150px; margin-right: 10px"
          filterable
        >
          <el-option
            v-for="item in checkerList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 20px" plain @click="searchTable()">查询</el-button>
      </div>
      <div>
        <el-table
          v-loading="loading"
          :data="tableData"
          :height="'82vh'"
          border
          element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-spinner="el-icon-loading"
          highlight-current-row
          size="mini"
          style="width: 100%; margin-top: 20px"
          tooltip-effect="dark"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="50"
            fixed
          />
          <el-table-column
            align="center"
            prop="UserName"
            label="人员名称"
            width="120"
            fixed
          />
          <el-table-column
            align="center"
            prop="指派对象"
            label="工位"
            width="80"
            
          />
          <el-table-column
            align="center"
            prop="订单号"
            label="生产订单"
            width="80"
            fixed
          />
          <el-table-column
            align="center"
            prop="计划号"
            label="计划号"
            width="80"
          />
          <el-table-column
            align="center"
            prop="合同号"
            label="销售订单"
            width="80"
            fixed
          />
          <el-table-column
            align="center"
            prop="零件名称"
            label="物料名称"
            width="100"
          />
          <el-table-column
            align="center"
            prop="零件编码"
            label="物料编码"
            width="250"
          />
          <!-- <el-table-column align="center" label="顺序" width="50">
            <template slot-scope="scope">{{ scope.row.订单行号 }}</template>
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="工序名称"
            label="工序名称"
            width="80"
          />
          <el-table-column
            align="center"
            prop="分配数"
            label="分配数"
            width="60"
          />
          <!-- <el-table-column
            align="center"
            prop="上序合格数"
            label="上序合格数"
            width="60"
          /> -->
          <!-- <el-table-column align="center" label="加工状态" width="80">
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.加工状态)"
                class="score-cell"
              >
                {{ scope.row.加工状态 }}
              </div>
            </template>
          </el-table-column> -->
          
          <el-table-column
            align="center"
            prop="完成数量"
            label="送检数"
            width="60"
          />
          <el-table-column
            align="center"
            prop="收检合格数"
            label="收检合格数"
            width="60"
          />
          <el-table-column
            align="center"
            prop="收检不合格数"
            label="收检不合格数"
            width="60"
          />
          
          <el-table-column
            align="center"
            label="入库数量"
            width=" 100"
            prop="入库数量"
          />
          <el-table-column
            align="center"
            label="发料状态"
            width="80"
            v-bind:class="colorstatus"
          >
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.发料状态)"
                class="score-cell"
              >
                {{ scope.row.发料状态 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="拣配状态"
            width="80"
            v-bind:class="colorstatus"
          >
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.拣配状态)"
                class="score-cell"
              >
                {{ scope.row.拣配状态 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="齐套"
            width="80"
            v-bind:class="colorstatus"
          >
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.齐套)"
                class="score-cell"
              >
                {{ scope.row.齐套 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="开始时间" width="200">
            <template slot-scope="scope">{{scope.row.StartTime}}</template>
          </el-table-column>
          <el-table-column align="center" label="计划开始" width="100">
            <template slot-scope="scope">{{formatDate(scope.row.计划开始)}}</template>
          </el-table-column>
          <el-table-column align="center" label="计划完成" width="100">
            <template slot-scope="scope">{{formatDate(scope.row.计划完成)}}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="派工特殊说明"
            label="备注"
            width="120"
          />
        </el-table>
      </div>
    </el-card>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      routineCheckType: [],
      dialogFormVisible: false,
      title: '',
      equipmentValue: '',
      equipmentName: '',
      equipmentType: '',
      opName: '',
      process: [],
      form: {
        设备名称: '',
        设备型号: '',
        设备类型: '',

      },
      basedatalx:[],
      rules: {
        设备名称: [{ required: true, message: '请输入设备名称' }],

        设备类型: [{ required: true, message: '请选择' }]
      },
      original: '',
      total: 0, // 分页总数
      tableData: [], // 设备信息表
      pageCurrent: 1, // 分页当前页
      pageSize: 20, // 分页每页显示条数
      dataname:'',
      colorstatus: "",
      loading: false,
      checkerList: [],
      checker: "",
      checkerLabel: "",
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.searchTable()
    this.getbasedata()
    this.getCheckerList();

  },
  methods: {
    getCheckerList() {
      this.checkerList = [];
      var Data = this.CreateData("11", "人员管理_人员信息查询_质检部门_查询");
      this.ExecDatabase(Data).then((response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.checkerList.push({
            label: response.data[i].Personnel_Name,
            value: response.data[i].Personnel_Number,
          });
        }
      });
    },
    getbasedata(){
      var Data = this.CreateData('11', 'MES_登录_工位与名称_查询')
      this.ExecDatabase(Data).then(response => {
        response.data.forEach(element => {
          
            this.basedatalx.push({
              name:element.工位名称,
              id:element.工位号,
            })
          
        });
      })
    },
    searchTable() {
      var param = []
      const selectedChecker = this.checkerList.find(
        (item) => item.value === this.checker
      );
      param.push(['操作人', selectedChecker ? selectedChecker.label : ''])
      var Data = this.CreateData('11', '生产管理_装配状态_获取进行中任务',param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data
      })
    },
    getScoreStyle(bgcolor) {
      if (bgcolor == "可执行" || bgcolor == "是" || bgcolor == "发料齐套" || bgcolor == "已拣配" ) {
        return {
          backgroundColor: "#f0f9eb",
          color: "#67c23a",
        };
      } else if (bgcolor == "已完成") {
        return {
          backgroundColor: "#ecf5ff",
          color: "#409eff",
        };
      } else if (bgcolor == "已开工" || bgcolor == "否" || bgcolor == "发料缺件" || bgcolor == "未拣配") {
        return {
          backgroundColor: "#fdf6ec",
          color: "#e6a23c",
        };
      } else if (bgcolor == "开始加工"  ||  bgcolor == "辅助开始") {
        return {
          backgroundColor: "#f0f9eb",
          color: "#67c23a",
        };
      } else if (bgcolor == "暂停") {
        return {
          backgroundColor: "#fdf6ec",
          color: "#e6a23c",
        };
      } else if (bgcolor == "报工" ||  bgcolor == "辅助结束") {
        return {
          backgroundColor: "#ecf5ff",
          color: "#409eff",
        };
      }
      
    },
    formatDate(date) {
      if (!date) return "";
      return date.split(" ").length > 1 ? date.split(" ")[0] : date;
    },
    
    
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

