<template>
  <div class="process-management">
    <a-card title="制度公示管理" :bordered="false">
      <!-- 搜索区域 -->
      <div class="search-container">
        <a-form layout="inline" :model="searchForm" class="search-form">
          <a-form-item label="提案标题">
            <a-input 
              v-model="searchForm.title" 
              placeholder="请输入提案标题" 
              allow-clear
              style="width: 200px"
            />
          </a-form-item>
          
          <a-form-item label="提案人">
            <a-input 
              v-model="searchForm.proposer" 
              placeholder="请输入提案人" 
              allow-clear
              style="width: 150px"
            />
          </a-form-item>
          
          <a-form-item label="状态">
            <a-select 
              v-model="searchForm.status" 
              placeholder="请选择状态" 
              allow-clear
              style="width: 150px"
            >
              <a-option value="">全部</a-option>
              <a-option value="PUBLISHED">已公告</a-option>
              <a-option value="APPROVED">已公示</a-option>
            </a-select>
          </a-form-item>
          
          <a-form-item>
            <a-space>
              <a-button type="primary" @click="search">
                <template #icon><icon-search /></template>
                搜索
              </a-button>
              <a-button @click="reset">
                <template #icon><icon-refresh /></template>
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>

      <a-table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        :pagination="pagination"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #toolbar-left>
          <span class="search-result-info">
            共找到 <strong>{{ pagination.total }}</strong> 条记录
          </span>
        </template>
        <template #regulationType="{ record }">
          {{ getRegulationTypeName(record.regulationType) }}
        </template>

        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.status)">
            {{ getStatusText(record.status) }}
          </a-tag>
        </template>

        <template #level="{ record }">
          <a-tag :color="getLevelColor(record.level)">
            {{ getLevelText(record.level) }}
          </a-tag>
        </template>

        <template #operations="{ record }">
          <a-space>
            <a-button type="text" size="small" @click="handleView(record)">
              查看详情
            </a-button>
            <a-button 
              v-if="record.status === RegulationStatus.PUBLISHED" 
              type="text" 
              size="small" 
              disabled
            >
              已公告
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 提案详情弹窗 -->
    <a-modal
      v-model:visible="detailModalVisible"
      title="提案详情"
      width="800px"
      :footer="false"
    >
      <div class="proposal-detail" v-if="currentProposal">
        <div class="detail-header">
          <h3>{{ currentProposal.title }}</h3>
          <div class="detail-meta">
            <span>提案人: {{ currentProposal.createByName }}</span>
            <span>提案类型: {{ getRegulationTypeName(currentProposal.regulationType) }}</span>
            <span>适用范围: {{ currentProposal.scope }}</span>
            <span>级别: <a-tag :color="getLevelColor(currentProposal.level)">{{ getLevelText(currentProposal.level) }}</a-tag></span>
            <span>创建时间: {{ formatDate(currentProposal.createTime) }}</span>
            <span>状态: <a-tag :color="getStatusColor(currentProposal.status)">{{ getStatusText(currentProposal.status) }}</a-tag></span>
          </div>
        </div>
        
        <a-divider />
        
        <div class="detail-content">
          <h4>提案内容</h4>
          <div class="content-text">{{ currentProposal.content }}</div>
          
          <h4>备注</h4>
          <div class="content-text">{{ currentProposal.remark || '暂无备注' }}</div>
        </div>
        
        <a-divider />
        
        <div class="detail-footer">
          <a-button 
            v-if="currentProposal.status === RegulationStatus.PUBLISHED" 
            disabled
          >
            已自动公示
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'
import { useRegulationStore } from '@/stores/modules/regulation'
import { regulationApi } from '@/apis/regulation'
import { 
  RegulationStatus, 
  RegulationLevel,
  type Regulation,
  type RegulationType
} from '@/apis/regulation/type'

defineOptions({ name: 'ProcessManagement' })

// 表格列定义
const columns = [
  { title: '提案标题', dataIndex: 'title', key: 'title', width: 200 },
  { title: '提案人', dataIndex: 'createByName', key: 'createByName', width: 120 },
  { title: '提案类型', dataIndex: 'regulationType', key: 'regulationType', slotName: 'regulationType', width: 120 },
  { title: '状态', dataIndex: 'status', key: 'status', slotName: 'status', width: 100 },
  { title: '级别', dataIndex: 'level', key: 'level', slotName: 'level', width: 80 },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
  { title: '操作', key: 'operations', slotName: 'operations', width: 150 }
]

// 搜索表单
const searchForm = reactive({
  title: '',
  proposer: '',
  status: ''
})

// 表格数据
const tableData = ref<Regulation[]>([])
const loading = ref(false)
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showJumper: true,
  showPageSize: true
})

const currentProposal = ref<Regulation | null>(null)

// 详情相关
const detailModalVisible = ref(false)

// 当前用户
const currentUser = ref('管理者') // 从用户认证系统获取当前用户ID

// 制度管理store
const regulationStore = useRegulationStore()

// 制度类型列表
const regulationTypes = ref<RegulationType[]>([])

// 获取状态颜色
const getStatusColor = (status: RegulationStatus) => {
  const colors = {
    [RegulationStatus.PUBLISHED]: 'purple',
    [RegulationStatus.APPROVED]: 'green',
  }
  return colors[status] || 'purple'
}

