<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 工作方案 Tab -->
      <el-tab-pane label="工作方案" name="workplan">
        <el-table v-loading="wpLoading" :data="workPlanList" border>
          <el-table-column label="方案编号" prop="wpCode" width="160" />
          <el-table-column label="方案名称" prop="wpName" :show-overflow-tooltip="true" />
          <el-table-column label="文号" prop="fileNum" width="140" />
          <el-table-column label="发布日期" prop="rlsTm" width="120" />
          <el-table-column label="发布单位" prop="releWiunName" width="180" />
          <el-table-column label="附件" prop="attc" width="100">
            <template #default="scope">
              <el-link v-if="scope.row.attc" :href="scope.row.attc" target="_blank" type="primary">查看</el-link>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 制度文件 Tab -->
      <el-tab-pane label="制度文件" name="files">
        <el-form :model="fileQuery" :inline="true">
          <el-form-item label="文件名称">
            <el-input v-model="fileQuery.fileName" placeholder="请输入文件名称" clearable style="width:200px" />
          </el-form-item>
          <el-form-item label="文件类型">
            <el-input v-model="fileQuery.fileType" placeholder="请输入文件类型" clearable style="width:150px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getFileList">搜索</el-button>
            <el-button icon="Refresh" @click="resetFileQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="fileLoading" :data="fileList" border>
          <el-table-column label="文件名称" prop="FILE_NAME" :show-overflow-tooltip="true" />
          <el-table-column label="文件类型" prop="FILE_TYPE" width="120" />
          <el-table-column label="文号" prop="WH" width="150" />
          <el-table-column label="日期" prop="START_DATE" width="120" />
          <el-table-column label="附件" width="100">
            <template #default="scope">
              <el-link v-if="scope.row.URL" :href="scope.row.URL" target="_blank" type="primary">下载</el-link>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="fileTotal > 0" :total="fileTotal" v-model:page="filePageNum" v-model:limit="filePageSize" @pagination="getFileList" />
      </el-tab-pane>

      <!-- 工作动态 Tab -->
      <el-tab-pane label="工作动态" name="articles">
        <el-form :model="articleQuery" :inline="true">
          <el-form-item label="标题">
            <el-input v-model="articleQuery.title" placeholder="请输入标题" clearable style="width:200px" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="articleQuery.type" placeholder="动态类型" clearable style="width:150px">
              <el-option label="水利动态" value="0" />
              <el-option label="水利要闻" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getArticleList">搜索</el-button>
            <el-button icon="Refresh" @click="resetArticleQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="articleLoading" :data="articleList" border>
          <el-table-column label="标题" prop="TITLE" :show-overflow-tooltip="true" />
          <el-table-column label="类型" prop="TYPE" width="100">
            <template #default="scope">{{ scope.row.TYPE === '0' ? '水利动态' : '水利要闻' }}</template>
          </el-table-column>
          <el-table-column label="发布人" prop="PUBMAN" width="120" />
          <el-table-column label="发布时间" prop="PUBTIME" width="160" />
        </el-table>
        <pagination v-show="articleTotal > 0" :total="articleTotal" v-model:page="articlePageNum" v-model:limit="articlePageSize" @pagination="getArticleList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listWorkPlan } from '@/api/hzz/workplan'
import { listFile, listArticle } from '@/api/hzz/rule'

const activeTab = ref('workplan')

// ========== 工作方案 ==========
const wpLoading = ref(false)
const workPlanList = ref([])
const getWorkPlanList = async () => {
  wpLoading.value = true
  try {
    const res = await listWorkPlan('')
    workPlanList.value = res.data || []
  } finally { wpLoading.value = false }
}

// ========== 制度文件 ==========
const fileLoading = ref(false)
const fileList = ref([])
const fileTotal = ref(0)
const filePageNum = ref(1)
const filePageSize = ref(10)
const fileQuery = ref({ fileName: '', fileType: '' })
const getFileList = async () => {
  fileLoading.value = true
  try {
    const res = await listFile({ ...fileQuery.value, types: '0', pageNum: filePageNum.value, pageSize: filePageSize.value })
    fileList.value = res.rows || []
    fileTotal.value = res.total || 0
  } finally { fileLoading.value = false }
}
const resetFileQuery = () => { fileQuery.value = { fileName: '', fileType: '' }; getFileList() }

// ========== 工作动态 ==========
const articleLoading = ref(false)
const articleList = ref([])
const articleTotal = ref(0)
const articlePageNum = ref(1)
const articlePageSize = ref(10)
const articleQuery = ref({ title: '', type: '' })
const getArticleList = async () => {
  articleLoading.value = true
  try {
    const res = await listArticle({ ...articleQuery.value, pageNum: articlePageNum.value, pageSize: articlePageSize.value })
    articleList.value = res.rows || []
    articleTotal.value = res.total || 0
  } finally { articleLoading.value = false }
}
const resetArticleQuery = () => { articleQuery.value = { title: '', type: '' }; getArticleList() }

onMounted(() => {
  getWorkPlanList()
  getFileList()
  getArticleList()
})
</script>
