<template>
  <div ref="containerRef" class="app-container">
    <div v-if="!$auth.hasPermi('hazar:objhaz:supervise')" class="no-permission">
      <el-empty description="您没有访问该页面的权限，请联系管理员" />
    </div>
    <template v-else>
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="监管状态" prop="hazStat">
        <el-select v-model="queryParams.hazStat" placeholder="请选择" clearable style="width: 150px">
          <el-option v-for="dict in haz_stat" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="单位名称" prop="orgName">
        <el-input v-model="queryParams.orgName" placeholder="请输入" clearable style="width: 160px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="工程类型" prop="type">
        <el-input v-model="queryParams.type" placeholder="请输入" clearable style="width: 150px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="是否管控" prop="ifControl">
        <el-select v-model="queryParams.ifControl" placeholder="请选择" clearable style="width: 120px">
          <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="监管日期" prop="supTime">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="width: 250px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['hazar:supervise:export']">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="table-wrapper">
    <el-table :height="tableHeight" v-loading="loading" :data="hazList" border style="width:100%" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="单位名称" align="center" prop="orgName" min-width="140" :show-overflow-tooltip="true" />
      <el-table-column label="危险源名称" align="center" min-width="160" :show-overflow-tooltip="true">
        <template #default="scope">
          <el-button link type="primary" @click="handleDetail(scope.row)" v-hasPermi="['hazar:supervise:detail']">{{ scope.row.hazName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="所属工程" align="center" prop="engName" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center" width="100">
        <template #default="scope">
          <dict-tag :options="haz_stat" :value="scope.row.hazStat" />
        </template>
      </el-table-column>
      <el-table-column label="发现日期" align="center" prop="collTime" width="110" />
      <el-table-column label="监管日期" align="center" prop="supTime" width="110" />
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scope">
          <el-button v-if="scope.row.hazStat !== '2'" link type="primary" icon="Edit" @click="handleSupervise(scope.row)">监管</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <el-dialog title="重大危险源监管" v-model="superviseOpen" width="500px" append-to-body>
      <el-form :model="superviseForm" ref="superviseRef" label-width="120px">
        <el-form-item label="监管责任人" prop="supPers" :rules="[{ required: true, message: '请输入监管责任人', trigger: 'blur' }]">
          <el-input v-model="superviseForm.supPers" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="监管责任人电话" prop="offiTel" :rules="[{ required: true, message: '请输入监管责任人电话', trigger: 'blur' }]">
          <el-input v-model="superviseForm.offiTel" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="监管审批意见" prop="note" :rules="[{ required: true, message: '请输入监管审批意见', trigger: 'blur' }]">
          <el-input v-model="superviseForm.note" type="textarea" :rows="3" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitSupervise">保 存</el-button>
        <el-button @click="superviseOpen = false">取 消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="危险源详情" v-model="detailOpen" width="750px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="危险源编码">{{ detailRow.hazCode || '--' }}</el-descriptions-item>
        <el-descriptions-item label="危险源名称">{{ detailRow.hazName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="危险源等级">
          <dict-tag :options="haz_stat" :value="detailRow.hiddGrad" />
        </el-descriptions-item>
        <el-descriptions-item label="风险等级">
          <dict-tag :options="risk_grad" :value="detailRow.riskGrad" />
        </el-descriptions-item>
        <el-descriptions-item label="所属工程">{{ detailRow.engName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="单位名称">{{ detailRow.orgName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="涉及部位">{{ detailRow.proPart || '--' }}</el-descriptions-item>
        <el-descriptions-item label="危险源状态">
          <dict-tag :options="haz_stat" :value="detailRow.hazStat" />
        </el-descriptions-item>
        <el-descriptions-item label="是否管控">
          <dict-tag :options="sys_yes_no" :value="detailRow.ifControl" />
        </el-descriptions-item>
        <el-descriptions-item label="类型">{{ detailRow.type || '--' }}</el-descriptions-item>
        <el-descriptions-item label="发现日期">{{ detailRow.collTime || '--' }}</el-descriptions-item>
        <el-descriptions-item label="监管日期">{{ detailRow.supTime || '--' }}</el-descriptions-item>
        <el-descriptions-item label="监管单位">{{ detailRow.supOrg || '--' }}</el-descriptions-item>
        <el-descriptions-item label="监管责任人">{{ detailRow.supPers || '--' }}</el-descriptions-item>
        <el-descriptions-item label="责任人电话">{{ detailRow.offiTel || '--' }}</el-descriptions-item>
        <el-descriptions-item label="巡查人员">{{ detailRow.patPers || '--' }}</el-descriptions-item>
        <el-descriptions-item label="危害风险" :span="2">{{ detailRow.harmRisk || '--' }}</el-descriptions-item>
        <el-descriptions-item label="监测预警" :span="2">{{ detailRow.moniPrec || '--' }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailOpen = false">关 闭</el-button>
      </template>
    </el-dialog>
    </template>
  </div>
</template>

<script setup name="HazardSupervise">
import { listObjHaz, updateObjHaz } from "@/api/slaj/hazard"
import { useTableHeight } from '@/hooks/useTableHeight'

const { tableHeight, containerRef } = useTableHeight()
const { proxy } = getCurrentInstance()
const { haz_stat, sys_yes_no, risk_grad } = proxy.useDict("haz_stat", "sys_yes_no", "risk_grad")

const hazList = ref([]); const loading = ref(true); const total = ref(0)
const showSearch = ref(true)
const dateRange = ref([])
const superviseOpen = ref(false); const currentHaz = ref({}); const superviseForm = ref({})
const detailOpen = ref(false); const detailRow = ref({})

const queryParams = reactive({
  pageNum: 1, pageSize: 10,
  hazStat: undefined, orgName: undefined, type: undefined, ifControl: undefined,
  hiddGrad: '2'
})

function getList() {
  loading.value = true
  const params = { ...queryParams }
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginSupTime = dateRange.value[0]
    params.endSupTime = dateRange.value[1]
  }
  listObjHaz(params).then(res => {
    hazList.value = res.rows || []
    total.value = res.total || 0
    loading.value = false
  }).catch(() => { loading.value = false })
}

function handleQuery() { queryParams.pageNum = 1; getList() }
function resetQuery() { dateRange.value = []; proxy.resetForm("queryRef"); handleQuery() }
function handleExport() {
  const params = { ...queryParams }
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginSupTime = dateRange.value[0]
    params.endSupTime = dateRange.value[1]
  }
  proxy.download("hazard/objhaz/export", params, `重大危险源监管_${new Date().getTime()}.xlsx`)
}

function handleDetail(row) {
  detailRow.value = row
  detailOpen.value = true
}

function handleSupervise(row) {
  currentHaz.value = row
  superviseForm.value = {
    supPers: row.supPers || '',
    offiTel: row.offiTel || '',
    note: row.note || ''
  }
  superviseOpen.value = true
}

function submitSupervise() {
  proxy.$refs["superviseRef"].validate(valid => {
    if (!valid) return
    updateObjHaz({
      guid: currentHaz.value.guid,
      supPers: superviseForm.value.supPers,
      offiTel: superviseForm.value.offiTel,
      note: superviseForm.value.note,
      hazStat: '2'
    }).then(() => {
      proxy.$modal.msgSuccess("保存成功")
      superviseOpen.value = false
      getList()
    })
  })
}

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