<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="年份" prop="year">
        <el-date-picker
          v-model="queryParams.year"
          type="year"
          placeholder="选择年份"
          format="YYYY"
          value-format="YYYY"
          clearable
          class="year-picker"
        />
      </el-form-item>
      <el-form-item label="数据来源" prop="addvcd">
        <el-select v-model="queryParams.addvcd" placeholder="请选择数据来源" clearable class="source-select">
          <el-option label="江苏水文" value="JS" />
          <el-option label="无锡" value="WX" />
          <el-option label="上海水文" value="SH" />
          <el-option label="浙江水文" value="ZJ" />
        </el-select>
      </el-form-item>
      <el-form-item label="监测类型" prop="jcxm">
        <el-select v-model="queryParams.jcxm" placeholder="请选择监测类型" clearable class="type-select">
          <el-option label="水质" value="sz" />
          <el-option label="水量" value="sl" />
          <el-option label="水量水质" value="slsz" />
        </el-select>
      </el-form-item>
      <el-form-item label="测站名称" prop="stnm">
        <el-input
          v-model="queryParams.stnm"
          placeholder="请输入测站名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </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="['yjjtgl:quebaotongji:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="stationList" stripe border>
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column label="年份" align="center" prop="year" width="80" />
      <el-table-column label="测站名称" align="center" prop="stnm" width="150" show-overflow-tooltip />
      <el-table-column label="测站编码" align="center" prop="stcd" width="120" />
      <el-table-column label="河流名称" align="center" prop="rvnm" width="120" show-overflow-tooltip />
      <el-table-column label="测站地址" align="center" prop="stlc" width="200" show-overflow-tooltip />
      <el-table-column label="管理单位" align="center" prop="jcdw" width="220" show-overflow-tooltip />
      <el-table-column label="监测频次" align="center" prop="jcpc" width="300" show-overflow-tooltip />
      <el-table-column label="监测项目" align="center" prop="jcxm" width="100">
        <template #default="{ row }">
          {{ getJcxmLabel(row.jcxm) }}
        </template>
      </el-table-column>
      <el-table-column label="测站数据量" align="center" prop="dataCount" width="100">
        <template #default="{ row }">
          <span :style="{ color: row.dataCount === 0 ? '#f56c6c' : '' }">{{ row.dataCount || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到报情况" align="center" prop="reportStatus" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.reportStatus)">{{ row.reportStatus }}</el-tag>
        </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"
    />
  </div>
</template>

<script setup name="Quebaotongji">
import { ref, reactive, onMounted } from 'vue'
import { listQuebaoStations } from '@/api/yjjt/quebao'

const stationList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const queryRef = ref(null)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 15,
  year: '',
  addvcd: '',
  jcxm: '',
  stnm: ''
})

const getJcxmLabel = (jcxm) => {
  const map = {
    'sz': '水质',
    'sl': '水量',
    'slsz': '水量水质'
  }
  return map[jcxm] || jcxm || '-'
}

const getStatusType = (status) => {
  if (status === '正常') return 'success'
  if (status === '缺报') return 'danger'
  return 'warning'
}

const getList = async () => {
  loading.value = true
  try {
    const response = await listQuebaoStations(queryParams)
    stationList.value = response.rows || []
    total.value = response.total || 0
  } catch (error) {
    console.error('获取站点缺报列表失败', error)
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

const resetQuery = () => {
  queryRef.value?.resetFields()
  queryParams.year = ''
  queryParams.addvcd = ''
  queryParams.jcxm = ''
  queryParams.stnm = ''
  handleQuery()
}

const handleExport = () => {
  import('@/utils/request').then(({ default: request }) => {
    request({
      url: '/yjjt/quebao/export',
      method: 'get',
      params: queryParams,
      responseType: 'blob'
    }).then(response => {
      const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = '站点缺报统计数据.xlsx'
      link.click()
      window.URL.revokeObjectURL(url)
    })
  })
}

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

<style scoped>
.app-container {
  padding: 20px;
}

.year-picker {
  width: 150px;
}

.source-select {
  width: 150px;
}

.type-select {
  width: 150px;
}

:deep(.el-form-item__content) {
  flex-wrap: nowrap;
}

:deep(.el-input) {
  width: 150px;
}

:deep(.el-select) {
  width: 150px;
}

:deep(.el-date-editor) {
  width: 150px;
}

:deep(.el-button) {
  height: 32px;
  font-size: 14px;
}

:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  font-size: 14px;
  font-weight: bold;
}

:deep(.el-table td) {
  font-size: 14px;
}

:deep(.el-form-item__label) {
  font-size: 14px;
}

:deep(.el-pagination) {
  font-size: 14px;
  margin-top: 15px;
}
</style>
