<template>
  <home-container>
    <div class="exam-list-container">
      <h-search v-model="keyword" placeholder="请输入测试名称" :showAction="true" actionText="搜索" @search="handleSearch"
        @custom="handleSearch" @clear="handleClear" />

      <!-- 每日答题入口 -->
      <!-- <div class="daily-exam-entry" @click="gotoDailyExam">
        <div class="daily-exam-icon">📝</div>
        <div class="daily-exam-content">
          <div class="daily-exam-title">每日答题</div>
          <div class="daily-exam-desc">每天坚持练习，提升业务能力</div>
        </div>
        <div class="daily-exam-arrow">›</div>
      </div> -->

      <div class="tabs">
        <div v-for="item in tabList" :key="item.type" :class="{ active: item.type === currentTab }" class="tabs-item"
          @click="tabClick(item)">
          {{ item.title }}
        </div>
      </div>

      <div class="exam-list">
        <div v-for="item in filteredExamList" :key="item.id" class="exam-item">
          <div class="exam-item-title">
            {{ item.title }}
            <div :class="item.status" class="exam-item-status">
              {{ statusMap[item.status] }}
            </div>
          </div>
          <div class="exam-item-desc">
            <div class="exam-item-desc-item time">{{ item.time/60 }}分钟</div>
            <!-- <div class="exam-item-desc-item date">{{ item.date }}</div> -->
            <!-- <div class="exam-item-desc-item level">{{ item.level }}</div> -->
          </div>
          <div class="exam-item-btn">
            <div class="exam-item-btn-score">
              <span>{{ item.questionNum }}题</span>
              <span v-if="item.status === 'done'">
                <i>{{ item.score }}分</i>
                /{{ item.allScore }}分
              </span>
              <span v-if="item.status !== 'done'">{{ item.allScore }}分</span>
            </div>
            <span v-if="item.status === 'pending'" class="btn" @click="handleSubmit(item)">开始测试</span>
            <span v-if="item.status === 'done'" class="btn done" @click="handleSubmit(item)">查看详情</span>
            <span v-if="item.status === 'timeout'" class="btn timeout">已过期</span>
          </div>
        </div>
      </div>
    </div>
  </home-container>
</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";
import { serializeData } from "@/utils/common";
import { getExamRecordList } from "@/api/exam/exam"
import { getUserExamRecordList } from "@/api/exam/exam"



