<template>
  <GiPageLayout style="width: 100%; height: 100%; overflow: hidden;"> 
    <div class="quality-container">
      <!-- 质量会议管理 -->
      <div class="quality-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="quality-section">
        <div class="section-header" @click="toggleSection('dataQuality')">
          <h3>数据质量管理</h3>
          <div class="header-actions">
            <a-button type="primary" @click.stop="openDataQualityModal" :class="{ 'hidden': !dataQualityExpanded }">新增数据质量检查</a-button>
            <icon-right 
              :class="['collapse-icon', { 'expanded': dataQualityExpanded }]"
            />
          </div>
        </div>
        
        <div v-show="dataQualityExpanded" class="section-content">
          <GiTable
            row-key="id"
            :data="dataQualityList"
            :columns="dataQualityColumns"
            :loading="dataQualityLoading"
            :pagination="false"
            :show-header="true"
            :bordered="false"
            size="medium"
          >
            <template #checkResult="{ record }">
              <a-tag :color="getCheckResultColor(record.checkResult)">
                {{ record.checkResult }}
              </a-tag>
            </template>
            <template #action="{ record }">
              <a-space>
                <a-link @click="viewDataQuality(record)">查看</a-link>
                <a-link @click="editDataQuality(record)">编辑</a-link>
              </a-space>
            </template>
          </GiTable>
        </div>
      </div>

      <!-- 质量标准管理 -->
      <div class="quality-section">
        <div class="section-header" @click="toggleSection('standard')">
          <h3>质量标准管理</h3>
          <div class="header-actions">
            <a-button type="primary" @click.stop="openStandardModal" :class="{ 'hidden': !standardExpanded }">新增质量标准</a-button>
            <icon-right 
              :class="['collapse-icon', { 'expanded': standardExpanded }]"
            />
          </div>
        </div>
        
        <div v-show="standardExpanded" class="section-content">
          <GiTable
            row-key="id"
            :data="standardList"
            :columns="standardColumns"
            :loading="standardLoading"
            :pagination="false"
            :show-header="true"
            :bordered="false"
            size="medium"
          >
            <template #action="{ record }">
              <a-space>
                <a-link @click="viewStandard(record)">查看</a-link>
                <a-link @click="editStandard(record)">编辑</a-link>
              </a-space>
            </template>
          </GiTable>
        </div>
      </div>

      <!-- 报告质量管理 -->
      <div class="quality-section">
        <div class="section-header" @click="toggleSection('reportQuality')">
          <h3>报告质量管理</h3>
          <div class="header-actions">
            <a-button type="primary" @click.stop="openReportQualityModal" :class="{ 'hidden': !reportQualityExpanded }">新增报告检查</a-button>
            <icon-right 
              :class="['collapse-icon', { 'expanded': reportQualityExpanded }]"
            />
          </div>
        </div>
        
        <div v-show="reportQualityExpanded" class="section-content">
          <GiTable
            row-key="id"
            :data="reportQualityList"
            :columns="reportQualityColumns"
            :loading="reportQualityLoading"
            :pagination="false"
            :show-header="true"
            :bordered="false"
            size="medium"
          >
            <template #checkResult="{ record }">
              <a-tag :color="getCheckResultColor(record.checkResult)">
                {{ record.checkResult }}
              </a-tag>
            </template>
            <template #action="{ record }">
              <a-space>
                <a-link @click="viewReportQuality(record)">查看</a-link>
                <a-link @click="editReportQuality(record)">编辑</a-link>
              </a-space>
            </template>
          </GiTable>
        </div>
      </div>
    </div>

    <!-- 新增质量会议弹窗 -->
    <QualityMeetingModal 
      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 QualityMeetingModal from './components/QualityMeetingModal.vue'

// 折叠状态管理
const meetingExpanded = ref(true) // 默认展开质量会议管理模块
const dataQualityExpanded = ref(false)
const standardExpanded = ref(false)
const reportQualityExpanded = ref(false)

// 切换模块展开/折叠状态
const toggleSection = (section: string) => {
  switch (section) {
    case 'meeting':
      meetingExpanded.value = !meetingExpanded.value
      break
    case 'dataQuality':
      dataQualityExpanded.value = !dataQualityExpanded.value
      break
    case 'standard':
      standardExpanded.value = !standardExpanded.value
      break
    case 'reportQuality':
      reportQualityExpanded.value = !reportQualityExpanded.value
      break
  }
}

