<template>
    <div class="page-container row-container">
  
      <section class="list-part-container" style="flex: 2">
        <!-- 搜索区域 -->
        <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item class="section-title" label="咨询结果维护" />
  
          <el-form-item label="咨询结果：" prop="result">
            <el-input v-model="queryParams.result" placeholder="请输入咨询结果" clearable @keyup.enter="handleQuery"
              style="width: 160px;" />
              <el-form-item label="放行状态：" prop="status">
                <el-select placeholder="请选择放行状态" clearable style="width: 150px" v-model.trim="queryParams.status">
            <el-option v-for="dict in release_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
          </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button type="info" icon="Search" @click="handleQuery">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Plus" @click="handleAdd(null)"
              v-hasPermi="['business:consultResult:add']">新增</el-button>
          </el-form-item>
  
        </el-form>
        <!-- 列表区域 -->
        <div class="el-table-container">
          <div class="el-table-inner-container">
            <el-table v-loading="loading" :data="dataList" border height="100%">
              <el-table-column type="index" label="行号" width="50" align="center" />
              <el-table-column label="咨询结果" align="center" prop="result">
                <template #default="scope">
                <el-input v-if="scope.row.editStatus" placeholder="请输入咨询结果" v-model="scope.row.result"
                  style="width: 100%;" />
                <div v-else>{{ scope.row.result }}</div>
                </template>
              </el-table-column>
              <el-table-column label="放行状态" align="center" prop="status">
                <template #default="scope">
                    <el-select v-if="scope.row.editStatus" placeholder="请选择放行状态" style="width: 140px" v-model.trim="scope.row.status">
            <el-option v-for="dict in release_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
                <dict-tag v-else :options="release_status" :value="scope.row.status" />
              </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button v-if="!scope.row.editStatus" link type="warning" size="small" icon="Edit"
                    @click="handleUpdate(scope.row)" v-hasPermi="['business:consultResult:edit']">修改</el-button>
                  <el-button v-else link type="success" size="small" icon="Check"
                    @click="handleSave(scope.row)">保存</el-button>
                  <el-button v-if="!scope.row.editStatus" link type="danger" size="small" icon="Delete"
                    @click="handleDelete(scope.row, scope.$index)"
                    v-hasPermi="['business:consultResult:remove']">删除</el-button>
                  <el-button v-else link type="info" size="small" icon="Close" @click="handleCancel(scope.row)">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
          @pagination="getList" />
      </section>
    </div>
  </template>
  
  <script setup name="Equipment">
  import { listConsultResult, delConsultResult,addConsultResult,updateConsultResult } from "@/api/business/consultResult";
  const { proxy } = getCurrentInstance();
  const { release_status } = proxy.useDict("release_status");
  const dataList = ref([]);
  const loading = ref(true);
  const ids = ref([])
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  /** 查询对象 */
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    result: null,
    status: null,
  })
  
  /***********************  方法区  ****************************/
  
  /** 查询检查类别列表 */
  function getList() {
    loading.value = true;
    listConsultResult(queryParams.value).then(response => {
      if(response.rows&&response.rows.length>0){
        for(let i = 0; i < response.rows.length; i++) {
          response.rows[i].status = response.rows[i].status +""
        }
      }
      dataList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    });
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }
  
  /** 新增按钮操作 */
  function handleAdd() {
    dataList.value.unshift({ editStatus: true,status:'0',result:"" })
  }
  
  /** 修改按钮操作 */
  function handleUpdate(row) {
    row.editStatus = true
  }
  
  
  /** 删除按钮操作 */
  function handleDelete(row, index) {
    const _ids = row.id || ids.value;
    if (row.id == null) {
      console.log(index)
      processList.value.splice(index, 1)
      return
    }
    proxy.$modal.confirm('是否确认删除选中的数据项？').then(function () {
      return delConsultResult(_ids);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功！");
    }).catch(() => { });
  }
  
  function handleSave(row) {
    console.log(row)
    if(row.result == ""){
      return proxy.$modal.msgError("咨询结果不能为空！")
    }
    if (row.id == null) {
        addConsultResult(row).then(afterSave)
    } else {
        updateConsultResult(row).then(afterSave)
    }
  }
  
  function afterSave(res) {
    if (res.code === 200) {
      getList()
      proxy.$modal.msgSuccess("保存成功！")
    } else {
      getList()
      proxy.$modal.msgError("保存失败！")
    }
  }
  
  function handleCancel(row) {
    row.editStatus = false
    getList()
  }
  
  getList();
  </script>
  <style scoped>
  :deep(.el-tree-node__label) {
    font-size: 14px !important;
    display: inline-block;
    width: 100%;
  }
  
  :deep(.el-tree-node__content) {
    height: 40px;
    border-bottom: 1px solid #ebeef5;
    padding: 8px 0;
    line-height: 23px;
  }
  
  .move-handle {
    cursor: move;
    background-color: #eee;
  }
  </style>
  