<template>
  <div>
    <el-card>
      <div class="search-container" @keyup.enter="searchTable">
        <span class="show-text">销售订单:</span>
        <el-input
          v-model="contractNo"
          placeholder="请输入销售订单"
          clearable
          style="width: 150px; margin-right: 10px"
        />
        <span class="show-text">生产订单:</span>
        <el-input
          v-model="orderNo"
          placeholder="请输入生产订单"
          clearable
          style="width: 150px; margin-right: 10px"
          @change = 'searchTable()'
        />
        <span class="show-text">物料编码:</span>
        <el-input
          v-model="partNo"
          placeholder="请输入物料编号"
          clearable
          style="width: 150px; margin-right: 10px"
        />
        <!-- <span class="show-text">属性</span>
        <el-select
          v-model="attribute"
          style="width: 150px; margin-right: 10px"
          filterable
        >
          <el-option label="装配" value="2" />
          <el-option label="机加" value="1" />
          <el-option label="全部" value="0" />
        </el-select> -->
        <!-- <br />
        <br /> -->
        <span class="show-text">位置</span>
        <el-select
          v-model="positionstate"
          style="width: 150px; margin-right: 10px"
          filterable
        > <el-option label="全部" value="3" />
          <el-option label="一楼" value="2" />
          <el-option label="二楼" value="1" />
          <el-option label="仓库" value="0" />
        </el-select>
        <!-- <span class="show-text">完成状态</span>
        <el-select
          v-model="finishstate"
          style="width: 150px; margin-right: 10px"
          filterable
        >
          <el-option label="全部" value="2" />
          <el-option label="已完成" value="1" />
          <el-option label="未完成" value="0" />
        </el-select> -->
        <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"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50"
          fixed
        />
        <el-table-column
          align="center"
          label="项目"
          width="100"
          prop="项目"
        />
        <el-table-column
          align="center"
          label="计划号"
          width="100"
          prop="计划号"
        />
        <el-table-column
          align="center"
          label="生产订单号"
          width="100"
          prop="生产订单号"
        />
        <el-table-column
          align="center"
          label="物料名称"
          width="150"
          prop="物料名称"
        />
        <el-table-column
          align="center"
          label="产成品物料编号"
          width="150"
          prop="产成品物料编号"
        />
        
        <!-- <el-table-column
          align="center"
          label="计划生产数"
          width="100"
          prop="计划生产数"
        /> -->
        <!-- <el-table-column
            align="center"
            label="加急数量"
            width=" 120"
          >
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="Urgent(scope.row)">{{scope.row.加急总数}}</el-button>
            </template>
        </el-table-column> -->
        <el-table-column
          align="center"
          label="计划数量"
          width="120"
          prop="计划数量"
        />
        <el-table-column
          align="center"
          label="拣配日期"
          width="110"
          prop="拣配日期"
        />
        <el-table-column
          align="center"
          label="预计齐套时间"
          width="120"
          prop="预计齐套时间"
        />
        <!--  <el-table-column
          align="center"
          label="检验操作人"
          width="130"
          prop="检测人"
        />

        <el-table-column
          align="center"
          label="检验时间"
          width="180"
          prop="检测时间"
        /> -->

        <!-- <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button
              v-if = !scope.row.转至
              class="operation-btn"
              type="primary"
              size="mini"
              @click="change(scope.row)"
              >转至</el-button
            >
            <el-button
              v-if = !scope.row.完成
              class="operation-btn"
              type="success"
              size="mini"
              @click="finish(scope.row)"
              >完成</el-button
            >

          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <!-- 加急明细框 -->
    <el-dialog
        :visible.sync="UrgentVisible"
        title="加急明细"
        width="1200px"
        center
        :close-on-click-modal="false"
      >
        <el-form ref="Urgentarr" :model="Urgentarr" size="mini">
          <el-form-item  v-for="item in Urgentarr" :key="item.订单编号" >
            <div class="info-container" >
              <div class="info-item">
                <span class="info-label" style="width: 80px">生产订单</span>
                <span class="info-value">
                  <el-input
                    v-model="item.订单编号"
                    size="mini"
                    readonly
                    style="width: 300px"
                  />
                </span>
              </div>
              <div class="info-item">
                <span class="info-label" style="width: 80px">加急数量</span>
                <span class="info-value">
                  <el-input
                    v-model="item.加急数量"
                    size="mini"
                    style="width: 150px"
                    readonly
                  />
                </span>
              </div>
              <div class="info-item">
                <span class="info-label" style="width: 80px">物料编号</span>
                <span class="info-value">
                  <el-input
                    v-model="item.物料编号"
                    size="mini"
                    style="width: 150px"
                    readonly
                  />
                </span>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="UrgentVisible = false">关闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入xlsx库
