<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
      <el-tab-pane v-if="hasAcciTabPermi('fast')" label="事故（事件）快报" name="fast">
        <el-form :model="queryParams1" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="事故等级" prop="acciGrad">
            <el-select v-model="queryParams1.acciGrad" placeholder="请选择" clearable style="width: 150px">
              <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间" prop="occuTime">
            <el-date-picker v-model="dateRange1" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="width: 240px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery1">搜索</el-button>
          </el-form-item>
          <el-form-item style="margin-left:auto;">
            <el-button type="primary" plain icon="Plus" @click="handleAdd1" v-hasPermi="['acci:fast:add']">新建</el-button>
            <el-button type="warning" plain icon="Download" @click="handleExport1">导出</el-button>
            <el-button type="danger" plain icon="Delete" :disabled="multiple1" @click="handleDelete1" v-hasPermi="['acci:fast:remove']">删除</el-button>
          </el-form-item>
        </el-form>
        <div class="table-wrapper">
        <el-table :height="tableHeight" :data="list1" @selection-change="handleSelect1" border style="width:100%" :header-cell-style="{ 'text-align':'center' }">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" type="index" width="60" />
          <el-table-column label="事故单位名称" align="center" prop="sgdwName" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column label="事故工程名称" align="center" prop="engName" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column label="事故标段名称" align="center" prop="tendName" min-width="130" :show-overflow-tooltip="true" />
          <el-table-column label="事故单位类型" align="center" width="100">
            <template #default="scope">{{ scope.row.acciWiunType === '1' ? '直属' : scope.row.acciWiunType === '2' ? '下级' : scope.row.acciWiunType === '3' ? '流域' : '' }}</template>
          </el-table-column>
          <el-table-column label="事故类型" align="center" prop="acciCate" width="90" />
          <el-table-column label="发生时间" align="center" prop="occuTime" width="100" />
          <el-table-column label="重伤人数" align="center" prop="serInjNum" width="80" />
          <el-table-column label="死亡人数" align="center" prop="casNum" width="80" />
          <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" width="130" />
          <el-table-column label="事故等级" align="center" width="90">
            <template #default="scope">
              <dict-tag :options="acci_grad" :value="scope.row.acciGrad" />
            </template>
          </el-table-column>
          <el-table-column label="是否责任事故" align="center" width="100" prop="ifDuty" />
          <el-table-column label="是否已电话上报" align="center" width="110" prop="ifPhone" />
          <el-table-column label="操作" align="center" width="200" fixed="right">
            <template #default="scope">
              <el-button link type="info" @click="handleFast(scope.row)" v-hasPermi="['acci:fast:report']">快报</el-button>
              <el-button link type="warning" @click="handleSupplement(scope.row)" v-hasPermi="['acci:fast:edit']">补报</el-button>
              <el-button link type="primary" icon="Edit" @click="handleUpdate1(scope.row)" v-hasPermi="['acci:fast:edit']" />
              <el-button link type="danger" icon="Delete" @click="handleDelete1(scope.row)" v-hasPermi="['acci:fast:remove']" />
            </template>
          </el-table-column>
        </el-table>
        </div>
        <pagination :total="total1" v-model:page="queryParams1.pageNum" v-model:limit="queryParams1.pageSize" @pagination="getList1" />
      </el-tab-pane>

      <el-tab-pane v-if="hasAcciTabPermi('month')" label="事故月报" name="month">
        <el-form :model="queryParams2" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="事故等级" prop="acciGrad">
            <el-select v-model="queryParams2.acciGrad" placeholder="请选择" clearable style="width: 150px">
              <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间" prop="occuTime">
            <el-date-picker v-model="dateRange2" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="width: 240px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery2">搜索</el-button>
            <el-button :type="queryParams2.ifDuty ? 'danger' : ''" @click="filterDuty">{{ queryParams2.ifDuty ? '显示全部' : '剔除非责任事故' }}</el-button>
          </el-form-item>
          <el-form-item style="margin-left:auto;">
            <el-button type="primary" plain icon="Plus" @click="handleAdd2" v-hasPermi="['acci:month:add']">新建</el-button>
            <el-button type="warning" plain icon="Download" @click="handleExport2">导出</el-button>
            <el-button type="danger" plain icon="Delete" :disabled="multiple2" @click="handleDelete2" v-hasPermi="['acci:month:remove']">删除</el-button>
          </el-form-item>
        </el-form>
        <div class="table-wrapper">
        <el-table :height="tableHeight" :data="list2" @selection-change="handleSelect2" border style="width:100%" :header-cell-style="{ 'text-align':'center' }">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" type="index" width="60" />
          <el-table-column label="事故单位名称" align="center" prop="sgdwName" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column label="事故工程名称" align="center" prop="engName" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column label="事故单位类型" align="center" width="100">
            <template #default="scope">{{ scope.row.acciWiunType === '1' ? '直属' : scope.row.acciWiunType === '2' ? '下级' : scope.row.acciWiunType === '3' ? '流域' : '' }}</template>
          </el-table-column>
          <el-table-column label="事故类型" align="center" prop="acciCate" width="90" />
          <el-table-column label="发生时间" align="center" prop="occuTime" width="100" />
          <el-table-column label="重伤人数" align="center" prop="serInjNum" width="80" />
          <el-table-column label="死亡人数" align="center" prop="casNum" width="80" />
          <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" width="130" />
          <el-table-column label="事故等级" align="center" width="90">
            <template #default="scope">
              <dict-tag :options="acci_grad" :value="scope.row.acciGrad" />
            </template>
          </el-table-column>
          <el-table-column label="是否责任事故" align="center" width="100" prop="ifDuty" />
          <el-table-column label="是否已电话上报" align="center" width="110" prop="ifPhone" />
          <el-table-column label="操作" align="center" width="180" fixed="right">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate2(scope.row)" v-hasPermi="['acci:month:edit']" />
              <el-button link type="warning" @click="handleSupplement(scope.row)" v-hasPermi="['acci:month:supplement']">补报</el-button>
              <el-button link type="danger" icon="Delete" @click="handleDelete2(scope.row)" v-hasPermi="['acci:month:remove']" />
            </template>
          </el-table-column>
        </el-table>
        </div>
        <pagination :total="total2" v-model:page="queryParams2.pageNum" v-model:limit="queryParams2.pageSize" @pagination="getList2" />
      </el-tab-pane>

      <el-tab-pane v-if="hasAcciTabPermi('subFast')" label="下级单位快报事故（事件）查询" name="subFast">
        <el-form :model="queryParams3" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="选择下级单位" prop="orgName">
            <el-input v-model="queryParams3.orgName" placeholder="请输入单位名称" clearable style="width: 200px" @keyup.enter="handleQuery3" />
          </el-form-item>
          <el-form-item label="事故等级" prop="acciGrad">
            <el-select v-model="queryParams3.acciGrad" placeholder="请选择" clearable style="width: 150px">
              <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间" prop="occuTime">
            <el-date-picker v-model="dateRange3" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="width: 240px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery3">搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="table-wrapper">
        <el-table :height="tableHeight" :data="list3" 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" width="100">
            <template #default="scope">{{ scope.row.acciWiunType === '1' ? '直属' : scope.row.acciWiunType === '2' ? '下级' : scope.row.acciWiunType === '3' ? '流域' : '' }}</template>
          </el-table-column>
          <el-table-column label="事故类型" align="center" prop="acciCate" width="90" />
          <el-table-column label="发生时间" align="center" prop="occuTime" width="100" />
          <el-table-column label="重伤人数" align="center" prop="serInjNum" width="80" />
          <el-table-column label="死亡人数" align="center" prop="casNum" width="80" />
          <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" min-width="130" />
          <el-table-column label="事故简要情况" align="center" prop="otlcolGuuiVicm" min-width="150" :show-overflow-tooltip="true" />
          <el-table-column label="是否责任事故" align="center" width="100" prop="ifDuty" />
          <el-table-column label="是否已电话上报" align="center" width="110" prop="ifPhone" />
        </el-table>
        </div>
        <pagination :total="total3" v-model:page="queryParams3.pageNum" v-model:limit="queryParams3.pageSize" @pagination="getList3" />
      </el-tab-pane>

      <el-tab-pane v-if="hasAcciTabPermi('subMonth')" label="下级单位事故月报查询" name="subMonth">
        <el-form :model="queryParams4" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="选择下级单位" prop="orgName">
            <el-input v-model="queryParams4.orgName" placeholder="请输入单位名称" clearable style="width: 200px" @keyup.enter="handleQuery4" />
          </el-form-item>
          <el-form-item label="事故等级" prop="acciGrad">
            <el-select v-model="queryParams4.acciGrad" placeholder="请选择" clearable style="width: 150px">
              <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间" prop="occuTime">
            <el-date-picker v-model="dateRange4" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="width: 240px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery4">搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="table-wrapper">
        <el-table :height="tableHeight" :data="list4" 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" width="100">
            <template #default="scope">{{ scope.row.acciWiunType === '1' ? '直属' : scope.row.acciWiunType === '2' ? '下级' : scope.row.acciWiunType === '3' ? '流域' : '' }}</template>
          </el-table-column>
          <el-table-column label="事故类型" align="center" prop="acciCate" width="90" />
          <el-table-column label="发生时间" align="center" prop="occuTime" width="100" />
          <el-table-column label="重伤人数" align="center" prop="serInjNum" width="80" />
          <el-table-column label="死亡人数" align="center" prop="casNum" width="80" />
          <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" min-width="130" />
          <el-table-column label="事故简要情况" align="center" prop="otlcolGuuiVicm" min-width="150" :show-overflow-tooltip="true" />
          <el-table-column label="是否责任事故" align="center" width="100" prop="ifDuty" />
          <el-table-column label="是否已电话上报" align="center" width="110" prop="ifPhone" />
        </el-table>
        </div>
        <pagination :total="total4" v-model:page="queryParams4.pageNum" v-model:limit="queryParams4.pageSize" @pagination="getList4" />
      </el-tab-pane>

      <el-tab-pane v-if="hasAcciTabPermi('consMonth')" label="施工单位事故月报查询" name="consMonth">
        <el-form :model="queryParams5" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="选择参建单位" prop="orgName">
            <el-input v-model="queryParams5.orgName" placeholder="请输入" clearable style="width: 180px" @keyup.enter="handleQuery5" />
          </el-form-item>
          <el-form-item label="事故等级" prop="acciGrad">
            <el-select v-model="queryParams5.acciGrad" placeholder="请选择" clearable style="width: 150px">
              <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间">
            <el-date-picker v-model="dateRange5" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="width: 240px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery5">搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="table-wrapper">
        <el-table :height="tableHeight" :data="list5" 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" width="100">
            <template #default="scope">{{ scope.row.acciWiunType === '1' ? '直属' : scope.row.acciWiunType === '2' ? '下级' : scope.row.acciWiunType === '3' ? '流域' : '' }}</template>
          </el-table-column>
          <el-table-column label="事故类型" align="center" prop="acciCate" width="90" />
          <el-table-column label="发生时间" align="center" prop="occuTime" width="100" />
          <el-table-column label="重伤人数" align="center" prop="serInjNum" width="80" />
          <el-table-column label="死亡人数" align="center" prop="casNum" width="80" />
          <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" min-width="130" />
          <el-table-column label="事故原因" align="center" prop="acciCause" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column label="事故简要情况" align="center" prop="otlcolGuuiVicm" min-width="150" :show-overflow-tooltip="true" />
          <el-table-column label="是否责任事故" align="center" width="100" prop="ifDuty" />
          <el-table-column label="是否已电话上报" align="center" width="110" prop="ifPhone" />
        </el-table>
        </div>
        <pagination :total="total5" v-model:page="queryParams5.pageNum" v-model:limit="queryParams5.pageSize" @pagination="getList5" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="formTitle" v-model="formOpen" width="850px" append-to-body>
      <el-form :model="form" ref="formRef" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称" prop="sgdwName" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.sgdwName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故单位类型" prop="acciWiunType" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="form.acciWiunType" placeholder="请选择" style="width:100%">
                <el-option label="直属单位" value="1" />
                <el-option label="下级水行政" value="2" />
                <el-option label="流域机构" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="事故工程名称" prop="engName" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.engName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故类型" prop="acciCate" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.acciCate" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发生时间" prop="occuTime" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-date-picker v-model="form.occuTime" type="datetime" placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故等级" prop="acciGrad" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="form.acciGrad" placeholder="请选择" style="width:100%">
                <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="重伤人数" prop="serInjNum" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.serInjNum" placeholder="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="死亡人数" prop="casNum" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.casNum" placeholder="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经济损失(万元)" prop="econLoss" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.econLoss" placeholder="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故简要情况" prop="otlcolGuuiVicm" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.otlcolGuuiVicm" type="textarea" :rows="2" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否责任事故" prop="ifDuty" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="form.ifDuty" placeholder="请选择" style="width:100%">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否已电话上报" prop="ifPhone" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="form.ifPhone" placeholder="请选择" style="width:100%">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm" :loading="formLoading">保 存</el-button>
        <el-button @click="formOpen = false">取 消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="事故（事件）快报补报记录" v-model="suppOpen" width="900px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-button type="primary" plain icon="Plus" @click="handleSuppAdd" v-hasPermi="['acci:fast:edit']">新建</el-button>
        <el-button type="danger" plain icon="Delete" :disabled="suppMultiple" @click="handleSuppDelete()" v-hasPermi="['acci:fast:remove']">删除</el-button>
      </el-row>
      <el-table :data="suppList" @selection-change="handleSuppSelect" border size="small" height="300">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="补报时间" align="center" prop="repTime" width="120" />
        <el-table-column label="重伤人数" align="center" prop="serInjNum" width="80" />
        <el-table-column label="死亡人数" align="center" prop="casNum" width="80" />
        <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" width="140" />
        <el-table-column label="事故描述" align="center" prop="acciDesc" min-width="160" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleSuppUpdate(scope.row)" v-hasPermi="['acci:fast:edit']" />
            <el-button link type="danger" icon="Delete" @click="handleSuppDelete(scope.row)" v-hasPermi="['acci:fast:remove']" />
          </template>
        </el-table-column>
      </el-table>

      <pagination :total="suppTotal" v-model:page="suppQuery.pageNum" v-model:limit="suppQuery.pageSize" @pagination="loadSuppList" layout="total, prev, pager, next" />

      <el-dialog title="补报记录" v-model="suppFormOpen" width="500px" append-to-body>
        <el-form :model="suppForm" ref="suppFormRef" label-width="120px">
          <el-form-item label="补报时间" prop="repTime" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
            <el-date-picker v-model="suppForm.repTime" type="datetime" placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
          </el-form-item>
          <el-form-item label="重伤人数" prop="serInjNum">
            <el-input v-model="suppForm.serInjNum" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="死亡人数" prop="casNum">
            <el-input v-model="suppForm.casNum" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="经济损失(万元)" prop="econLoss">
            <el-input v-model="suppForm.econLoss" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="事故描述" prop="acciDesc">
            <el-input v-model="suppForm.acciDesc" type="textarea" :rows="3" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="submitSuppForm">保 存</el-button>
          <el-button @click="suppFormOpen = false">取 消</el-button>
        </template>
      </el-dialog>
    </el-dialog>

    <el-dialog :title="monthFormTitle" v-model="monthFormOpen" width="900px" append-to-body>
      <el-form :model="monthForm" ref="monthFormRef" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称" prop="sgdwName" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="monthForm.sgdwName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故单位类型" prop="acciWiunType" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="monthForm.acciWiunType" placeholder="请选择" style="width:100%">
                <el-option label="直属单位" value="1" />
                <el-option label="下级水行政" value="2" />
                <el-option label="流域机构" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="事故工程名称" prop="engName" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="monthForm.engName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故类型" prop="acciCate" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="monthForm.acciCate" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发生时间" prop="occuTime" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-date-picker v-model="monthForm.occuTime" type="datetime" placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故等级" prop="acciGrad" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="monthForm.acciGrad" placeholder="请选择" style="width:100%">
                <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="重伤人数" prop="serInjNum" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="monthForm.serInjNum" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="死亡人数" prop="casNum" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="monthForm.casNum" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经济损失(万元)" prop="econLoss" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="monthForm.econLoss" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故简要情况" prop="otlcolGuuiVicm" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="monthForm.otlcolGuuiVicm" type="textarea" :rows="2" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否责任事故" prop="ifDuty" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="monthForm.ifDuty" placeholder="请选择" style="width:100%">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否已电话上报" prop="ifPhone" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="monthForm.ifPhone" placeholder="请选择" style="width:100%">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin-top:16px; border-top:1px solid #e4e7ed; padding-top:12px;">
        <div style="font-weight:bold; margin-bottom:8px;">事故调查报告附件</div>
        <el-upload ref="monthUploadRef" :action="uploadUrl" :headers="uploadHeaders" :on-success="handleMonthUploadSuccess" :file-list="monthFileList" multiple :limit="10" list-type="text" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip,.rar">
          <el-button type="primary" size="small">选择文件</el-button>
          <span style="color:#909399;font-size:12px;margin-left:8px;">支持图片/文档/压缩包，单文件不超过10MB</span>
        </el-upload>
      </div>
      <div style="margin-top:16px; border-top:1px solid #e4e7ed; padding-top:12px;">
        <div style="font-weight:bold; margin-bottom:8px;">事故调查进展情况</div>
        <el-button size="small" type="primary" icon="Plus" @click="addMonthProgRow" class="mb8">添加</el-button>
        <el-table :data="monthProgList" border size="small">
          <el-table-column label="调查时间" align="center" width="160">
            <template #default="scope">
              <el-date-picker v-model="scope.row.repTime" type="date" value-format="YYYY-MM-DD" placeholder="选择" size="small" style="width:100%" />
            </template>
          </el-table-column>
          <el-table-column label="重伤人数" align="center" width="90">
            <template #default="scope"><el-input v-model="scope.row.serInjNum" size="small" /></template>
          </el-table-column>
          <el-table-column label="死亡人数" align="center" width="90">
            <template #default="scope"><el-input v-model="scope.row.casNum" size="small" /></template>
          </el-table-column>
          <el-table-column label="经济损失(万元)" align="center" width="120">
            <template #default="scope"><el-input v-model="scope.row.econLoss" size="small" /></template>
          </el-table-column>
          <el-table-column label="事故描述" align="center" min-width="160">
            <template #default="scope"><el-input v-model="scope.row.acciDesc" size="small" /></template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="60">
            <template #default="scope">
              <el-button link type="danger" icon="Delete" @click="monthProgList.splice($index, 1)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button type="primary" @click="submitMonthForm">保 存</el-button>
        <el-button @click="monthFormOpen = false">取 消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="事故月报补报记录" v-model="suppMonthOpen" width="950px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-button type="primary" plain icon="Plus" @click="handleSuppMonthAdd" v-hasPermi="['acci:month:supplement']">新建</el-button>
        <el-button type="danger" plain icon="Delete" :disabled="suppMonthMultiple" @click="handleSuppMonthDelete()" v-hasPermi="['acci:month:remove']">删除</el-button>
      </el-row>
      <el-table :data="suppMonthList" @selection-change="handleSuppMonthSelect" border size="small" height="300">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="补报时间" align="center" prop="repTime" width="120" />
        <el-table-column label="重伤人数" align="center" prop="serInjNum" width="80" />
        <el-table-column label="死亡人数" align="center" prop="casNum" width="80" />
        <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" width="140" />
        <el-table-column label="事故描述" align="center" prop="acciDesc" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="80">
          <template #default="scope">
            <el-button link type="danger" icon="Delete" @click="handleSuppMonthDelete(scope.row)" v-hasPermi="['acci:month:remove']" />
          </template>
        </el-table-column>
      </el-table>

      <pagination :total="suppMonthTotal" v-model:page="suppMonthQuery.pageNum" v-model:limit="suppMonthQuery.pageSize" @pagination="loadSuppMonthList" layout="total, prev, pager, next" />

      <el-dialog title="补报记录" v-model="suppMonthFormOpen" width="500px" append-to-body>
        <el-form :model="suppMonthForm" ref="suppMonthFormRef" label-width="120px">
          <el-form-item label="补报时间" prop="repTime" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
            <el-date-picker v-model="suppMonthForm.repTime" type="datetime" placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
          </el-form-item>
          <el-form-item label="重伤人数" prop="serInjNum">
            <el-input v-model="suppMonthForm.serInjNum" />
          </el-form-item>
          <el-form-item label="死亡人数" prop="casNum">
            <el-input v-model="suppMonthForm.casNum" />
          </el-form-item>
          <el-form-item label="经济损失(万元)" prop="econLoss">
            <el-input v-model="suppMonthForm.econLoss" />
          </el-form-item>
          <el-form-item label="事故描述" prop="acciDesc">
            <el-input v-model="suppMonthForm.acciDesc" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="submitSuppMonthForm">保 存</el-button>
          <el-button @click="suppMonthFormOpen = false">取 消</el-button>
        </template>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script setup name="AcciManage">
