<template>
  <div>
    <el-card>
      <div>
        <el-menu mode="horizontal" :default-active="activeIndex" router>
          <el-menu-item index="/QualityManagement/CheckTask/firstSpecial"
            >首检专检</el-menu-item
          >
          <el-menu-item index="/QualityManagement/CheckTask/processSpecial"
            >序检专检</el-menu-item
          >
          <el-menu-item index="/QualityManagement/CheckTask/final"
            >终检</el-menu-item
          >
          <el-menu-item index="/QualityManagement/CheckTask/purchaseIncoming"
            >采购入库检</el-menu-item
          >
          <el-menu-item index="/QualityManagement/CheckTask/salesReturn"
            >销售退货检</el-menu-item
          >
          <el-menu-item index="/QualityManagement/CheckTask/materialReturn"
            >原材料退库检</el-menu-item
          >
          <el-menu-item index="/QualityManagement/CheckTask/OtherInbound"
            >其他入库检</el-menu-item
          >
          <el-menu-item index="/QualityManagement/CheckTask/processReceive"
            >序检收检</el-menu-item
          >
        </el-menu>
      </div>
    </el-card>
    <el-card>
      <div class="search-container">
        <span class="show-text">工序:</span>
        <el-select
          v-model="process"
          placeholder="请选择工序"
          clearable
          style="width: 150px; margin-right: 10px"
        >
          <el-option
            v-for="item in processList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="show-text">工位:</span>
        <el-select
          v-model="station"
          clearable
          placeholder="请选择工位"
          style="width: 150px; margin-right: 10px"
        >
          <el-option
            v-for="item in StationList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="show-text">生产订单:</span>
        <el-input
          v-model="orderNo"
          placeholder="请输入生产订单"
          clearable
          style="width: 150px; margin-right: 10px"
        />
        <span class="show-text">零件编号:</span>
        <el-input
          v-model="partNo"
          placeholder="请输入零件编号"
          clearable
          style="width: 150px; margin-right: 10px"
        />
        <span class="show-text">操作时间:</span>
        <el-date-picker
          v-model="operationTime"
          :clearable="false"
          end-placeholder="结束时间"
          format="yyyy-MM-dd"
          popper-class="virtual-cell-time-picker"
          range-separator="-"
          start-placeholder="开始时间"
          style="width: 280px; vertical-align: top"
          type="datetimerange"
          value-format="yyyy-MM-dd"
        />
        <el-button
          :disabled="loading"
          icon="el-icon-search"
          plain
          type="primary"
          @click="searchTable()"
          >查询</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :height="'67vh'"
        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" label="工位编号" width="100">
          <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="100">
          <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-column align="center" label="生产订单" width="80">
          <template slot-scope="scope">
            {{ scope.row.订单编号 }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="物料编号" width="200">
          <template slot-scope="scope">
            {{ scope.row.物料编号 }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="物料名称" width="200">
          <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="180">
          <template slot-scope="scope">
            {{ scope.row.开始时间 }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="结束时间" width="180">
          <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-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "form",
      orderNo: "",
      partNo: "",
      productCode: "",
      productName: "",
      processName: "",
      process: "",
      processList: [],
      station: "",
      StationList: [],
      operationTime: [],
      loading: false,
      tableData: [],
    };
  },
  created() {
    var now = new Date();
    var start = new Date(
      Date.UTC(now.getFullYear() - 1, now.getMonth(), now.getDate(), 0, 0, 0)
    )
      .toISOString()
      .replace("T", " ")
      .replace(".000Z", "");
    var end = new Date(
      Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
    )
      .toISOString()
      .replace("T", " ")
      .replace(".000Z", "");
    this.operationTime = [start, end];
    this.getProcessList();
    this.getStationList();
    this.searchTable();
  },
  computed: {
    activeIndex() {
      return this.$route.path;
    },
  },
  methods: {
    // 初始化获取工序信息
    getProcessList() {
      this.processList = [];
      var Data = this.CreateData("11", "Prog_MES_LoadProcess");
      this.ExecDatabase(Data).then((response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.processList.push({
            label: response.data[i].工序名称,
            value: response.data[i].工艺编号,
          });
        }
      });
    },
    // 初始化获取工位信息
    getStationList() {
      this.StationList = [];
      var Data = this.CreateData("11", "Prog_MES_LoadStations");
      this.ExecDatabase(Data).then((response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.StationList.push({
            label: response.data[i].OPName,
            value: response.data[i].VisCode,
          });
        }
      });
    },
    searchTable() {
      this.loading = true;
      this.tableData = [];
      var param = [];
      param.push(["ProcessID", this.process]);
      param.push(["OPCode", this.station]);
      param.push(["OrderNo", this.orderNo]);
      param.push(["PartCode", this.partNo]);
      param.push([
        "PlanStart",
        this.operationTime ? this.operationTime[0] : "",
      ]);
      param.push(["PlanEnd", this.operationTime ? this.operationTime[1] : ""]);
      param.push(["不装配", 1]);
      var Data = this.CreateData(
        "11",
        "MES_QulityInspection_FirstCheckRecords",
        param
      );
      this.ExecDatabase(Data)
        .then((response) => {
          this.loading = false;
          console.log("查询结果:", response.data);
          if (response.data && response.data.length !== 0) {
            this.tableData = response.data;
          } else {
            console.log("查询结果为空");
          }
        })
        .catch((error) => {
          this.loading = false;
          console.error("查询出错:", error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.search-container {
  margin-bottom: 20px;
}
</style>
