<template>
  <div>
    <el-card>
      <div class="search-container">
        <span class="show-text">零件号:</span>
        <el-select
          v-model="partNo"
          placeholder="请选择零件号"
          clearable
          style="width: 150px; margin-right: 10px"
          filterable
        >
          <el-option
            v-for="item in partNoList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="show-text">工序名称:</span>
        <el-select
          v-model="process"
          placeholder="请选择工序"
          clearable
          style="width: 150px; margin-right: 10px"
          filterable
        >
          <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="type"
          placeholder="请选择类型"
          clearable
          style="width: 150px; margin-right: 10px"
          filterable
        >
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable
            filterable
          />
        </el-select>
        <el-button
          :disabled="loading"
          plain
          type="primary"
          @click="searchTable()"
          >查询</el-button
        >
        <el-button
          :disabled="loading"
          plain
          type="primary"
          @click="addCheckType()"
          >新增标准</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="120">
          <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="120">
          <template slot-scope="scope">
            {{ scope.row.检验项目 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="检验内容" width="150">
          <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="80">
          <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="150">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <div class="operation-cell">
              <el-button
                type="text"
                size="mini"
                @click="editInspectionStandard(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="deleteInspectionStandard(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :visible.sync="dialogVisibleAdd"
        :title="dialogTitle"
        center=""
        width="850px"
        style="text-align: center"
      >
        <el-form
          ref="checkForm"
          :model="checkForm"
          label-position="right"
          label-width="140px"
          size="mini"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="零件号">
                <el-input
                  v-model="checkForm.零件号"
                  size="mini"
                  readonly=""
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工序">
                <el-input
                  v-model="checkForm.工序"
                  size="mini"
                  readonly=""
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="类型">
                <el-input
                  v-model="checkForm.类型"
                  size="mini"
                  readonly=""
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检验比例">
                <el-input
                  v-model="checkForm.检验比例"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="检验项目">
                <el-input
                  v-model="checkForm.检验项目"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检验内容">
                <el-input
                  v-model="checkForm.检验内容"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="上限值">
                <el-input
                  v-model="checkForm.上限值"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下限值">
                <el-input
                  v-model="checkForm.下限值"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位">
                <el-input
                  v-model="checkForm.单位"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检具">
                <el-input
                  v-model="checkForm.检具"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  v-model="checkForm.备注"
                  type="textarea"
                  :rows="3"
                  resize="vertical"
                  size="mini"
                  style="width: 400px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="dialog-footer">
            <div style="margin-bottom: 20px">
              <el-button
                type="primary"
                @click="submitInspection('checkForm', checkForm)"
                >确定</el-button
              >
              <el-button @click="dialogVisibleAdd = false">取 消</el-button>
            </div>
          </div>
        </el-form>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleChange"
        :title="dialogTitle"
        center=""
        width="850px"
        style="text-align: center"
      >
        <el-form
          ref="checkForm"
          :model="checkForm"
          label-position="right"
          label-width="140px"
          size="mini"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="零件号">
                <el-input
                  v-model="checkForm.零件号"
                  size="mini"
                  readonly=""
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工序">
                <el-input
                  v-model="checkForm.工序"
                  size="mini"
                  readonly=""
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="类型">
                <el-input
                  v-model="checkForm.类型"
                  size="mini"
                  readonly=""
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检验比例">
                <el-input
                  v-model="checkForm.检验比例"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="检验项目">
                <el-input
                  v-model="checkForm.检验项目"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检验内容">
                <el-input
                  v-model="checkForm.检验内容"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="上限值">
                <el-input
                  v-model="checkForm.上限值"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下限值">
                <el-input
                  v-model="checkForm.下限值"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位">
                <el-input
                  v-model="checkForm.单位"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检具">
                <el-input
                  v-model="checkForm.检具"
                  size="mini"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  v-model="checkForm.备注"
                  type="textarea"
                  :rows="3"
                  resize="vertical"
                  size="mini"
                  style="width: 400px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="dialog-footer">
            <div style="margin-bottom: 20px">
              <el-button type="primary" @click="updateInspection('checkForm')"
                >确定</el-button
              >
              <el-button @click="dialogVisibleChange = false">取 消</el-button>
            </div>
          </div>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      partNo: "",
      partNoList: [],
      process: "",
      processList: [],
      type: "",
      typeList: [],
      dialogVisibleAdd: false,
      dialogVisibleChange: false,
      dialogTitle: "新增检验标准",
      checkForm: {
        零件号: "",
        工序: "",
        类型: "",
        检验比例: "",
        检验项目: "",
        检验内容: "",
        上限值: "",
        下限值: "",
        单位: "",
        检具: "",
        备注: "",
      },
      currentEditRow: null,
      loading: false,
    };
  },

  created() {
    this.getNoList();
    this.getProcessList();
    this.getTypeList();
    this.searchTable();
  },
  methods: {
    getNoList() {
      this.partNoList = [
        { label: "零件A", value: "PART001" },
        { label: "零件B", value: "PART002" },
        { label: "零件C", value: "PART003" },
        { label: "零件D", value: "PART004" },
        { label: "零件E", value: "PART005" },
      ];

      // 如果需要从接口获取真实数据，可以取消下面的注释并替换存储过程名
      /*
  this.partNoList = [];
  var Data = this.CreateData("11", "查询零件号"); // 这里替换为实际的存储过程名
  this.ExecDatabase(Data).then((response) => {
    for (let i = 0; i < response.data.length; i++) {
      // 根据实际返回的数据结构调整字段名
      this.partNoList.push({
        label: response.data[i].零件名称, // 根据实际字段名调整
        value: response.data[i].零件编号, // 根据实际字段名调整
      });
    }
  });
  */
    },
    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].StatgeName,
            value: response.data[i].StageID,
          });
        }
      });
    },
    getTypeList() {
      this.typeList = [];
      var Data = this.CreateData("11", "查询字典");
      this.ExecDatabase(Data).then((response) => {
        for (let i = 0; i < response.data.length; i++) {
          // 假设 YL_基础表_数据字典 返回的字段是 DictName 和 DictID
          if (response.data[i].数据类别 === "检测类型") {
            this.typeList.push({
              label: response.data[i].词条名称,
              value: response.data[i].词条编号,
            });
          }
        }
      });
    },
    addCheckType() {
      // 根据选中的值查找对应的标签文字
      const partNoItem = this.partNoList.find(
        (item) => item.value === this.partNo
      );
      const processItem = this.processList.find(
        (item) => item.value === this.process
      );
      const typeItem = this.typeList.find((item) => item.value === this.type);

      const partNoLabel = partNoItem ? partNoItem.label : this.partNo;
      const processLabel = processItem ? processItem.label : this.process;
      const typeLabel = typeItem ? typeItem.label : this.type;

      this.checkForm = {
        零件号: partNoLabel,
        类型: typeLabel,
        工序: processLabel,
        检验比例: "",
        检验项目: "",
        检验内容: "",
        上限值: "",
        下限值: "",
        单位: "",
        检具: "",
        备注: "",
      };
      this.dialogTitle = "新增检验标准";
      this.dialogVisibleAdd = true;
    },
    submitInspection(formName, row) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 获取选中项的编号
          const partNoItem = this.partNoList.find(
            (item) => item.label === this.checkForm.零件号
          );
          const processItem = this.processList.find(
            (item) => item.label === this.checkForm.工序
          );
          const typeItem = this.typeList.find(
            (item) => item.label === this.checkForm.类型
          );

          // 调用存储过程
          const param = [];
          param.push(["零件号", this.checkForm.零件号]);
          param.push(["零件编号", partNoItem ? partNoItem.value : ""]);
          param.push(["工序", this.checkForm.工序]);
          param.push(["工序编号", processItem ? processItem.value : ""]);
          param.push(["类型", this.checkForm.类型]);
          param.push(["类型编号", typeItem ? typeItem.value : ""]);
          param.push(["检验比例", this.checkForm.检验比例]);
          param.push(["检验项目", this.checkForm.检验项目]);
          param.push(["检验内容", this.checkForm.检验内容]);
          param.push(["上限值", this.checkForm.上限值]);
          param.push(["下限值", this.checkForm.下限值]);
          param.push(["单位", this.checkForm.单位]);
          param.push(["检具", this.checkForm.检具]);
          param.push(["备注", this.checkForm.备注]);

          const data = this.CreateData("12", "质量管理_检验标准表_新增", param);
          this.ExecDatabase(data)
            .then((response) => {
              if (response.data[0].result !== "1") {
                this.$message({
                  message: "检验标准提交失败！",
                  type: "error",
                });
                return;
              }
              this.$message({
                message: "检验标准提交成功",
                type: "success",
              });
              this.dialogVisibleAdd = false;

              this.searchTable();
            })
            .catch((error) => {
              this.$message({
                message: "检验标准提交失败: " + error,
                type: "error",
              });
            });
        }
      });
    },
    searchTable() {
      this.loading = true;
      this.tableData = [];
      this.selectedRow = null;

      console.log("查询条件:", {
        零件编号: this.partNo,
        工序编号: this.process,
        类型编号: this.type,
      });

      var param = [];
      if (this.partNo) {
        param.push(["零件编号", this.partNo]);
      }
      if (this.process) {
        param.push(["工序编号", this.process]);
      }
      if (this.type) {
        param.push(["类型编号", this.type]);
      }

      var Data = this.CreateData("11", "质量管理_检验标准表_查询", param);
      this.ExecDatabase(Data)
        .then((response) => {
          this.loading = false;
          console.log("查询返回的数据:", response.data);
          if (response.data.length !== 0) {
            this.tableData = response.data;
            console.log("表格数据:", this.tableData);
          } else {
            console.log("查询结果为空，参数:", param);
          }
        })
        .catch((error) => {
          this.loading = false;
          console.error("查询出错:", error);
          this.$message({
            message: "查询失败",
            type: "error",
          });
        });
    },
    editInspectionStandard(row) {
      // 获取选中行的数据，并填充到表单中
      this.checkForm = {
        零件号: row.零件号,
        工序: row.工序,
        类型: row.类型,
        检验比例: row.检验比例,
        检验项目: row.检验项目,
        检验内容: row.检验内容,
        上限值: row.上限值,
        下限值: row.下限值,
        单位: row.单位,
        检具: row.检具,
        备注: row.备注,
      };

      // 保存当前编辑的行数据，用于后续更新操作
      this.currentEditRow = row;
      this.dialogTitle = "修改检验标准";
      // 显示对话框
      this.dialogVisibleChange = true;
    },
    updateInspection(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 获取编号信息
          const partNoItem = this.partNoList.find(
            (item) => item.label === this.checkForm.零件号
          );
          const processItem = this.processList.find(
            (item) => item.label === this.checkForm.工序
          );
          const typeItem = this.typeList.find(
            (item) => item.label === this.checkForm.类型
          );

          // 构建更新参数
          const param = [];
          param.push(["ID", this.currentEditRow.ID]);
          param.push(["零件号", this.checkForm.零件号]);
          param.push([
            "零件编号",
            this.currentEditRow.零件编号 ||
              (partNoItem ? partNoItem.value : ""),
          ]);
          param.push(["工序", this.checkForm.工序]);
          param.push([
            "工序编号",
            this.currentEditRow.工序编号 ||
              (processItem ? processItem.value : ""),
          ]);
          param.push(["类型", this.checkForm.类型]);
          param.push([
            "类型编号",
            this.currentEditRow.类型编号 || (typeItem ? typeItem.value : ""),
          ]);
          param.push(["检验比例", this.checkForm.检验比例]);
          param.push(["检验项目", this.checkForm.检验项目]);
          param.push(["检验内容", this.checkForm.检验内容]);
          param.push(["上限值", this.checkForm.上限值]);
          param.push(["下限值", this.checkForm.下限值]);
          param.push(["单位", this.checkForm.单位]);
          param.push(["检具", this.checkForm.检具]);
          param.push(["备注", this.checkForm.备注]);

          // 调用更新存储过程
          const data = this.CreateData("12", "质量管理_检验标准表_修改", param);
          this.ExecDatabase(data)
            .then((response) => {
              if (response.data[0].result !== "1") {
                this.$message({
                  message: "检验标准更新失败！",
                  type: "error",
                });
                return;
              }
              this.$message({
                message: "检验标准更新成功",
                type: "success",
              });
              this.dialogVisibleChange = false;
              this.searchTable(); // 刷新表格数据
            })
            .catch((error) => {
              this.$message({
                message: "检验标准更新失败: " + error,
                type: "error",
              });
            });
        }
      });
    },
    deleteInspectionStandard(row) {
      this.$confirm("此操作将永久删除该检验标准, 是否继续?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",

        type: "warning",
      })
        .then(() => {
          // 构建删除参数
          const param = [];
          param.push(["ID", row.ID]);

          // 调用删除存储过程
          const data = this.CreateData("12", "质量管理_检验标准表_删除", param);
          this.ExecDatabase(data)
            .then((response) => {
              if (response.data[0].result !== "1") {
                this.$message({
                  message: "检验标准删除失败！",
                  type: "error",
                });
                return;
              }
              this.$message({
                message: "检验标准删除成功",
                type: "success",
              });
              this.searchTable(); // 刷新表格数据
            })
            .catch((error) => {
              this.$message({
                message: "检验标准删除失败: " + error,
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.search-container {
  margin-bottom: 20px;
}
.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>