<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="隐患名称" prop="hiddName">
        <el-input v-model="queryParams.hiddName" placeholder="请输入隐患名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="督办状态" prop="supStat">
        <el-select v-model="queryParams.supStat" placeholder="请选择督办状态" clearable style="width: 240px">
          <el-option v-for="dict in sup_stat" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" style="width: 308px">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['hidd:majhiddsup:export']">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="hidd-majhiddsup-index"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="supList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="隐患名称" align="center" prop="hiddName" v-if="columns.hiddName.visible" :show-overflow-tooltip="true" />
      <el-table-column label="隐患等级" align="center" prop="hiddGrad" v-if="columns.hiddGrad.visible">
        <template #default="scope">
          <dict-tag :options="hidd_grad" :value="scope.row.hiddGrad" />
        </template>
      </el-table-column>
      <el-table-column label="隐患状态" align="center" prop="hiddStat" v-if="columns.hiddStat.visible">
        <template #default="scope">
          <dict-tag :options="hidd_stat" :value="scope.row.hiddStat" />
        </template>
      </el-table-column>
      <el-table-column label="督办日期" align="center" prop="supDate" v-if="columns.supDate.visible" width="180" />
      <el-table-column label="督办单位" align="center" prop="supWiunCode" v-if="columns.supWiunCode.visible" :show-overflow-tooltip="true" />
      <el-table-column label="督办负责人" align="center" prop="supLegPers" v-if="columns.supLegPers.visible" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template #default="scope">
          <el-tooltip content="督办" placement="top" v-if="scope.row.supStat === '0'">
            <el-button link type="primary" icon="AlarmClock" @click="handleSup(scope.row)" v-hasPermi="['hidd:majhiddsup:add']"></el-button>
          </el-tooltip>
          <el-tooltip content="详情" placement="top" v-if="scope.row.supStat === '1' || scope.row.supStat === '3'">
            <el-button link type="primary" icon="View" @click="handleDetail(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="销号" placement="top" v-if="scope.row.supStat === '2'">
            <el-button link type="primary" icon="CircleCheck" @click="handleWriteOff(scope.row)" v-hasPermi="['hidd:majhiddsup:edit']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

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

    <el-dialog title="隐患督办" v-model="supOpen" width="600px" append-to-body>
      <el-form :model="supForm" :rules="supRules" ref="supRef" label-width="100px">
        <el-form-item label="隐患名称">
          <el-input v-model="supForm.hiddName" disabled />
        </el-form-item>
        <el-form-item label="督办意见" prop="supOpin">
          <el-input v-model="supForm.supOpin" type="textarea" :rows="4" placeholder="请输入督办意见" />
        </el-form-item>
        <el-form-item label="文号" prop="supLareId">
          <el-input v-model="supForm.supLareId" placeholder="请输入文号" />
        </el-form-item>
        <el-form-item label="督办期限" prop="rectPeri">
          <el-date-picker v-model="supForm.rectPeri" type="date" value-format="YYYY-MM-DD" placeholder="请选择期限" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitSup">确 定</el-button>
          <el-button @click="supOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="销号确认" v-model="writeOffOpen" width="400px" append-to-body>
      <div style="text-align: center; padding: 20px;">
        <el-icon style="font-size: 48px; color: #e6a23c;"><WarningFilled /></el-icon>
        <p style="margin-top: 16px; font-size: 16px;">确认对该隐患进行销号操作？</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitWriteOff">确 定</el-button>
          <el-button @click="writeOffOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="BisMajHiddSup">
import { listBisMajHiddSup, getBisMajHiddSup, addBisMajHiddSup, updateBisMajHiddSup, delBisMajHiddSup, writeOffBisMajHiddSup } from "@/api/slaj/hidd"
import { listObjHidd, getObjHidd } from "@/api/slaj/hidd"

const { proxy } = getCurrentInstance()
const { hidd_grad, hidd_stat, sup_stat } = proxy.useDict("hidd_grad", "hidd_stat", "sup_stat")

const supList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const dateRange = ref([])

const supOpen = ref(false)
const supForm = ref({})
const supRules = {
  supOpin: [{ required: true, message: "督办意见不能为空", trigger: "blur" }],
  supLareId: [{ required: true, message: "文号不能为空", trigger: "blur" }],
  rectPeri: [{ required: true, message: "请选择督办期限", trigger: "change" }]
}

const writeOffOpen = ref(false)
const writeOffRow = ref({})

const columns = ref({
  hiddName: { label: '隐患名称', visible: true },
  hiddGrad: { label: '隐患等级', visible: true },
  hiddStat: { label: '隐患状态', visible: true },
  supDate: { label: '督办日期', visible: true },
  supWiunCode: { label: '督办单位', visible: true },
  supLegPers: { label: '督办负责人', visible: true }
})

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    hiddName: undefined,
    supStat: undefined
  },
  rules: {}
})

const { queryParams, form, rules } = toRefs(data)

function getList() {
  loading.value = true
  listBisMajHiddSup(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    loading.value = false
    supList.value = res.rows
    total.value = res.total
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  dateRange.value = []
  proxy.resetForm("queryRef")
  handleQuery()
}

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.guid)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

function handleSup(row) {
  supForm.value = {
    hiddGuid: row.guid,
    hiddName: row.hiddName,
    supOpin: undefined,
    supLareId: undefined,
    rectPeri: undefined
  }
  supOpen.value = true
}

function submitSup() {
  proxy.$refs["supRef"].validate(valid => {
    if (valid) {
      addBisMajHiddSup(supForm.value).then(response => {
        proxy.$modal.msgSuccess("督办成功")
        supOpen.value = false
        getList()
      })
    }
  })
}

function handleDetail(row) {
  const guid = row.guid || ids.value
  proxy.$router.push({ path: '/slaj/hidd/supDetail', query: { guid: guid } })
}

function handleWriteOff(row) {
  writeOffRow.value = row
  writeOffOpen.value = true
}

function submitWriteOff() {
  writeOffBisMajHiddSup({ guid: writeOffRow.value.guid }).then(response => {
    proxy.$modal.msgSuccess("销号成功")
    writeOffOpen.value = false
    getList()
  }).catch(() => {})
}

function handleExport() {
  proxy.download("hidd/majhiddsup/export", {
    ...queryParams.value
  }, `majHiddSup_${new Date().getTime()}.xlsx`)
}

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