<template>
  <GiPageLayout style="width: 100%; height: 100%; overflow: hidden;"> 
    <div class="safety-container">
      <!-- 安全会议管理 -->
      <div class="safety-section">
        <div class="section-header" @click="toggleSection('meeting')">
          <h3>安全会议管理</h3>
          <div class="header-actions">
            <a-button type="primary" @click.stop="openMeetingModal" :class="{ 'hidden': !meetingExpanded }">新增安全会议</a-button>
            <icon-right 
              :class="['collapse-icon', { 'expanded': meetingExpanded }]"
            />
          </div>
        </div>
        
        <div v-show="meetingExpanded" class="section-content">
          <GiTable
            row-key="id"
            :data="meetingList"
            :columns="meetingColumns"
            :loading="meetingLoading"
            :pagination="false"
            :show-header="true"
            :bordered="false"
            size="medium"
          >
            <template #action="{ record }">
              <a-space>
                <a-link @click="viewMeeting(record)">查看</a-link>
                <a-link @click="editMeeting(record)">编辑</a-link>
              </a-space>
            </template>
          </GiTable>
        </div>
      </div>

      <!-- 风险点管控 -->
      <div class="safety-section">
        <div class="section-header" @click="toggleSection('risk')">
          <h3>风险点管控</h3>
          <div class="header-actions">
            <a-button type="primary" @click.stop="openRiskModal" :class="{ 'hidden': !riskExpanded }">新增风险点</a-button>
            <icon-right 
              :class="['collapse-icon', { 'expanded': riskExpanded }]"
            />
          </div>
        </div>
        
        <div v-show="riskExpanded" class="section-content">
          <GiTable
            row-key="id"
            :data="riskList"
            :columns="riskColumns"
            :loading="riskLoading"
            :pagination="false"
            :show-header="true"
            :bordered="false"
            size="medium"
          >
            <template #riskLevel="{ record }">
              <a-tag :color="getRiskLevelColor(record.riskLevel)">
                {{ record.riskLevel }}
              </a-tag>
            </template>
            <template #action="{ record }">
              <a-space>
                <a-link @click="viewRisk(record)">查看</a-link>
                <a-link @click="editRisk(record)">编辑</a-link>
              </a-space>
            </template>
          </GiTable>
        </div>
      </div>

      <!-- 安全培训考试 -->
      <div class="safety-section">
        <div class="section-header" @click="toggleSection('training')">
          <h3>安全培训考试</h3>
          <div class="header-actions">
            <a-button type="primary" @click.stop="openTrainingModal" :class="{ 'hidden': !trainingExpanded }">新增培训计划</a-button>
            <icon-right 
              :class="['collapse-icon', { 'expanded': trainingExpanded }]"
            />
          </div>
        </div>
        
        <div v-show="trainingExpanded" class="section-content">
          <GiTable
            row-key="id"
            :data="trainingList"
            :columns="trainingColumns"
            :loading="trainingLoading"
            :pagination="false"
            :show-header="true"
            :bordered="false"
            size="medium"
          >
            <template #status="{ record }">
              <a-tag :color="getTrainingStatusColor(record.status)">
                {{ record.status }}
              </a-tag>
            </template>
            <template #action="{ record }">
              <a-space>
                <a-link @click="viewTraining(record)">查看</a-link>
                <a-link @click="editTraining(record)">编辑</a-link>
              </a-space>
            </template>
          </GiTable>
        </div>
      </div>

      <!-- 工艺流程安全控制 -->
      <div class="safety-section">
        <div class="section-header" @click="toggleSection('workflow')">
          <h3>工艺流程安全控制</h3>
          <div class="header-actions">
            <a-button type="primary" @click.stop="openWorkflowModal" :class="{ 'hidden': !workflowExpanded }">新增工艺流程</a-button>
            <icon-right 
              :class="['collapse-icon', { 'expanded': workflowExpanded }]"
            />
          </div>
        </div>
        
        <div v-show="workflowExpanded" class="section-content">
          <GiTable
            row-key="id"
            :data="workflowList"
            :columns="workflowColumns"
            :loading="workflowLoading"
            :pagination="false"
            :show-header="true"
            :bordered="false"
            size="medium"
          >
            <template #action="{ record }">
              <a-space>
                <a-link @click="viewWorkflow(record)">查看</a-link>
                <a-link @click="editWorkflow(record)">编辑</a-link>
              </a-space>
            </template>
          </GiTable>
        </div>
      </div>
    </div>

    <!-- 新增安全会议弹窗 -->
    <SafetyMeetingModal 
      v-model:visible="meetingModalVisible"
      @save-success="handleMeetingSuccess"
    />
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'
import SafetyMeetingModal from './components/SafetyMeetingModal.vue'