export default {
  components: { HomeContainer, },
  data() {
    return {
      keyword: '',
      filteredExamList: [],

      tabList: [
        {
          type: 'all',
          title: '全部'
        },
        {
          type: 'pending',
          title: '待测试'
        },
        {
          type: 'done',
          title: '已完成'
        },
        {
          type: 'timeout',
          title: '已过期'
        }
      ],
      currentTab: 'all',
      statusMap: {
        pending: '待测试',
        done: '已完成',
        timeout: '已过期'
      },
      examList: [
        // {
        //   id: 1,
        //   title: '2025年第二季度安全知识考核',
        //   status: 'pending',
        //   time: '60分钟',
        //   date: '截止日期',
        //   level: '中级',
        //   questionNum: 20,
        //   allScore: '100'
        // },
        // {
        //   id: 2,
        //   title: '行李安检新技术培训考核',
        //   status: 'done',
        //   time: '60分钟',
        //   date: '截止日期',
        //   level: '中级',
        //   questionNum: 20,
        //   allScore: '100',
        //   score: '80'
        // },
        // {
        //   id: 3,
        //   title: '2025年第二季度安全知识考核',
        //   status: 'timeout',
        //   time: '60分钟',
        //   date: '截止日期',
        //   level: '中级',
        //   questionNum: 20,
        //   allScore: '100'
        // }
      ]
    }
  },
  mounted() {
    // this.initDate(); // 初始化数据
    // this.filterExamList(); // 首次过滤
  },
  async onLoad(options) {
    this.status = options.status;
    await this.initDate();
    this.filterExamList(); // 首次过滤


  },
  methods: {
    handleSearch(val) {
      console.log("val",val)
      if (!val) {
        this.filteredExamList = [...this.examList];
        return;
      }
      // 本地模糊匹配
      this.filteredExamList = this.examList.filter(item =>
        item.title.includes(val)
      );
      console.log("this.filteredExamList",this.filteredExamList)
    },
    handleClear() {
      this.keyword = '';
      this.filteredExamList = [...this.examList];
    },
    tabClick(tab) {
      this.currentTab = tab.type; // 记录当前激活的 tab
      this.filterExamList();
    },
    filterExamList() {
      if (this.currentTab === 'all') {
        // 显示全部
        this.filteredExamList = [...this.examList];
      } else {
        // 只显示当前状态
        this.filteredExamList = this.examList.filter(item => item.status === this.currentTab);
      }
    },
    handleSubmit(item) {
      console.info("🚀🚀 ~ file:index line:122 -----", item)
      uni.navigateTo({
        url: '/pages/exam/index' + serializeData({
          id: item.id,
          status: item.status,
          erId: item.erId,
          exTime: item.time/60
        }),
      });
    },
    gotoDailyExam() {
      uni.navigateTo({
        url: '/pages/daily-exam/task-list/index'
      });
    },
    async initDate() {
      try {

        const response1 = await getUserExamRecordList({ "clientType": "client_type_kg_app" });
        const nameToIdMap = new Map(
          (response1.model?.list || []).map(r => [r.erExId, {"erId":r.erId,"score":r.erScore}])
        );
        console.log("nameToIdMap", nameToIdMap)

        const response = await getExamRecordList({ "clientType": "client_type_kg_app", "pageNum": 1, "pageSize": 20 });
        console.log("response", response)
        this.examList = response.model.list.map(item => ({
          id: item.exId,
          title: item.exName,
          status: nameToIdMap.has(item.exId) ? 'done' : 'pending',
          time: item.exExamTime,
          date: '截止日期',
          level: '中级',
          questionNum: item.tpQuesNum,
          allScore: item.tpTotalScore,
          score: nameToIdMap.get(item.exId)?.score || 0,
          erId: nameToIdMap.get(item.exId)?.erId || null
        }));
      } catch (error) {
        console.error('获取测试记录失败', error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.exam-list-container {
  padding: 200rpx 0 0;

  .daily-exam-entry {
    display: flex;
    align-items: center;
    padding: 32rpx;
    margin: 32rpx 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    box-shadow: 0 8rpx 20rpx 0 rgba(102, 126, 234, 0.3);

    .daily-exam-icon {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16rpx;
      margin-right: 24rpx;
    }

    .daily-exam-content {
      flex: 1;

      .daily-exam-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 40rpx;
        margin-bottom: 8rpx;
      }

      .daily-exam-desc {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
        line-height: 32rpx;
      }
    }

    .daily-exam-arrow {
      font-size: 64rpx;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1;
    }
  }

  .tabs {
    display: flex;
    padding: 62rpx 0 32rpx;
    margin-top: 32rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 32rpx;
    gap: 48rpx;

    .tabs-item {
      position: relative;


      &:after {
        content: "";
        position: absolute;
        bottom: -12rpx;
        left: 0;
        width: 100%;
        height: 6rpx;
        background: #fff;
        border-radius: 12rpx;
        ;
      }

      &.active {
        font-size: 36rpx;
        color: #2A70D1;
        line-height: 42rpx;

        &:after {
          background: #2A70D1;
        }
      }
    }
  }

  .exam-list {
    .exam-item {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 40rpx;
      background: #FFFFFF;
      box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.08);
      border-radius: 16rpx;
      border: 2rpx solid #F0F8FF;
      margin-top: 32rpx;
    }

    .exam-item-title {
      display: flex;
      justify-content: space-between;
      font-size: 32rpx;
      color: #333333;
      line-height: 38rpx;

      .exam-item-status {
        background: rgba(42, 112, 209, 0.12);
        border-radius: 80rpx;
        padding: 8rpx 28rpx;
        font-size: 24rpx;
        color: #2A70D1;
        line-height: 28rpx;

        &.done {
          background: rgba(78, 166, 26, 0.12);
          color: #4EA61A;
        }

        &.timeout {
          background: rgba(234, 73, 73, 0.12);
          color: #EA4949;
        }
      }
    }

    .exam-item-desc {
      display: flex;
      gap: 48rpx;
      margin: 40rpx 0 30rpx;

      .exam-item-desc-item {
        display: flex;
        padding-left: 40rpx;
        position: relative;

        &:after {
          content: "";
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          background: url("../../static/images/clock-icon.png");
          background-size: 32rpx;
        }

        &.date {
          &:after {
            background-image: url("../../static/images/date-icon.png");
          }
        }

        &.level {
          &:after {
            background-image: url("../../static/images/level-icon.png");
          }
        }
      }
    }

    .exam-item-btn {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #666666;
      line-height: 32rpx;
      align-items: flex-end;

      .exam-item-btn-score {
        display: flex;
        gap: 40rpx;
        align-items: flex-end;

        i {
          font-style: normal;
          font-size: 36rpx;
          color: #4CA518;
          line-height: 44rpx;
        }
      }

      .btn {
        padding: 10rpx 28rpx;
        background: #2A70D1;
        border-radius: 80rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 28rpx;
        border: 2px solid #FFFFFF;

        &.done {
          background: #FFFFFF;
          border-color: #2A70D1;
          color: #2A70D1;
        }

        &.timeout {
          background: #FFFFFF;
          border-color: #C4C4C5;
          color: #999999;
        }
      }
    }
  }
}
</style>