<template>
  <div class="system-regulation">
    <a-card title="已发布制度确认" :bordered="false">
      <template #extra>
        <a-button type="primary" @click="handleConfirmAll">
          <template #icon>
            <icon-check />
          </template>
          一键确认全部
        </a-button>
      </template>
      
      <a-table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        :pagination="pagination"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #confirmStatus="{ record }">
          <a-tag :color="record.confirmStatus === 'confirmed' ? 'green' : 'orange'">
            {{ record.confirmStatus === 'confirmed' ? '已确认' : '待确认' }}
          </a-tag>
        </template>
        
        <template #operations="{ record }">
          <a-space>
            <a-button type="text" size="small" @click="handleView(record)">
              查看详情
            </a-button>
            <a-button 
              v-if="record.confirmStatus !== 'confirmed'" 
              type="text" 
              size="small" 
              @click="handleConfirm(record)"
            >
              确认知晓
            </a-button>
            <a-button type="text" size="small" @click="handleDownload(record)">
              下载
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 制度详情弹窗 -->
    <a-modal
      v-model:visible="detailModalVisible"
      title="制度详情"
      width="800px"
      :footer="false"
    >
      <div class="regulation-detail" v-if="currentRegulation">
        <div class="detail-header">
          <h3>{{ currentRegulation.title }}</h3>
          <div class="detail-meta">
            <span>发布人: {{ currentRegulation.publisherName }}</span>
            <span>发布时间: {{ currentRegulation.publishTime }}</span>
            <span>生效日期: {{ currentRegulation.effectiveTime }}</span>
          </div>
        </div>
        
        <a-divider />
        
        <div class="detail-content">
          <h4>制度内容</h4>
          <div class="content-text">{{ currentRegulation.content }}</div>
          
          <h4>适用范围</h4>
          <div class="content-text">{{ currentRegulation.scope }}</div>
          
          <h4>实施要求</h4>
          <div class="content-text">{{ currentRegulation.requirements }}</div>
          
          <h4>注意事项</h4>
          <div class="content-text">{{ currentRegulation.notes }}</div>
        </div>
        
        <a-divider />
        
        <div class="detail-footer">
          <a-button type="primary" @click="handleConfirm(currentRegulation)">
            确认知晓并遵守
          </a-button>
          <a-button @click="handleDownload(currentRegulation)">
            下载制度文件
          </a-button>
        </div>
      </div>
    </a-modal>

    <!-- 确认承诺弹窗 -->
    <a-modal
      v-model:visible="confirmModalVisible"
      title="制度确认承诺"
      width="600px"
      @ok="submitConfirm"
      @cancel="confirmModalVisible = false"
    >
      <div class="confirm-content">
        <p>我确认已仔细阅读并理解《{{ currentRegulation?.title }}》的全部内容，承诺：</p>
        <ul>
          <li>严格遵守该制度的各项规定</li>
          <li>认真履行相关职责和义务</li>
          <li>如有违反，愿意承担相应责任</li>
        </ul>
        
        <a-checkbox v-model="agreeTerms">
          我已阅读并同意上述承诺
        </a-checkbox>
      </div>
    </a-modal>
  </div>
</template>

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

defineOptions({ name: 'SystemRegulation' })

// 表格列定义
const columns = [
  { title: '制度名称', dataIndex: 'title', key: 'title' },
  { title: '制度类型', dataIndex: 'regulationType', key: 'regulationType' },
  { title: '发布人', dataIndex: 'publisherName', key: 'publisherName' },
  { title: '发布时间', dataIndex: 'publishTime', key: 'publishTime' },
  { title: '生效日期', dataIndex: 'effectiveTime', key: 'effectiveTime' },
  { title: '确认状态', dataIndex: 'confirmStatus', key: 'confirmStatus', slotName: 'confirmStatus' },
  { title: '操作', key: 'operations', slotName: 'operations', width: 250 }
]

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

// 弹窗相关
const detailModalVisible = ref(false)
const confirmModalVisible = ref(false)
const currentRegulation = ref<Regulation | null>(null)
const agreeTerms = ref(false)

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

// 获取表格数据
const getTableData = async () => {
  loading.value = true
  try {
    const response = await regulationApi.getPublishedRegulationList({
      page: pagination.current,
      size: pagination.pageSize
    })
    
    if (response.status === 200) {
      tableData.value = response.data.records
      pagination.pageSize = response.data.size
      pagination.current = response.data.current
      pagination.total = response.data.total
    } else {
      Message.error('获取数据失败')
    }
  } catch (error) {
    console.error('获取已发布制度列表失败:', error)
    Message.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

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

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

// 查看详情
const handleView = (record: any) => {
  currentRegulation.value = record
  detailModalVisible.value = true
}

// 确认知晓
const handleConfirm = (record: any) => {
  currentRegulation.value = record
  confirmModalVisible.value = true
  agreeTerms.value = false
}

// 下载
const handleDownload = (record: any) => {
  try {
    // 创建制度文档内容
    const content = `
制度名称：${record.title}
制度类型：${record.regulationType}
发布人：${record.publisherName}
发布时间：${record.publishTime}
生效日期：${record.effectiveTime}

制度内容：
${record.content}

适用范围：
${record.scope}

实施要求：
${record.requirements || '请按照制度要求执行'}

注意事项：
${record.notes || '请严格遵守制度规定'}
    `.trim()

    // 创建Blob对象
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })

    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${record.title}.txt`

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

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

    Message.success('制度文件下载成功')
  } catch (error) {
    Message.error('下载失败')
    console.error('下载错误:', error)
  }
}

// 一键确认全部
const handleConfirmAll = async () => {
  try {
    await regulationApi.confirmAllRegulations()
    
    // 更新本地数据状态
    tableData.value.forEach(item => {
      item.confirmStatus = 'confirmed'
    })
    
    Message.success('已确认所有待确认的制度')
  } catch (error) {
    console.error('批量确认失败:', error)
    Message.error('确认失败')
  }
}

// 提交确认
const submitConfirm = async () => {
  if (!agreeTerms.value) {
    Message.warning('请先同意承诺条款')
    return
  }
  
  try {
    if (currentRegulation.value) {
      await regulationApi.confirmRegulation(currentRegulation.value.regulationId, {
        agreeTerms: agreeTerms.value
      })
      
      Message.success('确认成功，您已承诺遵守该制度')
      confirmModalVisible.value = false
      
      // 更新本地数据状态
      const index = tableData.value.findIndex(item => item.regulationId === currentRegulation.value.regulationId)
      if (index !== -1) {
        tableData.value[index].confirmStatus = 'confirmed'
      }
    }
  } catch (error) {
    console.error('确认失败:', error)
    Message.error('确认失败')
  }
}

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

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

.regulation-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;
    }
  }
  
  .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;
  }
}

.confirm-content {
  p {
    margin-bottom: 16px;
    color: var(--color-text-1);
    line-height: 1.6;
  }
  
  ul {
    margin-bottom: 20px;
    padding-left: 20px;
    
    li {
      margin-bottom: 8px;
      color: var(--color-text-2);
      line-height: 1.5;
    }
  }
}
</style> 