import { listObjAcci, compoundSaveAcci, delObjAcci, fastReportAcci } from "@/api/slaj/acci"
import { listBisAcciExpRep, addBisAcciExpRep, updateBisAcciExpRep, delBisAcciExpRep } from "@/api/slaj/acci"
import { getToken } from "@/utils/auth"

const { proxy } = getCurrentInstance()
const { acci_grad } = proxy.useDict("acci_grad")

const tabPermiMap = {
  fast: 'acci:tab:fast',
  month: 'acci:tab:month',
  subFast: 'acci:tab:subFast',
  subMonth: 'acci:tab:subMonth',
  consMonth: 'acci:tab:consMonth'
}
function hasAcciTabPermi(name) {
  const permi = tabPermiMap[name]
  if (!permi) return true
  return proxy.$auth.hasPermi(permi)
}
const activeTab = ref(Object.keys(tabPermiMap).find(k => hasAcciTabPermi(k)) || 'fast')
const showSearch = ref(true)
const tableHeight = 'calc(100vh - 240px)'

const list1 = ref([]); const total1 = ref(0); const ids1 = ref([]); const multiple1 = ref(true); const dateRange1 = ref([])
const formOpen = ref(false); const formTitle = ref(''); const formLoading = ref(false)
const form = ref({}); const formRef = ref(null)

