<template>
  <el-row :gutter="20">
    <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
    <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
      <ContentWrap style="border: 0">
        <!-- 搜索工作栏 -->
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
          <el-form-item label="风险等级" prop="riskGrade">
            <el-select
              v-model="queryParams.riskGrade"
              placeholder="请选择风险等级"
              clearable
              style="width: 200px">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.DANGER_GRADE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="handleQuery"
              ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
            >
            <el-button @click="resetQuery"
              ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
            >
            <el-button type="primary" @click="openForm('create')" color="#626aef">
              <Icon icon="ep:plus" class="mr-5px" /> 新增
            </el-button>
            <el-button type="success" plain @click="handleExport" :loading="exportLoading">
              <Icon icon="ep:download" class="mr-5px" /> 导出
            </el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>

      <ContentWrap style="border: 0">
        <div v-loading="!staticData.length" class="stats-cards">
          <div
            v-for="item in statsDisplayCards"
            :key="item.key"
            class="stats-card"
            :style="getStatsCardStyle(item.accent, item.glow)">
            <div
              class="stats-card__decor stats-card__decor--left"
              :style="{ background: item.glow }"></div>
            <div
              class="stats-card__decor stats-card__decor--right"
              :style="{ background: item.glow }"></div>
            <div class="stats-card__header">
              <div class="stats-card__icon-wrap">
                <div class="stats-card__icon" :style="{ color: item.accent }">
                  <Icon :icon="item.icon" />
                </div>
              </div>
              <div class="stats-card__title">{{ item.label }}</div>
            </div>
            <div class="stats-card__body">
              <CountTo
                :duration="2600"
                :end-val="item.count"
                :start-val="0"
                class="stats-card__count"
                :style="{ color: item.accent }" />
            </div>
          </div>
        </div>
        <zm-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#333' }"
          :cell-style="{ padding: '12px 8px' }"
          height="52.7vh">
          <!-- 区域/位置 列（已合并） -->
          <zm-table-column prop="region" label="区域/位置" align="center" fixed="left" />

          <!-- 其他列保持不变 -->
          <zm-table-column label="序号" width="70" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </zm-table-column>
          <zm-table-column prop="elementDescription" label="危害因素描述" align="center" />
          <zm-table-column prop="maybeResult" label="可导致的后果" align="center" />

          <!-- 风险评价列保持不变 -->
          <zm-table-column label="风险评价" align="center">
            <zm-table-column prop="evalKn" label="可能性 (L)" width="80" align="center">
              <template #default="{ row }">
                {{ row.evalKn }}
              </template>
            </zm-table-column>
            <zm-table-column prop="evalYz" label="严重性 (S)" width="80" align="center">
              <template #default="{ row }">
                {{ row.evalYz }}
              </template>
            </zm-table-column>
            <zm-table-column prop="evalFxz" label="风险值 (R)" width="80" align="center">
              <template #default="{ row }">
                {{ row.evalFxz }}
              </template>
            </zm-table-column>
            <zm-table-column prop="riskGrade" label="风险等级" width="100" align="center">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.DANGER_GRADE" :value="scope.row.riskGrade" />
              </template>
            </zm-table-column>
          </zm-table-column>

          <zm-table-column
            prop="controlMethod"
            label="控制措施"
            show-overflow-tooltip
            align="center" />
          <zm-table-column prop="charge" label="责任人" align="center" />
          <zm-table-column label="操作" width="150" align="center" fixed="right" action>
            <template #default="{ row }">
              <el-button
                text
                :underline="false"
                size="small"
                type="primary"
                @click="openForm('edit', row)">
                编辑
              </el-button>
              <el-button text :underline="false" size="small" type="danger" @click="deleteRow(row)">
                删除
              </el-button>
            </template>
          </zm-table-column>
        </zm-table>

        <!-- 分页 -->
        <div class="mt-2 flex justify-right">
          <el-pagination
            v-model:current-page="pagination.pageNo"
            v-model:page-size="pagination.pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background />
        </div>
      </ContentWrap>
    </el-col>
  </el-row>
  <!-- 新增/编辑弹窗 -->
  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" @close="resetForm">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <!-- 第一行 -->
        <el-col :span="12">
          <el-form-item label="区域/位置" prop="region">
            <el-input v-model="formData.region" placeholder="请输入区域/位置" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="危害因素描述" prop="elementDescription">
            <el-input v-model="formData.elementDescription" placeholder="请输入危害因素描述" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 第二行 -->
        <el-col :span="12">
          <el-form-item label="可能导致的后果" prop="maybeResult">
            <el-input
              v-model="formData.maybeResult"
              placeholder="请输入可能导致的后果"
              type="textarea"
              :rows="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="风险评价可能性" prop="evalKn">
            <el-input-number
              v-model="formData.evalKn"
              controls-position="right"
              style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 第三行 -->
        <el-col :span="12">
          <el-form-item label="风险评价严重性" prop="evalYz">
            <el-input-number
              v-model="formData.evalYz"
              controls-position="right"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="风险评价风险值" prop="evalFxz">
            <el-input-number v-model="formData.evalFxz" disabled style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 第四行 -->
        <el-col :span="12">
          <el-form-item label="风险等级" prop="riskGrade">
            <el-select
              v-model="formData.riskGrade"
              placeholder="请选择风险等级"
              clearable
              style="width: 100%">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.DANGER_GRADE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="责任人" prop="charge">
            <el-input v-model="formData.charge" placeholder="请输入责任人" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入备注"
              :rows="1" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 控制措施单独一行（占满） -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="控制措施" prop="controlMethod">
            <el-input
              v-model="formData.controlMethod"
              type="textarea"
              :rows="4"
              placeholder="请输入控制措施" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted, computed } from 'vue'
