<script lang="ts" setup>
import { ref } from 'vue';
import { ElCard, ElTag, ElButton, ElImage, ElTabs, ElTabPane } from 'element-plus';

// 检查项类型定义
interface CheckItem {
  id: number;
  title: string;
  description: string;
  isRequired: boolean;
  images: string[];
  score: number;
  totalScore: number;
  items?: CheckItem[];
}

// 区域类型定义
type AreaType = '前庭' | '后庭' | '便利店' | '卫生间' | '其他';

// 当前选中的区域
const activeArea = ref<AreaType>('前庭');

// 区域数据
const areaData = ref<Record<AreaType, CheckItem[]>>({
  // 前庭数据
  '前庭': [
    {
      id: 1,
      title: '【停车】',
      description: '车辆需停在指定区域，无阻碍、无违章',
      isRequired: true,
      images: ['/images/parking1.jpg', '/images/parking2.jpg'],
      score: 0,
      totalScore: 0,
      items: [
        {
          id: 11,
          title: '【停车】入口车辆需停在指定区域，无阻碍、无违章',
          description: '必检（必填项）',
          isRequired: true,
          images: ['/images/parking-entrance1.jpg', '/images/parking-entrance2.jpg'],
          score: 0,
          totalScore: 0,
        }
      ]
    },
    {
      id: 2,
      title: '【卫生】',
      description: '生活服务区1米内地面无杂物、垃圾、地面需清洗干净、无积水、无积油、无积灰',
      isRequired: true,
      images: ['/images/clean1.jpg', '/images/clean2.jpg', '/images/clean3.jpg', '/images/clean4.jpg', '/images/clean5.jpg', '/images/clean6.jpg'],
      score: 0,
      totalScore: 0,
      items: [
        {
          id: 21,
          title: '【卫生】生活服务区1米内地面无杂物、垃圾、地面需清洗干净、无积水、无积油、无积灰',
          description: '设配编号:101',
          isRequired: true,
          images: ['/images/sanitary1.jpg', '/images/sanitary2.jpg', '/images/sanitary3.jpg', '/images/sanitary4.jpg', '/images/sanitary5.jpg', '/images/sanitary6.jpg'],
          score: 0,
          totalScore: 0,
        }
      ]
    }
  ],
  // 后庭数据
  '后庭': [
    {
      id: 3,
      title: '【安全】',
      description: '加油岛消防器材是否按规定摆放并检查合格',
      isRequired: false,
      images: [],
      score: 0,
      totalScore: 0,
      items: [
        {
          id: 31,
          title: '【安全】加油岛消防器材是否按规定摆放并检查合格',
          description: '说明',
          isRequired: false,
          images: [],
          score: 0,
          totalScore: 0,
        }
      ]
    },
    {
      id: 4,
      title: '【设备】',
      description: '员工是否可以操作平衡车：具备统一证照、统一着装、袖口、领口、工牌、袖标、袖口、反光条、驾驶证',
      isRequired: true,
      images: [],
      score: 0,
      totalScore: 0,
      items: [
        {
          id: 41,
          title: '【设备】员工是否可以操作平衡车：具备统一证照、统一着装、袖口、领口、工牌、袖标、袖口、反光条、驾驶证',
          description: '说明',
          isRequired: true,
          images: [],
          score: 0,
          totalScore: 0,
        }
      ]
    }
  ],
  // 便利店数据
  '便利店': [
    {
      id: 5,
      title: '【环境】',
      description: '便利店卫生需整洁有序，无杂物、无灰尘',
      isRequired: true,
      images: ['/images/env1.jpg'],
      score: 0,
      totalScore: 0,
      items: [
        {
          id: 51,
          title: '【环境】便利店卫生需整洁有序，无杂物、无灰尘',
          description: '说明',
          isRequired: true,
          images: ['/images/env-detail1.jpg'],
          score: 0,
          totalScore: 0,
        }
      ]
    }
  ],
  // 卫生间数据
  '卫生间': [
    {
      id: 7,
      title: '【卫生】',
      description: '卫生间地面需保持清洁，无积水、无异味',
      isRequired: true,
      images: ['/images/toilet1.jpg', '/images/toilet2.jpg'],
      score: 0,
      totalScore: 0,
      items: [
        {
          id: 71,
          title: '【卫生】卫生间地面需保持清洁，无积水、无异味',
          description: '必检（必填项）',
          isRequired: true,
          images: ['/images/toilet-detail1.jpg', '/images/toilet-detail2.jpg'],
          score: 0,
          totalScore: 0,
        }
      ]
    }
  ],
  // 其他数据
  '其他': [
    {
      id: 6,
      title: '【综合】',
      description: '服务区内是否有禁止吸烟标识，员工是否佩戴工牌，着装是否符合要求，门口是否有禁止吸烟标识',
      isRequired: true,
      images: [],
      score: 0,
      totalScore: 0,
      items: [
        {
          id: 61,
          title: '【综合】服务区内是否有禁止吸烟标识，员工是否佩戴工牌，着装是否符合要求，门口是否有禁止吸烟标识',
          description: '说明',
          isRequired: true,
          images: [],
          score: 0,
          totalScore: 0,
        }
      ]
    }
  ]
});