const suppOpen = ref(false); const suppAcciGuid = ref('')
const suppList = ref([]); const suppIds = ref([]); const suppMultiple = ref(true)
const suppTotal = ref(0); const suppQuery = reactive({ pageNum: 1, pageSize: 10 })
const suppFormOpen = ref(false); const suppForm = ref({}); const suppFormRef = ref(null)

const monthFormOpen = ref(false); const monthFormTitle = ref(''); const monthForm = ref({}); const monthFormRef = ref(null)
const monthProgList = ref([]); const monthFileList = ref([]); const monthFormTab = ref('basic')

const suppMonthOpen = ref(false); const suppMonthAcciGuid = ref('')
const suppMonthList = ref([]); const suppMonthIds = ref([]); const suppMonthMultiple = ref(true)
const suppMonthTotal = ref(0); const suppMonthQuery = reactive({ pageNum: 1, pageSize: 10 })
const suppMonthFormOpen = ref(false); const suppMonthForm = ref({}); const suppMonthFormRef = ref(null)

const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/common/upload'
const uploadHeaders = { Authorization: 'Bearer ' + getToken() }
const list2 = ref([]); const total2 = ref(0)
const list3 = ref([]); const total3 = ref(0)
const list4 = ref([]); const total4 = ref(0)
const list5 = ref([]); const total5 = ref(0)

