<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
import { useRouterPush } from '@/hooks/common/router'

const { routerPushByKey } = useRouterPush()

const activityName = ref('规则介绍')
const rulesContent = ref('')

const mockContent = `<p>本轮环节共有4道题目,分别是“<strong>诗词理解</strong>”、“<strong>联想对对碰</strong>”、“<strong>逆向接诗句</strong>”、“<strong>情景猜诗句</strong>”</p><p>阅读完题目介绍，主持人点击“<strong>开始作答</strong>”后均在答题本田字格上作答</p><p><br></p><p> “<strong>诗词理解</strong>” 根据题目选择正确答案</p><p> “<strong>联想对对碰</strong>” 根据关键信息写出完整诗句</p><p> “<strong>逆向接诗句</strong>” 根据关键信息写出关联诗句</p><p> “<strong>情景猜诗句</strong>” 根据情景写出关联诗句</p><p><br></p><p><span style=\"background-color: rgb(89, 191, 192);\">答题倒计时结束后，界面自动跳转到下一题</span></p>
`

onMounted(() => {
  setTimeout(() => {
    rulesContent.value = mockContent
  }, 100)
})

function handleBack() {
  routerPushByKey('user_cover')
}

function handleNext() {
  routerPushByKey('user_draw')
}
</script>

<template>
  <CompetitionLayout
    :show-back="true"
    :show-next="true"
    :title="activityName"
    @back="handleBack"
    @next="handleNext"
  >
    <div class="items-flex-start h-full w-full flex justify-center font-sans">
      <div class="rules-content-wrapper">
        <div class="rules-container" v-html="rulesContent" />
      </div>
    </div>
  </CompetitionLayout>
</template>

<style lang="scss" scoped>
@import '@/styles/scss/variables.scss';

.rules-content-wrapper {
  width: 100%;
  max-height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-color;

  :deep(.rules-container) {
    margin-top: 10px;
    font-size: 28px;
    line-height: 2;
    // color: #5d4037; // Dark brown/grey text

    .intro-text {
      margin-bottom: 30px;
    }

    .rules-list {
      margin: 40px 0;

      p {
        margin: 15px 0;
      }
    }

    .footer-text {
      margin-top: 40px;
      opacity: 0.8;
    }
  }
}
</style>
