<template>
  <div class="eventclear-page">
    <!-- 搜索 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="q" :inline="true" size="small">
        <el-form-item label="所在河湖">
          <el-select v-model="q.objectType" placeholder="全部" clearable style="width:130px" @change="getList">
            <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-select v-model="q.status" placeholder="全部" clearable style="width:110px" @change="getList">
            <el-option label="待处理" value="0" /><el-option label="处理中" value="1" /><el-option label="完成" value="2" /><el-option label="完结" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件类型">
          <el-select v-model="q.evType" placeholder="全部" clearable style="width:110px" @change="getList">
            <el-option label="乱占" value="1" /><el-option label="乱采" value="2" /><el-option label="乱堆" value="3" /><el-option label="乱建" value="4" /><el-option label="其他" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键词"><el-input v-model="q.keyWord" placeholder="河段名/描述" clearable style="width:160px" @keyup.enter="getList" /></el-form-item>
        <el-form-item><el-button type="primary" icon="Search" @click="getList">搜索</el-button></el-form-item>
        <el-form-item><el-button @click="resetQ">重置</el-button></el-form-item>
      </el-form>
    </el-card>

    <!-- 列表 -->
    <el-card shadow="never">
      <el-table :data="list" border size="small" v-loading="loading" @row-click="showDetail">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="objectName" label="河段名称" show-overflow-tooltip width="140" />
        <el-table-column prop="adName" label="所属地区" width="100" />
        <el-table-column label="事件类型" width="80">
          <template #default="{row}">{{ evTypeMap[row.evType] || row.evType }}</template>
        </el-table-column>
        <el-table-column prop="eventDesc" label="问题描述" show-overflow-tooltip min-width="200" />
        <el-table-column label="状态" width="80">
          <template #default="{row}">{{ statusMap[row.status] || row.status }}</template>
        </el-table-column>
        <el-table-column prop="dealDesc" label="整改情况" show-overflow-tooltip width="150" />
        <el-table-column prop="findTs" label="发现时间" width="120" />
        <el-table-column prop="userName" label="上报人" width="100" />
      </el-table>
      <pagination v-show="total>0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getList" />
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog v-model="dlg" :title="cur?.objectName || '事件详情'" width="900px" top="5vh">
      <div class="detail-grid" v-if="cur">
        <div class="detail-left">
          <table class="info-table">
            <tr><td class="lbl">河段名称</td><td>{{ cur.objectName }}</td></tr>
            <tr><td class="lbl">问题描述</td><td>{{ cur.eventDesc }}</td></tr>
            <tr><td class="lbl">当前情况</td><td>{{ cur.curs || '-' }}</td></tr>
            <tr><td class="lbl">整改情况</td><td>{{ cur.dealDesc || '-' }}</td></tr>
            <tr><td class="lbl">检查情况</td><td>{{ cur.checkQk || '-' }}</td></tr>
            <tr><td class="lbl">所属省份</td><td>{{ cur.adName }}</td><td class="lbl">事件类型</td><td>{{ evTypeMap[cur.evType] }}</td></tr>
            <tr><td class="lbl">发现日期</td><td>{{ cur.findTs }}</td><td class="lbl">完成日期</td><td>{{ cur.doneDate }}</td></tr>
            <tr><td class="lbl">经度</td><td>{{ cur.longitude }}</td><td class="lbl">纬度</td><td>{{ cur.latitude }}</td></tr>
          </table>
          <!-- 图片轮播 -->
          <div v-if="cur.images?.length" style="margin-top:12px">
            <el-carousel height="220px" indicator-position="outside">
              <el-carousel-item v-for="(img,i) in cur.images" :key="i">
                <img :src="img" style="width:100%;height:100%;object-fit:contain;cursor:pointer" @click="previewImg(img)" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="detail-right">
          <h4>检查记录</h4>
          <div v-if="cur.checks?.length">
            <div v-for="(c,i) in cur.checks" :key="i" class="check-item">
              <p><strong>检查人：</strong>{{ c.fPerson }} &nbsp; <strong>日期：</strong>{{ c.cDate }}</p>
              <p><strong>情况：</strong>{{ c.cState }}</p>
              <div v-if="c.files?.length" style="display:flex;gap:6px;flex-wrap:wrap">
                <img v-for="(f,j) in c.files" :key="j" :src="f" style="width:80px;height:60px;object-fit:cover;cursor:pointer" @click="previewImg(f)" />
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无检查记录" :image-size="40" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {listEventClear} from '@/api/hzz/eventclear'

const loading=ref(false),list=ref([]),total=ref(0),pageNum=ref(1),pageSize=ref(10)
const q=ref({objectType:'',status:'',evType:'',keyWord:''})
const dlg=ref(false),cur=ref(null)

const evTypeMap={1:'乱占',2:'乱采',3:'乱堆',4:'乱建',5:'其他'}
const statusMap={0:'待处理',1:'处理中',2:'完成',3:'完结'}

const getList=async()=>{
  loading.value=true
  try{const r=await listEventClear({...q.value,pageNum:pageNum.value,pageSize:pageSize.value});list.value=r.rows||[];total.value=r.total||0}
  finally{loading.value=false}
}
const resetQ=()=>{q.value={objectType:'',status:'',evType:'',keyWord:''};getList()}
const showDetail=(row)=>{
  cur.value={...row,images:row.images||[],checks:row.checks||[]}
  dlg.value=true
}
const previewImg=(url)=>{window.open(url)}
onMounted(()=>getList())
</script>

<style scoped>
.eventclear-page{padding:16px 20px;height:calc(100vh - 84px);overflow-y:auto;background:#f0f2f5}
.search-card{margin-bottom:12px;border-radius:8px}
.detail-grid{display:flex;gap:20px}
.detail-left{flex:6}
.detail-right{flex:4;border-left:1px solid #eee;padding-left:16px}
.detail-right h4{margin:0 0 10px;font-size:14px;color:#333}
.info-table{width:100%;border-collapse:collapse}
.info-table td{padding:6px 8px;border:1px solid #e8e8e8;font-size:13px}
.info-table .lbl{background:#f5f7fa;width:80px;text-align:right;color:#888}
.check-item{background:#fafbfc;padding:10px;border-radius:6px;margin-bottom:8px}
.check-item p{margin:4px 0;font-size:13px}
</style>