const queryParams1 = reactive({ pageNum: 1, pageSize: 10, acciGrad: undefined })
const dateRange2 = ref([])

const queryParams2 = reactive({ pageNum: 1, pageSize: 10, acciGrad: undefined, ifDuty: undefined })
const dateRange3 = ref([])

const queryParams3 = reactive({ pageNum: 1, pageSize: 10, orgName: undefined, acciGrad: undefined })
const dateRange4 = ref([])

const queryParams4 = reactive({ pageNum: 1, pageSize: 10, orgName: undefined, acciGrad: undefined })
const dateRange5 = ref([])
const queryParams5 = reactive({ pageNum: 1, pageSize: 10, orgName: undefined, acciGrad: undefined })

function getList1() {
  const p = { ...queryParams1 }
  if (dateRange1.value && dateRange1.value.length === 2) { p.beginTime = dateRange1.value[0]; p.endTime = dateRange1.value[1] }
  listObjAcci(p).then(res => { list1.value = res.rows || []; total1.value = res.total || 0 })
}
function handleQuery1() { queryParams1.pageNum = 1; getList1() }
function handleSelect1(s) { ids1.value = s.map(i => i.guid); multiple1.value = !s.length }
function handleExport1() { proxy.download("acci/objacci/export", queryParams1, `事故快报_${Date.now()}.xlsx`) }
function handleAdd1() {
  formTitle.value = '事故（事件）快报新增'
  form.value = { sgdwName: '', engName: '', acciWiunType: '', acciCate: '', occuTime: '', serInjNum: '', casNum: '', econLoss: '', acciGrad: '', otlcolGuuiVicm: '', ifDuty: '', ifPhone: '' }
  formOpen.value = true
}
function handleUpdate1(row) {
  const data = row || (ids1.value.length ? list1.value.find(d => d.guid === ids1.value[0]) : null)
  if (!data) { proxy.$modal.msgWarning('请先选择一条数据'); return }
  formTitle.value = '事故（事件）快报修改'
  form.value = { ...data }
  formOpen.value = true
}
function submitForm() {
  formRef.value.validate(valid => {
    if (!valid) return
    formLoading.value = true
    compoundSaveAcci(form.value).then(() => {
      proxy.$modal.msgSuccess(form.value.guid ? '修改成功' : '保存成功')
      formOpen.value = false; formLoading.value = false
      if (activeTab.value === 'month') getList2()
      else getList1()
    }).catch(() => { formLoading.value = false })
  })
}
function handleDelete1(row) {
  const guids = row ? [row.guid] : ids1.value
  if (!guids.length) { proxy.$modal.msgWarning('请先选择一条数据'); return }
  proxy.$modal.confirm('是否确认删除？').then(() => {
    delObjAcci(guids.join(',')).then(() => { getList1(); proxy.$modal.msgSuccess('删除成功') })
  }).catch(() => {})
}
function handleFast(row) {
  proxy.$modal.confirm('是否要快报当前事故？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
    fastReportAcci(row.guid).then(() => {
      proxy.$modal.msgSuccess('快报成功，已生成事故月报记录')
    })
  }).catch(() => {})
}
function handleSupplement(row) {
  suppAcciGuid.value = row.guid
  if (activeTab.value === 'month') {
    suppMonthAcciGuid.value = row.guid; suppMonthOpen.value = true; loadSuppMonthList()
  } else {
    suppOpen.value = true; loadSuppList()
  }
}
function loadSuppMonthList() {
  listBisAcciExpRep({ acciGuid: suppMonthAcciGuid.value, pageNum: suppMonthQuery.pageNum, pageSize: suppMonthQuery.pageSize }).then(res => {
    suppMonthList.value = res.rows || []; suppMonthTotal.value = res.total || 0
  })
}
function handleSuppMonthSelect(s) { suppMonthIds.value = s.map(i => i.guid); suppMonthMultiple.value = !s.length }
function handleSuppMonthAdd() {
  suppMonthForm.value = { repTime: '', serInjNum: '', casNum: '', econLoss: '', acciDesc: '' }
  suppMonthFormOpen.value = true
}
function handleSuppMonthDelete(row) {
  const guids = row ? [row.guid] : suppMonthIds.value
  if (!guids.length) { proxy.$modal.msgWarning('请先选择数据'); return }
  proxy.$modal.confirm('是否确认删除？').then(() => {
    delBisAcciExpRep(guids.join(',')).then(() => { loadSuppMonthList(); proxy.$modal.msgSuccess('删除成功') })
  }).catch(() => {})
}
function submitSuppMonthForm() {
  suppMonthFormRef.value.validate(valid => {
    if (!valid) return
    addBisAcciExpRep({ ...suppMonthForm.value, acciGuid: suppMonthAcciGuid.value }).then(() => {
      proxy.$modal.msgSuccess('保存成功')
      suppMonthFormOpen.value = false
      loadSuppMonthList()
    })
  })
}
function loadSuppList() {
  listBisAcciExpRep({ acciGuid: suppAcciGuid.value, pageNum: suppQuery.pageNum, pageSize: suppQuery.pageSize }).then(res => {
    suppList.value = res.rows || []; suppTotal.value = res.total || 0
  })
}
function handleSuppSelect(s) { suppIds.value = s.map(i => i.guid); suppMultiple.value = !s.length }
function handleSuppAdd() {
  suppForm.value = { repTime: '', serInjNum: '', casNum: '', econLoss: '', acciDesc: '' }
  suppFormOpen.value = true
}
function handleSuppUpdate(row) {
  suppForm.value = { ...row }
  suppFormOpen.value = true
}
function handleSuppDelete(row) {
  const guids = row ? [row.guid] : suppIds.value
  if (!guids.length) { proxy.$modal.msgWarning('请先选择数据'); return }
  proxy.$modal.confirm('是否确认删除？').then(() => {
    delBisAcciExpRep(guids.join(',')).then(() => { loadSuppList(); proxy.$modal.msgSuccess('删除成功') })
  }).catch(() => {})
}
function submitSuppForm() {
  suppFormRef.value.validate(valid => {
    if (!valid) return
    const api = suppForm.value.guid ? updateBisAcciExpRep : addBisAcciExpRep
    const extra = { serInjNum: suppForm.value.serInjNum, casNum: suppForm.value.casNum, econLoss: suppForm.value.econLoss, acciDesc: suppForm.value.acciDesc }
    const note = suppForm.value.note ? suppForm.value.note + ' | ' + JSON.stringify(extra) : JSON.stringify(extra)
    api({ guid: suppForm.value.guid, repTime: suppForm.value.repTime, note: note, acciGuid: suppAcciGuid.value }).then(() => {
      proxy.$modal.msgSuccess('保存成功')
      suppFormOpen.value = false
      loadSuppList()
    })
  })
}
function getList2() {
  const p = { ...queryParams2 }
  if (dateRange2.value && dateRange2.value.length === 2) { p.beginTime = dateRange2.value[0]; p.endTime = dateRange2.value[1] }
  listObjAcci(p).then(res => { list2.value = res.rows || []; total2.value = res.total || 0 })
}
function handleQuery2() { queryParams2.pageNum = 1; getList2() }
function handleSelect2(s) { ids2.value = s.map(i => i.guid); multiple2.value = !s.length }
function handleExport2() { proxy.download("acci/objacci/export", queryParams2, `事故月报_${Date.now()}.xlsx`) }
function handleAdd2() {
  monthFormTitle.value = '事故月报新增'
  monthForm.value = { sgdwName: '', engName: '', acciWiunType: '', acciCate: '', occuTime: '', serInjNum: '', casNum: '', econLoss: '', acciGrad: '', otlcolGuuiVicm: '', ifDuty: '', ifPhone: '' }
  monthProgList.value = []; monthFileList.value = []; monthFormTab.value = 'basic'
  monthFormOpen.value = true
}
function handleUpdate2(row) {
  const data = row || (ids2.value.length ? list2.value.find(d => d.guid === ids2.value[0]) : null)
  if (!data) { proxy.$modal.msgWarning('请先选择一条数据'); return }
  monthFormTitle.value = '事故月报修改'
  monthForm.value = { ...data }
  monthProgList.value = []; monthFileList.value = []
  monthFormOpen.value = true
}
function addMonthProgRow() { monthProgList.value.push({ repTime: '', serInjNum: '', casNum: '', econLoss: '', acciDesc: '' }) }
function handleMonthUploadSuccess(response, file, fileList) { monthFileList.value = fileList }
function submitMonthForm() {
  monthFormRef.value.validate(valid => {
    if (!valid) return
    compoundSaveAcci({ ...monthForm.value, progList: monthProgList.value, fileList: monthFileList.value.map(f => ({ name: f.name, url: f.url || f.response?.url })) }).then(() => {
      proxy.$modal.msgSuccess(monthForm.value.guid ? '修改成功' : '保存成功')
      monthFormOpen.value = false; getList2()
    })
  })
}
function handleDelete2(row) {
  const guids = row ? [row.guid] : ids2.value
  if (!guids.length) { proxy.$modal.msgWarning('请先选择一条数据'); return }
  proxy.$modal.confirm('是否确认删除？').then(() => {
    delObjAcci(guids.join(',')).then(() => { getList2(); proxy.$modal.msgSuccess('删除成功') })
  }).catch(() => {})
}
function filterDuty() {
  queryParams2.ifDuty = queryParams2.ifDuty === '1' ? undefined : '1'
  getList2()
}
function getList3() {
  const p = { ...queryParams3 }
  if (dateRange3.value && dateRange3.value.length === 2) { p.beginTime = dateRange3.value[0]; p.endTime = dateRange3.value[1] }
  listObjAcci(p).then(res => { list3.value = res.rows || []; total3.value = res.total || 0 })
}
function handleQuery3() { queryParams3.pageNum = 1; getList3() }
function getList4() {
  const p = { ...queryParams4 }
  if (dateRange4.value && dateRange4.value.length === 2) { p.beginTime = dateRange4.value[0]; p.endTime = dateRange4.value[1] }
  listObjAcci(p).then(res => { list4.value = res.rows || []; total4.value = res.total || 0 })
}
function handleQuery4() { queryParams4.pageNum = 1; getList4() }

function getList5() {
  const p = { ...queryParams5 }
  if (dateRange5.value && dateRange5.value.length === 2) { p.beginTime = dateRange5.value[0]; p.endTime = dateRange5.value[1] }
  listObjAcci(p).then(res => { list5.value = res.rows || []; total5.value = res.total || 0 })
}
function handleQuery5() { queryParams5.pageNum = 1; getList5() }

function handleTabChange() {
  if (activeTab.value === 'fast') getList1()
  else if (activeTab.value === 'month') getList2()
  else if (activeTab.value === 'subFast') getList3()
  else if (activeTab.value === 'subMonth') getList4()
  else getList5()
}
</script>