import * as XLSX from "xlsx";
import {getB1} from '@/api/b1s'
import {patchB1} from '@/api/b1s'
export default {
  data() {
    return {
      saveLoading: false,
      contractNo: "",
      orderNo: "",
      partNo: "",
      partName: "",
      completionTime: "",
      inspectionDate: "",
      type: "",
      typeList: [],
      checker: "",
      checkerLabel: "",
      checkerList: [],
      inspectionResult: "",
      tableData: [],
      loading: false,
      historyLoading: false, // 终检记录加载状态
      selectedRow: null,
      finalCheckVisible: false,
      finalCheckHistoryVisible: false,
      finalCheckHistoryData: [],
      finalCheckData: {
        零件名称: "",
        内部合同号: "",
        零件编码: "",
        计划号: "",
        工序名称: "",
        计划完成时间: "",
        // 计划生产数: 0,
        TaskAID: "",

        // 终检数据（用户输入）
        检测数量: 0,
        合格数: 0,
        不合格数: 0,
        检测人: "",
        检测时间: "",
        检测说明: "",
      },
      checkstatus:"0",
      attribute:'0',
      finishstate:'0',
      positionstate:'3',
      UrgentVisible: false,
      Urgentarr: {}
    };
  },
  created() {
    this.searchTable();
  },
  methods: {
    // Urgent(row){
    //   var param = []
    //   param.push(["物料编号",row.零件编码])
    //   this.UrgentVisible = true
    //   var Data = this.CreateData("11", "加急订单_加急明细查询",param);
    //   this.ExecDatabase(Data).then((response) => {
    //     this.Urgentarr = response.data
    //   });
    // },
    tableRowClassName({ row, rowIndex }) {
      const isUrgent =  row.加急状态 === 1 ;
      if (isUrgent) {
        return 'priority-row';
      }
      return '';
    },
    searchTable() {
      this.loading = true;
      this.tableData = [];

      var param = [];
      param.push(["合同号", this.contractNo]);
      param.push(["订单号", this.orderNo]);
      param.push(["零件编号", this.partNo]);
      param.push(["位置", this.positionstate]);
      var Data = this.CreateData(
        "11",
        "生产管理_拣配任务_查询",
        param
      );

      this.ExecDatabase(Data)
        .then((response) => {
          
          this.loading = false;
          console.log("查询结果:", response.data);
          if (response.data && response.data.length !== 0) {
            this.tableData = response.data;
            this.tableData.sort((a, b) => {
              const aIsUrgent = a.加急状态 === 1;
              const bIsUrgent = b.加急状态 === 1;

              if (aIsUrgent && !bIsUrgent) return -1;
              if (!aIsUrgent && bIsUrgent) return 1;
            })
      
          } else {
            this.tableData = [];
            this.$message.info("未查询到相关数据");
          }
        })
        .catch((error) => {
          this.loading = false;
          console.error("查询失败:", error);
          this.$message.error("查询失败");
        });
    },
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    
  },
};
</script>

<style scoped>
  ::v-deep .priority-row {
  background-color: #f56c6c !important; /* 浅红色背景 */
  color: #000000 !important;            /* 深红色文字 */
}
::v-deep .priority-row td {
  background-color: #f56c6c !important;
  color: #000000 !important;
  border: #f56c6c;
}
.search-container {
  margin-bottom: 20px;
}
.show-text {
  margin-right: 5px;
  line-height: 32px;
}
.operation-cell {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.operation-btn {
  flex: 1;
  margin: 0 5px;
  padding: 0;
  min-width: 0;
}
.active {
  color: skyblue;
  margin-left: 5px;
}

.info-container {
  border: 1px solid #ccc;
  display: flex;
}

.info-item {
  display: flex;
  flex: 1;
  border-right: 1px solid #ccc;
}

.info-item:last-child {
  border-right: none;
}

.info-label {
  width: 30%;
  padding: 8px;
  background-color: #f5f7fa;
  border-right: 1px solid #ccc;
}

.info-value {
  flex: 1;
  padding: 5px;
}

.info-label,
.info-value {
  display: flex;
  align-items: center;
}
</style>