<template>
  <div class="mcaf-page">
    <el-card shadow="never">
      <template #header>一湖两河清四乱 — 数据管理</template>
      <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-option label="其他" value="3"/>
          </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-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 type="success" icon="Plus" @click="addRow">新增</el-button></el-form-item>
      </el-form>

      <el-table :data="list" border size="small" v-loading="loading" @row-click="editRow">
        <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 prop="evType" label="事件类型" width="80" />
        <el-table-column prop="eventDesc" label="问题描述" show-overflow-tooltip min-width="200" />
        <el-table-column prop="status" label="状态" width="80" />
        <el-table-column prop="findTs" label="发现时间" width="120" />
        <el-table-column label="操作" width="140" fixed="right">
          <template #default="{row}">
            <el-button link type="primary" size="small" @click.stop="editRow(row)">编辑</el-button>
            <el-button link type="danger" size="small" @click.stop="delRow(row)">删除</el-button>
          </template>
        </el-table-column>
      </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="editDlg" :title="isNew?'新增事件':'编辑事件'" width="700px" top="5vh" @closed="resetForm">
      <el-form ref="fRef" :model="form" :rules="rules" label-width="100px" size="small">
        <el-row :gutter="16">
          <el-col :span="12"><el-form-item label="河段名称" prop="objectName"><el-input v-model="form.objectName"/></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="所属地区" prop="adName"><el-input v-model="form.adName"/></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="事件类型" prop="evType">
            <el-select v-model="form.evType" style="width:100%"><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-col>
          <el-col :span="12"><el-form-item label="状态" prop="status">
            <el-select v-model="form.status" style="width:100%"><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-col>
          <el-col :span="24"><el-form-item label="问题描述" prop="eventDesc"><el-input v-model="form.eventDesc" type="textarea" :rows="3"/></el-form-item></el-col>
          <el-col :span="24"><el-form-item label="整改情况" prop="dealDesc"><el-input v-model="form.dealDesc" type="textarea" :rows="2"/></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="发现时间"><el-date-picker v-model="form.findTs" type="date" value-format="YYYY-MM-DD" style="width:100%"/></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="完成时间"><el-date-picker v-model="form.doneDate" type="date" value-format="YYYY-MM-DD" style="width:100%"/></el-form-item></el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="editDlg=false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {listEventClear, searchEventClear} from '@/api/hzz/eventclear'
import {ElMessage,ElMessageBox} from 'element-plus'

const loading=ref(false),list=ref([]),total=ref(0),pageNum=ref(1),pageSize=ref(10)
const q=ref({objectType:'',status:'',keyWord:''})
const editDlg=ref(false),isNew=ref(false),fRef=ref(null)
const form=reactive({objectName:'',adName:'',evType:'1',status:'0',eventDesc:'',dealDesc:'',findTs:'',doneDate:''})
const rules={objectName:[{required:true,message:'必填'}],eventDesc:[{required:true,message:'必填'}]}

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 resetForm=()=>{Object.keys(form).forEach(k=>form[k]='');form.evType='1';form.status='0'}
const addRow=()=>{isNew.value=true;resetForm();editDlg.value=true}
const editRow=(row)=>{isNew.value=false;Object.assign(form,row);editDlg.value=true}
const delRow=async(row)=>{
  await ElMessageBox.confirm('确认删除？','提示',{type:'warning'})
  try{await searchEventClear({guid:row.guid},1,10);ElMessage.success('已删除');getList()}catch{ElMessage.error('删除失败')}
}
const submitForm=async()=>{
  await fRef.value?.validate()
  try{await searchEventClear({...form},1,10);ElMessage.success(isNew.value?'新增成功':'保存成功');editDlg.value=false;getList()}catch{ElMessage.error('操作失败')}
}
onMounted(()=>getList())
</script>

<style scoped>
.mcaf-page{padding:16px 20px;height:calc(100vh - 84px);overflow-y:auto;background:#f0f2f5}
</style>