// 获取状态文本
const getStatusText = (status: RegulationStatus) => {
  const texts = {
    [RegulationStatus.PUBLISHED]: '已公告',
    [RegulationStatus.APPROVED]: '已公示',
  }
  return texts[status] || '已公告'
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取级别颜色
const getLevelColor = (level: RegulationLevel) => {
  const colors = {
    [RegulationLevel.LOW]: 'blue',
    [RegulationLevel.MEDIUM]: 'orange',
    [RegulationLevel.HIGH]: 'red'
  }
  return colors[level] || 'blue'
}

// 获取级别文本
const getLevelText = (level: RegulationLevel) => {
  const texts = {
    [RegulationLevel.LOW]: '低',
    [RegulationLevel.MEDIUM]: '中',
    [RegulationLevel.HIGH]: '高'
  }
  return texts[level] || '中'
}

// 根据制度类型ID获取类型名称
const getRegulationTypeName = (typeId: string) => {
  const type = regulationTypes.value.find(t => t.typeId === typeId)
  return type ? type.typeName : typeId
}

// 获取制度类型列表
const getRegulationTypes = async () => {
  try {
    const response = await regulationApi.searchRegulationTypes()
    if (response.status === 200) {
      regulationTypes.value = response.data.records || response.data
    }
  } catch (error) {
    console.error('获取制度类型列表失败:', error)
  }
}

// 获取表格数据 - 使用后端搜索接口
const getTableData = async () => {
  loading.value = true
  try {
    // 构建请求参数
    const requestParams: any = {
      page: pagination.current,
      size: pagination.pageSize,
      title: searchForm.title || undefined,
      proposer: searchForm.proposer || undefined
    }
    
    if (searchForm.status) {
      // 用户选择了特定状态
      requestParams.status = searchForm.status
      const response = await regulationApi.getRegulationList(requestParams)
      
      if (response.status === 200) {
        tableData.value = response.data.records
        pagination.total = response.data.total
        pagination.current = response.data.current
      } else {
        Message.error('搜索失败')
      }
    } else {
      // 用户没有选择状态，默认显示已公示和已公告的提案
      // 分别查询已公告和已公示的提案
      const [publishedResponse, approvedResponse] = await Promise.all([
        regulationApi.getRegulationList({
          ...requestParams,
          status: RegulationStatus.PUBLISHED
        }),
        regulationApi.getRegulationList({
          ...requestParams,
          status: RegulationStatus.APPROVED
        })
      ])
      
      if (publishedResponse.status === 200 && approvedResponse.status === 200) {
        // 合并两个结果
        const allRecords = [
          ...publishedResponse.data.records,
          ...approvedResponse.data.records
        ]
        
        // 按创建时间排序
        allRecords.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())
        
        tableData.value = allRecords
        pagination.total = allRecords.length
        pagination.current = 1
      } else {
        Message.error('搜索失败')
      }
    }
  } catch (error) {
    console.error('搜索制度公示失败:', error)
    Message.error('搜索失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const search = () => {
  pagination.current = 1
  getTableData()
}

// 重置
const reset = () => {
  Object.assign(searchForm, {
    title: '',
    proposer: '',
    status: ''
  })
  pagination.current = 1
  getTableData()
}

// 查看
const handleView = (record: Regulation) => {
  currentProposal.value = record
  detailModalVisible.value = true
}

// 分页事件
const handlePageChange = (page: number) => {
  pagination.current = page
  getTableData()
}

const handlePageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  pagination.current = 1
  getTableData()
}

onMounted(() => {
  getTableData()
  getRegulationTypes()
})
</script>

<style scoped lang="scss">
.process-management {
  .arco-card {
    margin-bottom: 16px;
  }
}

.search-container {
  padding: 16px;
  background: var(--color-bg-2);
  border-radius: 6px;
  margin-bottom: 16px;
  
  .search-form {
    .arco-form-item {
      margin-bottom: 0;
      margin-right: 16px;
      
      .arco-form-item-label {
        font-weight: 500;
        color: var(--color-text-1);
        margin-right: 8px;
      }
    }
    
    .arco-input,
    .arco-select {
      border-radius: 4px;
    }
    
    .arco-btn {
      border-radius: 4px;
    }
  }
}

.search-result-info {
  color: var(--color-text-2);
  font-size: 14px;
  
  strong {
    color: var(--color-text-1);
    font-weight: 600;
  }
}

.proposal-detail {
  .detail-header {
    margin-bottom: 16px;
    
    h3 {
      margin-bottom: 12px;
      color: var(--color-text-1);
    }
    
    .detail-meta {
      display: flex;
      gap: 16px;
      color: var(--color-text-3);
      font-size: 14px;
      flex-wrap: wrap;
    }
  }
  
  .detail-content {
    h4 {
      margin: 16px 0 8px 0;
      color: var(--color-text-1);
      font-weight: 500;
    }
    
    .content-text {
      color: var(--color-text-2);
      line-height: 1.6;
      margin-bottom: 16px;
      padding: 12px;
      background: var(--color-fill-1);
      border-radius: 6px;
    }
  }
  
  .detail-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
  }
}
</style> 