import { IotDangerApi } from '@/api/pms/qhse/index'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import DeptTree from '@/views/system/user/HazardTree.vue'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
// 查询参数
const queryParams = reactive({
  riskGrade: '',
  deptId: ''
})

// 表格数据
const tableData = ref([])
const isLeftContentCollapsed = ref(false)
// 弹窗控制
const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const formData = reactive({
  region: '', // 区域/位置
  charge: '',
  elementDescription: '', // 危害因素描述
  maybeResult: '', // 可能导致的后果
  evalKn: 1, // 可能性
  evalYz: 1, // 严重性
  evalFxz: 1, // 风险值（自动计算）
  riskGrade: '一般风险', // 风险等级
  controlMethod: '', // 控制措施
  remark: '' // 备注
})

// 表单校验规则
const rules = {
  region: [{ required: true, message: '请输入区域/位置', trigger: 'blur' }],
  charge: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
  elementDescription: [{ required: true, message: '请输入危害因素描述', trigger: 'blur' }],
  maybeResult: [{ required: true, message: '请输入可能导致的后果', trigger: 'blur' }],
  evalKn: [{ required: true, message: '请输入风险评价可能性', trigger: 'change' }],
  evalYz: [{ required: true, message: '请输入风险评价严重性', trigger: 'change' }],
  riskGrade: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
  controlMethod: [{ required: true, message: '请输入控制措施', trigger: 'blur' }]
}

watch(
  () => [formData.evalKn, formData.evalYz],
  ([kn, yz]) => {
    if (kn && yz) {
      formData.evalFxz = kn * yz
    }
  },
  { immediate: true }
)
// 搜索
const handleQuery = () => {
  pagination.pageNo = 1 // 搜索后回到第一页
  loadTableData()
  getStatic()
}

const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  pagination.pageNo = 1
  loadTableData()
  getStatic()
}