// 折叠状态管理
const meetingExpanded = ref(false)
const riskExpanded = ref(false)
const trainingExpanded = ref(true) // 默认展开安全培训考试模块
const workflowExpanded = ref(false)

// 切换模块展开/折叠状态
const toggleSection = (section: string) => {
  switch (section) {
    case 'meeting':
      meetingExpanded.value = !meetingExpanded.value
      break
    case 'risk':
      riskExpanded.value = !riskExpanded.value
      break
    case 'training':
      trainingExpanded.value = !trainingExpanded.value
      break
    case 'workflow':
      workflowExpanded.value = !workflowExpanded.value
      break
  }
}

// 安全会议数据
const meetingList = ref([
  {
    id: 1,
    subject: '风电项目安全工作会议',
    meetingTime: '2023-06-10 14:00',
    organizer: '张三',
    participants: 8
  },
  {
    id: 2,
    subject: '高空作业安全培训',
    meetingTime: '2023-06-15 09:30',
    organizer: '李四',
    participants: 12
  },
  {
    id: 3,
    subject: '设备使用安全规范',
    meetingTime: '2023-06-20 10:00',
    organizer: '王五',
    participants: 10
  }
])

const meetingColumns: TableColumnData[] = [
  { title: '会议主题', dataIndex: 'subject', width: 200 },
  { title: '会议时间', dataIndex: 'meetingTime', width: 180 },
  { title: '组织者', dataIndex: 'organizer', width: 100 },
  { title: '参与人数', dataIndex: 'participants', width: 100 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 风险点数据
const riskList = ref([
  {
    id: 1,
    riskName: '高空坠落风险',
    project: '风电塔下检测项目',
    riskLevel: '高',
    responsible: '张三'
  },
  {
    id: 2,
    riskName: '设备操作风险',
    project: '叶片维修项目',
    riskLevel: '中',
    responsible: '李四'
  },
  {
    id: 3,
    riskName: '电气安全风险',
    project: '光伏巡检项目',
    riskLevel: '低',
    responsible: '王五'
  }
])

const riskColumns: TableColumnData[] = [
  { title: '风险点名称', dataIndex: 'riskName', width: 150 },
  { title: '所属项目', dataIndex: 'project', width: 200 },
  { title: '风险等级', dataIndex: 'riskLevel', slotName: 'riskLevel', width: 100 },
  { title: '责任人', dataIndex: 'responsible', width: 100 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 安全培训数据
const trainingList = ref([
  {
    id: 1,
    subject: '高空作业安全培训',
    type: '现场培训',
    trainingTime: '2023-06-15',
    participants: 12,
    status: '已完成'
  },
  {
    id: 2,
    subject: '设备安全操作培训',
    type: '在线培训',
    trainingTime: '2023-06-25',
    participants: 15,
    status: '进行中'
  },
  {
    id: 3,
    subject: '应急处理培训',
    type: '现场培训',
    trainingTime: '2023-07-05',
    participants: 10,
    status: '未开始'
  }
])

const trainingColumns: TableColumnData[] = [
  { title: '培训主题', dataIndex: 'subject', width: 150 },
  { title: '培训类型', dataIndex: 'type', width: 100 },
  { title: '培训时间', dataIndex: 'trainingTime', width: 120 },
  { title: '参与人数', dataIndex: 'participants', width: 100 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 工艺流程数据
const workflowList = ref([
  {
    id: 1,
    processName: '风电塔检测流程',
    project: '风电塔下检测项目',
    riskPoints: 3,
    responsible: '张三'
  },
  {
    id: 2,
    processName: '叶片维修流程',
    project: '叶片维修项目',
    riskPoints: 5,
    responsible: '李四'
  },
  {
    id: 3,
    processName: '光伏巡检流程',
    project: '光伏巡检项目',
    riskPoints: 2,
    responsible: '王五'
  }
])

const workflowColumns: TableColumnData[] = [
  { title: '流程名称', dataIndex: 'processName', width: 150 },
  { title: '所属项目', dataIndex: 'project', width: 200 },
  { title: '风险点数量', dataIndex: 'riskPoints', width: 120 },
  { title: '责任人', dataIndex: 'responsible', width: 100 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 加载状态
const meetingLoading = ref(false)
const riskLoading = ref(false)
const trainingLoading = ref(false)
const workflowLoading = ref(false)

// 弹窗状态
const meetingModalVisible = ref(false)

// 获取风险等级颜色
const getRiskLevelColor = (level: string) => {
  const colorMap: Record<string, string> = {
    '高': 'red',
    '中': 'orange',
    '低': 'green'
  }
  return colorMap[level] || 'gray'
}

// 获取培训状态颜色
const getTrainingStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    '已完成': 'green',
    '进行中': 'orange',
    '未开始': 'blue'
  }
  return colorMap[status] || 'gray'
}

// 安全会议操作
const openMeetingModal = () => {
  meetingModalVisible.value = true
}

const handleMeetingSuccess = () => {
  // 刷新会议列表
  Message.success('安全会议创建成功')
}

const viewMeeting = (record: any) => {
  Message.info(`查看会议: ${record.subject}`)
}

const editMeeting = (record: any) => {
  Message.info(`编辑会议: ${record.subject}`)
}

// 风险点操作
const openRiskModal = () => {
  Message.info('新增风险点功能开发中...')
}

const viewRisk = (record: any) => {
  Message.info(`查看风险点: ${record.riskName}`)
}

const editRisk = (record: any) => {
  Message.info(`编辑风险点: ${record.riskName}`)
}

// 安全培训操作
const openTrainingModal = () => {
  Message.info('新增培训计划功能开发中...')
}

const viewTraining = (record: any) => {
  Message.info(`查看培训: ${record.subject}`)
}

const editTraining = (record: any) => {
  Message.info(`编辑培训: ${record.subject}`)
}

// 工艺流程操作
const openWorkflowModal = () => {
  Message.info('新增工艺流程功能开发中...')
}

const viewWorkflow = (record: any) => {
  Message.info(`查看工艺流程: ${record.processName}`)
}

const editWorkflow = (record: any) => {
  Message.info(`编辑工艺流程: ${record.processName}`)
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.safety-container {
  height: 100%;
  overflow-y: auto;
  padding: 0;
}

.safety-section {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e6eb;
  cursor: pointer;
  user-select: none;
}

.section-header:hover {
  background-color: rgba(0, 0, 0, 0.02);
  margin: -8px;
  padding: 8px 8px 16px 8px;
  border-radius: 4px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions .hidden {
  display: none;
}

.collapse-icon {
  font-size: 16px;
  color: #86909c;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.collapse-icon.expanded {
  transform: rotate(90deg);
}

.section-content {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.arco-table-thead) {
  background-color: #f7f8fa;
}

:deep(.arco-table-th) {
  background-color: #f7f8fa;
  color: #4e5969;
  font-weight: 600;
}

:deep(.arco-table-td) {
  border-bottom: 1px solid #e5e6eb;
}

:deep(.arco-table-tr:hover .arco-table-td) {
  background-color: #f7f8fa;
}
</style> 