<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';

import { ElImage, ElTabPane, ElTabs, ElTag } from 'element-plus';

import {
  getCheckSubItemsByTaskId,
  getChecktItemsByTaskId,
  // @ts-ignore
} from '#/api/task/check';

// 接收任务信息
const props = defineProps({
  taskDetail: {
    type: Object,
    default: () => {},
  },
});

// 区域类型定义

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

// 获取当前区域的数据
const currentCheckList: any = ref([]);

// 切换区域时更新数据
const handleAreaChange = (area: any) => {
  activeArea.value = area;
  currentCheckList.value =
    checkSubItems.value.find((item: any) => item.id === area)?.items || [];
};

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

const checkSubItems: any = ref([]);

const init = () => {
  // 并发获取数据
  Promise.all([
    getChecktItemsByTaskId({
      checkId: props.taskDetail.id,
    }),
    getCheckSubItemsByTaskId({
      checkId: props.taskDetail.id,
    }),
  ]).then(([checkItemsRes, checkSubItemsRes]) => {
    // 处理检查项数据
    checkSubItems.value = checkSubItemsRes.rows || [];
    checkSubItems.value.forEach((item: any) => {
      item.items =
        checkItemsRes.rows?.filter(
          (subItem: any) => subItem.subItemId === item.id,
        ) || [];
    });
    // 更新检查项数据
    activeArea.value = checkSubItems.value[0].id;
    currentCheckList.value = checkSubItems.value[0].items || [];
  });
};

const getPhotos = (item: any): Array<{ isExample: boolean; url: string }> => {
  const list: Array<{ isExample: boolean; url: string }> = (
    item.exampleImageUrl || []
  ).map((url: string) => ({
    url,
    isExample: true,
  }));
  (item.photoUrl || []).forEach((url: string) => {
    list.push({
      url,
      isExample: false,
    });
  });

  return list;
};

// 监听taskDetail.id变化
watch(
  () => props.taskDetail.id,
  (newId) => {
    if (newId) {
      // 初始化检查项数据
      // checkItems.value = props.taskDetail.checkItems || [];
      init();
    }
  },
);

onMounted(() => {
  init();
});
</script>

<template>
  <div class="check-list-container">
    <!-- <ElCard class="check-list-card"> -->
    <!-- 顶部统计 -->
    <div class="mb-6 flex items-center justify-between">
      <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">
          {{ taskDetail.score }}
        </span>
        <span class="text-sm text-gray-500">无拍照数:</span>
        <span class="text-lg font-bold text-gray-800">
          {{ taskDetail.noPhotoNumber }}
        </span>
        <span class="text-sm text-gray-500">异常总数:</span>
        <span class="text-lg font-bold text-gray-800">
          {{ taskDetail.abnormalNumber }}
        </span>
      </div>
      <!-- <ElButton type="primary" size="small"> 上传 </ElButton> -->
    </div>

    <!-- 区域切换Tabs -->
    <ElTabs v-model="activeArea" @tab-change="handleAreaChange" class="mb-6">
      <ElTabPane
        v-for="item in checkSubItems"
        :label="item.name"
        :name="item.id"
        :key="item.id"
      />
    </ElTabs>

    <!-- 检查项列表 -->
    <div class="check-items">
      <div
        v-for="(item, index) in currentCheckList"
        :key="item.id"
        class="mb-6"
      >
        <!-- 子检查项 -->
        <div class="space-y-4">
          <div class="mb-4 rounded-lg border p-4">
            <div class="mb-2 flex items-start">
              <div class="mr-2 text-sm font-medium">{{ +index + 1 }}.</div>
              <ElTag
                :type="item.result === '1' ? 'success' : 'danger'"
                size="small"
                class="mr-2"
              >
                {{ item.result === '1' ? '正常' : '异常' }}
              </ElTag>
              <div class="flex-1">
                <div class="text-sm font-medium">{{ item.itemName }}</div>
                <div
                  v-if="item.hasPhoto === 2"
                  class="mt-1 text-xs text-gray-500"
                >
                  {{ '必拍' }}
                </div>
              </div>
            </div>

            <!-- 图片展示 -->
            <div v-if="item.hasPhoto > 0" class="mt-3 flex flex-wrap gap-2">
              <div
                v-for="(img, imgIndex) in getPhotos(item)"
                :key="imgIndex"
                class="relative"
              >
                <ElImage
                  :src="img.url"
                  :preview-src-list="
                    (getPhotos(item) || []).map((photo) => photo.url)
                  "
                  class="check-image"
                  fit="cover"
                />
                <ElTag
                  :type="img.isExample ? 'info' : 'success'"
                  size="small"
                  class="absolute right-0 top-0 z-10"
                  style="
                    background-color: rgba(255, 255, 255, 0.3);
                    border: none;
                    color: white;
                  "
                >
                  {{ img.isExample ? '示例' : '拍照' }}
                </ElTag>
              </div>
            </div>

            <div v-else>
              <div class="text-xs text-gray-500">
                {{ item.inputItem || '暂无' }}
              </div>
            </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>
