<template>
  <Container backBtn logoutBtn @handleBack="handleBack">
    <template #main>
      <view class="theme-page">
        <view class="card">
          <view class="title">主题取号</view>
          <view class="btn-group">
            <view class="btn-item" v-for="(item, index) in themeList" :key="index" @click="handleSelect(item)">
              {{ item.subjectName }}
            </view>
          </view>
        </view>
      </view>
    </template>
  </Container>
</template>

<script>
import Container from '@/components/container/container.vue'
import { getThemeList } from '@/api/ticket.js'

export default {
  components: {
    Container
  },
  data() {
    return {
      themeList: []
    }
  },
  computed: {
    idcard() {
      return uni.getStorageSync('idcard') || ''
    }
  },
  mounted() {
    this.fetchThemeList()
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    },

    handleSelect(item) {
      uni.navigateTo({
        url: `/pages/home/businessList?source=subject&subjectId=${item.id}&subjectName=${item.subjectName}`
      })
    },

    async fetchThemeList() {
      try {
        const res = await getThemeList({ status: 1 })
        if (res.success && res.data) {
          this.themeList = res.data.records || []
        }
      } catch (e) {
        console.error('获取主题列表失败', e)
      }
    }
  }
}
</script>

<style scoped>
.theme-page {
  width: 100%;
  height: 100%;
  padding: 15vh 5vw 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.card {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 5vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4vh 3vw;
}

.title {
  font-size: 2.5vw;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 5vh;
}

.btn-group {
  width: 100%;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.btn-item {
  margin: 0 2vw 2vw 0;
  padding: 1.5vh 1.5vw;
  width: 19vw;
  height: 11vh;
  text-align: center;
  background: rgba(236, 243, 255, 1);
  border-radius: 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  color: rgba(51, 51, 51, 1);
  cursor: pointer;
}

.btn-item:nth-child(4n) {
  margin-right: 0;
}
</style>
