<template>
  <div class="page-container column-container">
    <!-- 搜索区 -->
    <el-form
      class="list-search-container"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
    >
      <el-form-item class="section-title" label="咨询管理" />
      <el-form-item label="咨询类别：">
        <el-select
          v-model="queryParams.isProcessInspection"
          clearable
          placeholder="请选择类别"
          style="width: 130px"
        >
          <el-option label="全部" value="" />
          <el-option label="分选" value="0" />
          <el-option label="序检" value="1" />
          <el-option label="外协序检" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="计划单号/批次号：">
        <el-input
          placeholder="请输入关键字"
          v-model.trim="queryParams.lotCode"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="产品描述：">
        <el-input
          placeholder="请输入关键字"
          v-model.trim="queryParams.productDescription"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="问题描述：">
        <el-input
          placeholder="请输入关键字"
          v-model.trim="queryParams.content"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item>
        <el-button type="info" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 列表区 -->
    <div class="el-table-container">
      <div class="el-table-inner-container">
        <el-table
          ref="dataTable"
          v-loading="loading"
          border
          :data="dataList"
          highlight-current-row
          height="100%"
        >
          <el-table-column
            type="index"
            label="行号"
            width="50"
            align="center"
          />
          <el-table-column label="状态" align="center" width="64">
            <template #default="scope">
              <span v-if="scope.row.status === 0">待回复</span>
              <span
                v-if="scope.row.status === 1"
                style="font-weight: 700; color: #f56c6c"
                >不合格</span
              >
              <span
                v-if="scope.row.status === 2"
                style="font-weight: 700; color: #67c23a"
                >合格</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="批次号"
            width="120"
            align="center"
            prop="lotCode"
          />
          <el-table-column
            label="产品描述"
            align="center"
            width="320"
            prop="productDescription"
          />
          <el-table-column
            label="工序"
            width="120"
            align="center"
            prop="processAlias"
          />
          <el-table-column label="问题描述" align="center" prop="content" />
          <el-table-column
            label="提交人"
            align="center"
            width="80"
            prop="nickName"
          />
          <el-table-column
            label="提交时间"
            align="center"
            width="144"
            prop="createTime"
          />
          <el-table-column label="操作" align="center" width="200">
            <template #default="scope">
              <el-button
                v-if="scope.row.status === 0 || scope.row.status === 1"
                type="success"
                icon="Check"
                @click="handleSetStatus('OK', scope.row)"
                >合格</el-button
              >
              <el-button
                v-if="scope.row.status === 0 || scope.row.status === 2"
                type="danger"
                icon="Close"
                @click="handleSetStatus('ERR', scope.row)"
                >不合格</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup>
import { list, save } from "@/api/business/consult";
const { proxy } = getCurrentInstance();

/** 咨询查询对象 */
const queryParams = ref({
  isProcessInspection: "",
  lotCode: "",
  productDescription: "",
  content: "",
  pageNum: 1,
  pageSize: 10,
});
/** 咨询变量 */
const dataList = ref([]);
const loading = ref(false);
const ids = ref([]);
const total = ref(0);

/***********************  方法区  ***********************/
/** 查询咨询管理列表 */
function getList() {
  loading.value = true;
  list(queryParams.value).then((res) => {
    dataList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}
/** 咨询搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

const handleSetStatus = (type, data) => {
  const msg = type === "OK" ? "合格" : "不合格";
  proxy.$modal.confirm("确定" + msg + "？").then(() => {
    data.status = type === "OK" ? 2 : 1;
    save(data).then((res) => {
      if (res.code === 200) {
        getList();
        proxy.$modal.msgSuccess("操作成功");
      } else {
        proxy.$modal.msgSuccess("操作失败");
      }
    });
  });
};

onMounted(() => {
  getList();
});
</script>