// 质量会议数据
const meetingList = ref([
  {
    id: 1,
    subject: '风电项目质量分析会',
    meetingTime: '2023-06-12 14:00',
    organizer: '张三',
    participants: 8
  },
  {
    id: 2,
    subject: '检测数据质量评审',
    meetingTime: '2023-06-18 09:30',
    organizer: '李四',
    participants: 6
  },
  {
    id: 3,
    subject: '维修质量总结会',
    meetingTime: '2023-06-22 10:00',
    organizer: '王五',
    participants: 5
  }
])

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 dataQualityList = ref([
  {
    id: 1,
    projectName: '风电塔下检测项目',
    dataType: '检测数据',
    checker: '张三',
    checkTime: '2023-06-15',
    checkResult: '合格'
  },
  {
    id: 2,
    projectName: '叶片维修项目',
    dataType: '维修记录',
    checker: '李四',
    checkTime: '2023-06-20',
    checkResult: '不合格'
  },
  {
    id: 3,
    projectName: '光伏巡检项目',
    dataType: '巡检数据',
    checker: '王五',
    checkTime: '2023-06-25',
    checkResult: '合格'
  }
])

const dataQualityColumns: TableColumnData[] = [
  { title: '项目名称', dataIndex: 'projectName', width: 180 },
  { title: '数据类型', dataIndex: 'dataType', width: 120 },
  { title: '检查人', dataIndex: 'checker', width: 100 },
  { title: '检查时间', dataIndex: 'checkTime', width: 120 },
  { title: '检查结果', dataIndex: 'checkResult', slotName: 'checkResult', width: 120 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 质量标准管理数据
const standardList = ref([
  {
    id: 1,
    standardName: '风电塔监测量标准',
    standardType: '检测标准',
    version: 'V1.0',
    publishTime: '2023-01-15',
    responsible: '张三'
  },
  {
    id: 2,
    standardName: '叶片维修质量标准',
    standardType: '维修标准',
    version: 'V1.2',
    publishTime: '2023-03-20',
    responsible: '李四'
  },
  {
    id: 3,
    standardName: '光伏巡检质量标准',
    standardType: '巡检标准',
    version: 'V2.0',
    publishTime: '2023-05-10',
    responsible: '王五'
  }
])

const standardColumns: TableColumnData[] = [
  { title: '标准名称', dataIndex: 'standardName', width: 180 },
  { title: '标准类型', dataIndex: 'standardType', width: 120 },
  { title: '版本号', dataIndex: 'version', width: 100 },
  { title: '发布时间', dataIndex: 'publishTime', width: 120 },
  { title: '负责人', dataIndex: 'responsible', width: 100 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 报告质量管理数据
const reportQualityList = ref([
  {
    id: 1,
    projectName: '风电塔下检测项目',
    reportType: '检测报告',
    checker: '张三',
    checkTime: '2023-06-16',
    checkResult: '合格'
  },
  {
    id: 2,
    projectName: '叶片维修项目',
    reportType: '维修报告',
    checker: '李四',
    checkTime: '2023-06-21',
    checkResult: '合格'
  },
  {
    id: 3,
    projectName: '光伏巡检项目',
    reportType: '巡检报告',
    checker: '王五',
    checkTime: '2023-06-26',
    checkResult: '不合格'
  }
])

const reportQualityColumns: TableColumnData[] = [
  { title: '项目名称', dataIndex: 'projectName', width: 180 },
  { title: '报告类型', dataIndex: 'reportType', width: 120 },
  { title: '检查人', dataIndex: 'checker', width: 100 },
  { title: '检查时间', dataIndex: 'checkTime', width: 120 },
  { title: '检查结果', dataIndex: 'checkResult', slotName: 'checkResult', width: 120 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 加载状态
const meetingLoading = ref(false)
const dataQualityLoading = ref(false)
const standardLoading = ref(false)
const reportQualityLoading = ref(false)

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

// 获取检查结果颜色
const getCheckResultColor = (result: string) => {
  const colorMap: Record<string, string> = {
    '合格': 'green',
    '不合格': 'red'
  }
  return colorMap[result] || '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 openDataQualityModal = () => {
  Message.info('新增数据质量检查功能开发中...')
}

const viewDataQuality = (record: any) => {
  Message.info(`查看数据质量: ${record.projectName}`)
}

const editDataQuality = (record: any) => {
  Message.info(`编辑数据质量: ${record.projectName}`)
}

// 质量标准操作
const openStandardModal = () => {
  Message.info('新增质量标准功能开发中...')
}

const viewStandard = (record: any) => {
  Message.info(`查看质量标准: ${record.standardName}`)
}

const editStandard = (record: any) => {
  Message.info(`编辑质量标准: ${record.standardName}`)
}

// 报告质量操作
const openReportQualityModal = () => {
  Message.info('新增报告检查功能开发中...')
}

const viewReportQuality = (record: any) => {
  Message.info(`查看报告质量: ${record.projectName}`)
}

const editReportQuality = (record: any) => {
  Message.info(`编辑报告质量: ${record.projectName}`)
}

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

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

.quality-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> 