<template>
  <view class="level-page">
    <!-- 提示弹框 -->
    <custom-modal ref="tipModalRef" title="提示" :content="tipContent" :showCancel="false" confirmText="我知道了" @confirm="onTipConfirm" />

    <view class="hero">
      <image class="hero-bg" :src="config.baseUrl_api + '/fs/static/img/top.png'" mode="aspectFill"></image>
      <view class="hero-brand">
        <view class="brand-cn">中国跆拳道协会</view>
        <view class="brand-en">CHINESE TAEKWONDO ASSOCIATION</view>
      </view>
    </view>

    <view class="content-panel">
      <image class="panel-bg" :src="config.baseUrl_api + '/fs/static/img/red_bg2.png'" mode="scaleToFill"></image>
      <view class="panel-content">
        <view class="section-title">
          <view class="title-cn">级位考试</view>
          <view style="width:50rpx;height:8rpx;background:#C30D23;margin-top:20rpx;"></view>
          <view class="title-en">LEVEL EXAM</view>
        </view>

        <view class="level-grid">
          <image class="level-card" :src="config.baseUrl_api + '/fs/static/img/jw_btn01.png'" mode="aspectFit" @click="goToAddApply"></image>
          <image class="level-card" :src="config.baseUrl_api + '/fs/static/img/jw_btn02.png'" mode="aspectFit" @click="goPath('/personalVip/addChangeLevel')"></image>
          <image class="level-card" :src="config.baseUrl_api + '/fs/static/img/jw_btn03.png'" mode="aspectFit" @click="goPath('/level/apply')"></image>
          <image class="level-card" :src="config.baseUrl_api + '/fs/static/img/jw_btn04.png'" mode="aspectFit" @click="goPath('/personalVip/changeLevel')"></image>
        </view>
      </view>
    </view>

    <dao-guan-tab-bar :currentIndex="3" @switch="onTabSwitch" />
  </view>
</template>

<script setup>
import config from '@/config.js'
import DaoGuanTabBar from '@/components/dao-guan-tab-bar.vue'
import customModal from '@/components/custom-modal.vue'
import { ref } from 'vue'

const app = getApp()
const tipModalRef = ref(null)
const tipContent = ref('')

const onTabSwitch = () => {
  // tab switch handled by component
}

const goPath = (url) => {
  uni.navigateTo({ url })
}

function onTipConfirm() {
  // 关闭提示弹框
}

function goToAddApply() {
  const deptType = app.globalData.deptType
  const isPoints = app.globalData.memberInfo?.isPoints
  console.log('isPoints:', isPoints)

  // 如果 deptType == 1 且 isPoints != 1，弹出提示
  if (isPoints == 1) {
    tipContent.value = '当前暂未完成考点认证，如需开设级位考试，请先提交考点申请。'
    tipModalRef.value.open()
    return
  }

  // 否则正常跳转
  goPath('/level/addApply')
}
</script>

<style lang="scss" scoped>
.level-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: #ededf0;
  overflow-y: hidden;
  // padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.hero {
  position: relative;
  height: 1060rpx;
  overflow: hidden;
  z-index: 1;
}

.hero-bg {
  position: absolute;
  left: 0;
  top: -116px;
  width: 100%;
  height: 100%;
}

.hero-brand {
  position: relative;
  z-index: 1;
  padding: calc(env(safe-area-inset-top) + 170rpx) 44rpx 0;
  color: #fff;
}

.brand-cn {
  font-size: 38rpx;
  letter-spacing: 2rpx;
}

.brand-en {
  margin-top: 8rpx;
  color: rgba(255, 255, 255, 0.62);
  font-size: 16rpx;
}

.content-panel {
  position: relative;
  z-index: 3;
  min-height: 760rpx;
  margin-top: -300rpx;
  overflow: visible;
}

.panel-bg {
  position: absolute;
  left: 0;
  top: -674rpx;
  z-index:10;
  width: 100%;
  height: 1700rpx;
}

.panel-content {
  position: relative;
  z-index: 12;
  padding: 0rpx 46rpx 40rpx;
}

.section-title {
  margin-bottom: 30rpx;
}

.title-cn {
  color: #2a2a2a;
  font-size: 58rpx;
  line-height: 1;
}

.title-en {
  margin-top: 12rpx;
  color: #9a9a9a;
  font-size: 24rpx;
  font-weight: 700;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14rpx 14rpx;
}

.level-card {
  width: 100%;
  height: 236rpx;
  border-radius: 10rpx;
}
</style>