// 获取当前区域的数据
const currentCheckList = ref<CheckItem[]>(areaData.value[activeArea.value]);

// 切换区域时更新数据
const handleAreaChange = (area: AreaType) => {
  activeArea.value = area;
  currentCheckList.value = areaData.value[area];
};

// 处理说明按钮点击
const handleExplain = (item: CheckItem) => {
  console.log('查看说明:', item);
};
</script>

<template>
  <div class="check-list-container">
    <!-- <ElCard class="check-list-card"> -->
      <!-- 顶部统计 -->
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
          <span class="text-sm text-gray-500">总分:</span>
          <span class="text-lg font-bold text-gray-800">0</span>
          <span class="text-sm text-gray-500">未达标项:</span>
          <span class="text-lg font-bold text-gray-800">0</span>
          <span class="text-sm text-gray-500">异常项:</span>
          <span class="text-lg font-bold text-gray-800">0</span>
        </div>
        <ElButton type="primary" size="small">
          上传
        </ElButton>
      </div>

      <!-- 区域切换Tabs -->
      <ElTabs v-model="activeArea" @tab-change="handleAreaChange" class="mb-6">
        <ElTabPane label="前庭" name="前庭" />
        <ElTabPane label="后庭" name="后庭" />
        <ElTabPane label="便利店" name="便利店" />
        <ElTabPane label="卫生间" name="卫生间" />
        <ElTabPane label="其他" name="其他" />
      </ElTabs>

      <!-- 检查项列表 -->
      <div class="check-items">
        <div v-for="item in currentCheckList" :key="item.id" class="mb-6">
          <!-- 子检查项 -->
          <div v-if="item.items && item.items.length > 0" class="space-y-4">
            <div v-for="(subItem, index) in item.items" :key="subItem.id" class="mb-4 p-4 border rounded-lg">
              <div class="flex items-start mb-2">
                <div class="text-sm font-medium mr-2">
                  {{ index + 1 }}.
                </div>
                <ElTag :type="subItem.isRequired ? 'danger' : 'warning'" size="small" class="mr-2">
                  {{ subItem.isRequired ? '必检' : '选检' }}
                </ElTag>
                <div class="flex-1">
                  <div class="font-medium text-sm">{{ subItem.title }}</div>
                  <div class="text-xs text-gray-500 mt-1">{{ subItem.description }}</div>
                </div>
              </div>

              <!-- 图片展示 -->
              <div v-if="subItem.images && subItem.images.length > 0" class="flex flex-wrap gap-2 mt-3">
                <ElImage
                  v-for="(img, index) in subItem.images"
                  :key="index"
                  :src="img"
                  :preview-src-list="subItem.images"
                  class="check-image"
                  fit="cover"
                />
              </div>

              <!-- 评分信息 -->
              <!-- <div class="flex items-center mt-3 text-sm">
                <div class="mr-4">
                  <span class="text-gray-500">得分:</span>
                  <span class="font-medium ml-1">{{ subItem.score }}</span>
                </div>
                <div>
                  <span class="text-gray-500">总分:</span>
                  <span class="font-medium ml-1">{{ subItem.totalScore }}</span>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航 -->
      <!-- <div class="flex justify-center items-center mt-8 space-x-4">
        <ElButton type="primary" size="small">上一个</ElButton>
        <ElButton type="primary" size="small">下一个</ElButton>
      </div> -->
    <!-- </ElCard> -->
  </div>
</template>

<style scoped lang="scss">
.check-list-container {
  width: 100%;
}

.check-list-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.check-items {
  /* 移除滚动条限制，让内容根据数据高度自适应 */
}

.check-image {
  width: 80px;
  height: 60px;
  border-radius: 4px;
  cursor: pointer;
}

.check-image:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
</style>
