<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>重大隐患核实</span>
          <el-button plain icon="ArrowLeft" @click="goBack">返回</el-button>
        </div>
      </template>
      
      <!-- 隐患基本信息 -->
      <el-descriptions :column="2" border class="mb20">
        <el-descriptions-item label="隐患名称" :span="2">{{ hiddInfo.hiddName }}</el-descriptions-item>
        <el-descriptions-item label="隐患等级">
          <dict-tag :options="hidd_grad" :value="hiddInfo.hiddGrad" />
        </el-descriptions-item>
        <el-descriptions-item label="隐患状态">
          <dict-tag :options="hidd_stat" :value="hiddInfo.hiddStat" />
        </el-descriptions-item>
        <el-descriptions-item label="所属工程">{{ hiddInfo.engName }}</el-descriptions-item>
        <el-descriptions-item label="涉及部位">{{ hiddInfo.proPart }}</el-descriptions-item>
        <el-descriptions-item label="隐患描述" :span="2">{{ hiddInfo.otlcolQiffFnvu }}</el-descriptions-item>
      </el-descriptions>

      <!-- 核实记录列表 -->
      <el-table :data="veriList" border>
        <el-table-column label="核实单位" align="center" prop="veriOrgGuid" />
        <el-table-column label="核实日期" align="center" prop="veriDate" width="120" />
        <el-table-column label="核实人" align="center" prop="veriPers" />
        <el-table-column label="核实结果" align="center" prop="veriResu">
          <template #default="scope">
            <dict-tag :options="veri_resu" :value="scope.row.veriResu" />
          </template>
        </el-table-column>
        <el-table-column label="核实意见" align="center" prop="veriAdvi" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-tooltip content="查看" placement="top">
              <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 核实对话框 -->
    <el-dialog title="隐患核实" v-model="verifyOpen" width="600px" append-to-body>
      <el-form :model="verifyForm" :rules="verifyRules" ref="verifyRef" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="核实结果" prop="veriResu">
              <el-select v-model="verifyForm.veriResu" placeholder="请选择核实结果">
                <el-option v-for="dict in veri_resu" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="核实意见" prop="veriAdvi">
              <el-input v-model="verifyForm.veriAdvi" type="textarea" :rows="4" placeholder="请输入核实意见（500字以内）" maxlength="500" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitVerify">确 定</el-button>
          <el-button @click="verifyOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="HiddVerify">
import { getObjHidd } from "@/api/slaj/hidd"
import { listBisHiddMajVeri, addBisHiddMajVeri } from "@/api/slaj/hidd"

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const { hidd_grad, hidd_stat, veri_resu } = proxy.useDict("hidd_grad", "hidd_stat", "veri_resu")

const hiddInfo = ref({})
const veriList = ref([])
const verifyOpen = ref(false)
const verifyForm = ref({})
const verifyRules = {
  veriResu: [{ required: true, message: "核实结果不能为空", trigger: "change" }]
}

/** 获取隐患信息 */
function getHiddInfo() {
  const guid = route.query.guid
  if (guid) {
    getObjHidd(guid).then(response => {
      hiddInfo.value = response.data
      getVeriList()
    })
  }
}

/** 查询核实记录 */
function getVeriList() {
  listBisHiddMajVeri({ hiddGuid: hiddInfo.value.guid }).then(res => {
    veriList.value = res.rows
  })
}

/** 核实按钮 */
function handleVerify() {
  verifyForm.value = {
    hiddGuid: hiddInfo.value.guid,
    veriResu: undefined,
    veriAdvi: undefined
  }
  verifyOpen.value = true
}

/** 提交核实 */
function submitVerify() {
  proxy.$refs["verifyRef"].validate(valid => {
    if (valid) {
      addBisHiddMajVeri(verifyForm.value).then(response => {
        proxy.$modal.msgSuccess("核实成功")
        verifyOpen.value = false
        getVeriList()
      })
    }
  })
}

/** 查看详情 */
function handleView(row) {
  // 可以弹窗显示详情
  proxy.$modal.msgInfo("核实结果: " + (row.veriResu === '1' ? '重大' : '一般'))
}

/** 返回 */
function goBack() {
  router.push({ path: '/slaj/hidd/detail', query: { guid: hiddInfo.value.guid } })
}

onMounted(() => {
  getHiddInfo()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mb20 {
  margin-bottom: 20px;
}
</style>