const downloadFile = (response) => {
  // 创建 blob 对象
  const blob = new Blob([response], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  })

  // 获取文件名
  let fileName = '危险源.xlsx'
  const disposition = response.headers ? response.headers['content-disposition'] : ''
  if (disposition) {
    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
    const matches = filenameRegex.exec(disposition)
    if (matches != null && matches[1]) {
      fileName = matches[1].replace(/['"]/g, '')
    }
  }

  // 创建下载链接
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', fileName)

  // 触发下载
  document.body.appendChild(link)
  link.click()

  // 清理
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
}

const handleExport = async () => {
  try {
    exportLoading.value = true
    // 调用导出接口
    const response = await IotDangerApi.exportDanger(queryParams)

    // 下载文件
    downloadFile(response)
    exportLoading.value = false
  } catch (error) {
    ElMessage.error('导出失败，请重试')
    console.error('导出错误:', error)
  } finally {
  }
}

// 重置查询
const resetQuery = () => {
  queryParams.riskGrade = '' // 清空风险等级筛选
  pagination.pageNo = 1 // 重置为第一页
  loadTableData()
  getStatic()
}

// 删除确认
const deleteRow = async (row) => {
  try {
    await ElMessageBox.confirm(`确认删除 ${row.elementDescription} 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await IotDangerApi.deleteDanger(row.id)
    ElMessage.success('删除成功')
    loadTableData() // 重新加载数据
  } catch (error) {
    // 用户取消或删除失败
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 每页数量变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.pageNo = 1 // 重置为第一页
  loadTableData()
}

// 预先计算合并信息
const spanArr = ref([])
const pos = ref(0)

// 计算合并信息
const getSpanArr = (data) => {
  spanArr.value = []
  pos.value = 0

  data.forEach((item, index) => {
    if (index === 0) {
      spanArr.value.push(1)
      pos.value = 0
    } else {
      if (data[index].region === data[index - 1].region) {
        spanArr.value[pos.value] += 1
        spanArr.value.push(0)
      } else {
        spanArr.value.push(1)
        pos.value = index
      }
    }
  })
}

// 行合并方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const _row = spanArr.value[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col
    }
  }
  return {
    rowspan: 1,
    colspan: 1
  }
}

// 当前页变化
const handleCurrentChange = (val) => {
  pagination.pageNo = val
  loadTableData()
}

// 打开表单
const openForm = (type, row = null) => {
  dialogTitle.value = type === 'create' ? '新增' : '编辑'
  if (type === 'edit') {
    Object.assign(formData, row)
    // 计算风险值 R = L × S
    formData.riskValue = formData.possibility * formData.severity
  } else {
    resetForm()
  }
  dialogVisible.value = true
}

// 重置表单
const resetForm = () => {
  Object.keys(formData).forEach((key) => {
    formData[key] = ''
  })
}

// 提交表单
const formRef = ref(null)
const submitForm = async () => {
  await formRef.value.validate()
  try {
    const params = {
      ...formData,
      evalFxz: formData.evalFxz // 使用已计算的值
    }

    if (dialogTitle.value === '新增') {
      await IotDangerApi.createDanger(params)
      ElMessage.success('新增成功')
    } else {
      params.id = formData.id
      await IotDangerApi.updateDanger(params)
      ElMessage.success('修改成功')
    }

    loadTableData()
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('提交失败')
  }
}

// 加载数据
const exportLoading = ref(false)
let total = ref(0)
const pagination = reactive({
  pageNo: 1,
  pageSize: 10
})
const loadTableData = async () => {
  try {
    const params = {
      pageNo: pagination.pageNo,
      pageSize: pagination.pageSize,
      riskGrade: queryParams.riskGrade, // 添加搜索参数
      deptId: queryParams.deptId
    }
    const res = await IotDangerApi.getDangerList(params)
    tableData.value = res.list || []
    total.value = res.total || 0

    // // 按 region 排序（支持中文）
    // tableData.value.sort((a, b) => {
    //   return a.region.localeCompare(b.region, 'zh-CN')
    // })

    // 计算合并信息
    getSpanArr(tableData.value)
  } catch (error) {
    console.error('加载失败:', error)
  }
}

let staticData = ref([])
const totalRiskCount = computed(() =>
  staticData.value.reduce((sum, item) => sum + (Number(item.count) || 0), 0)
)

const getStatsCardMeta = (classify) => {
  const value = String(classify || '')
  if (value.includes('重大') || value.includes('閲嶅ぇ')) {
    return {
      accent: '#ff5b61',
      glow: 'radial-gradient(circle, rgba(255, 91, 97, 0.22) 0%, rgba(255, 91, 97, 0) 72%)',
      icon: 'ep:warning-filled'
    }
  }
  if (value.includes('较大') || value.includes('杈冨ぇ')) {
    return {
      accent: '#ff9827',
      glow: 'radial-gradient(circle, rgba(255, 152, 39, 0.24) 0%, rgba(255, 152, 39, 0) 72%)',
      icon: 'ep:opportunity'
    }
  }
  if (value.includes('一般') || value.includes('涓€鑸')) {
    return {
      accent: '#3d7cff',
      glow: 'radial-gradient(circle, rgba(61, 124, 255, 0.2) 0%, rgba(61, 124, 255, 0) 72%)',
      icon: 'ep:info-filled'
    }
  }
  if (value.includes('低') || value.includes('浣')) {
    return {
      accent: '#25b36a',
      glow: 'radial-gradient(circle, rgba(37, 179, 106, 0.22) 0%, rgba(37, 179, 106, 0) 72%)',
      icon: 'ep:success-filled'
    }
  }
  return {
    accent: '#5f7da8',
    glow: 'radial-gradient(circle, rgba(95, 125, 168, 0.18) 0%, rgba(95, 125, 168, 0) 72%)',
    icon: 'ep:data-analysis'
  }
}

const statsDisplayCards = computed(() =>
  staticData.value.map((item, index) => {
    const meta = getStatsCardMeta(item.classify)
    const count = Number(item.count) || 0
    const rate = totalRiskCount.value ? ((count / totalRiskCount.value) * 100).toFixed(1) : '0.0'
    return {
      key: `${item.classify}-${index}`,
      label: item.classify,
      count,
      note: `占比:${rate}%`,
      ...meta
    }
  })
)

const getStatsCardStyle = (accent, glow) => ({
  '--stats-accent': accent,
  '--stats-glow': glow
})

const getStatsCardClass = (classify) => {
  const value = String(classify || '')
  if (value.includes('重大')) return 'stats-card--major'
  if (value.includes('较大')) return 'stats-card--high'
  if (value.includes('一般')) return 'stats-card--medium'
  if (value.includes('低')) return 'stats-card--low'
  return 'stats-card--default'
}

async function getStatic() {
  if (queryParams.deptId) {
    const res = await IotDangerApi.getDangerStatistics(queryParams.deptId)
    staticData.value = res.classify
  } else {
    const res = await IotDangerApi.getDangerStatistics(userStore.user.deptId)
    staticData.value = res.classify
  }
}

// 页面挂载后加载数据
onMounted(() => {
  loadTableData()
  getStatic()
})
</script>

<style scoped lang="scss">
::v-deep .el-button {
  border-radius: 0;
}

::v-deep .el-select__wrapper {
  border-radius: 0 !important;
  height: 26px;
}
.hazard-table-container {
  margin: 20px;
  margin-top: 10px;
}

.area-header {
  font-weight: bold;
  text-align: center;
  padding: 12px 0;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ddd;
}

.sub-row {
  padding: 12px 0;
  text-align: left;
}

.risk-evaluation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.risk-item {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #f5f7fa;
  color: #333;
}

.risk-level {
  font-weight: bold;
  color: #333;
  padding: 6px 12px;
  border-radius: 4px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stats-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: radial-gradient(
      circle at 18% 22%,
      rgb(255 255 255 / 92%) 0%,
      rgb(255 255 255 / 0%) 20%
    ),
    radial-gradient(circle at 88% 80%, rgb(255 215 158 / 22%) 0%, rgb(255 215 158 / 0%) 16%),
    linear-gradient(135deg, rgb(239 245 255 / 96%) 0%, rgb(217 230 248 / 88%) 100%);
  border: 1px solid rgb(255 255 255 / 62%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 86%),
    0 14px 30px rgb(116 146 191 / 12%);
}

.stats-card__decor {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(8px);
  opacity: 0.95;
}

.stats-card__decor--left {
  width: 72px;
  height: 72px;
  left: -10px;
  top: -8px;
}

.stats-card__decor--right {
  width: 88px;
  height: 88px;
  right: -18px;
  bottom: -24px;
}

.stats-card__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.stats-card__icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 85%),
    0 10px 24px rgb(118 144 187 / 10%);
}

.stats-card__icon {
  font-size: 24px;
  /* line-height: 1; */
}

.stats-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #324b72;
  letter-spacing: 0;
}

.stats-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-left: 62px;
}

.stats-card__count {
  display: block;
  font-size: 38px !important;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 1px;
  font-style: italic;
  text-shadow: 0 8px 18px rgb(68 110 183 / 10%);
}

.stats-card__note {
  padding-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .stats-card {
    min-height: 160px;
    padding: 24px 22px 22px;
    border-radius: 22px;
  }

  .stats-card__header {
    gap: 18px;
  }

  .stats-card__icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .stats-card__icon {
    font-size: 28px;
  }

  .stats-card__title {
    font-size: 17px;
  }

  .stats-card__body {
    margin-top: 18px;
    padding-left: 76px;
    gap: 10px;
  }

  .stats-card__count {
    font-size: 46px !important;
  }

  .stats-card__note {
    font-size: 18px;
    padding-bottom: 6px;
  }
}
</style>
