<template>
  <view class="page-wrapper">
    <!-- 自定义导航栏 -->
    <nav-bar :title="$t('vip.courseVip')" />
    <view
      class="info"
      :class="{
        'vip-item-special': item.type == 1 || item.type == 2,
        'vip-item-overdue': item.state == 1,
        'vip-item-special-effective': (item.type == 1 || item.type == 2) && item.state == 0,
        'vip-item-ordinary-effective': item.type != 1 && item.type != 2 && item.state == 0,
      }"
      v-for="(item, index) in list"
      :key="index"
    >
      <!-- 购买按钮 -->
      <wd-button
        type="error"
        size="small"
        plain
        class="vip-item-btn"
        @click="handlePurchase(item)"
      >
        {{ item.state == null ? '去办理' : '去续费' }}
      </wd-button>

      <!-- vip标志 -->
      <view>
        <text class="vip-item-title">{{ item.title }}</text>
        <text v-if="item.tip && item.tip < 100">
          <wd-icon name="warning" size="14px" color="#ff1f00"/> 还有{{ item.tip }}天到期
        </text>
        <text v-if="item.state == 1">
          <wd-icon name="warning" size="14px" color="#999"/> 已过期
        </text>
      </view>
      
      <view class="info-row pt-1">
        <text class="info-label">课程价格：</text>
        <view class="info-content">一年<text class="course-price">{{ item.originalPrice || 0 }}</text>天医币</view>
      </view>

      <view class="info-row">
        <text class="info-label">
          <template v-if="item.state !== null">延期价格：</template>
          <template v-else>{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP价格：` }}</template>
        </text>
        <view class="info-content">
          <text
            class="vip-product"
            v-for="(item_price, index_price) in (item.yanqiList ?? item.vcbList)"
            :key="index_price"
            @click="openorderModal(item, index_price)"
          >
            {{ item_price.year }}年<text>{{ item_price.rebateFee }}</text>{{ t('global.coin') }}
          </text>
        </view>
      </view>
      <view class="info-row">
        <text class="info-label" style="display: block">{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP权限：` }}</text>
        <view class="info-content" v-html="vipIntro[item.type]"></view>
      </view>
    </view>

    <!-- 商品选择器 -->
    <GoodsSelector
      :show="showGoodsSelector"
      :goods="goodsList"
      @select="handleGoodsSelect"
      @confirm="handleGoodsConfirm"
      @close="closeGoodsSelector"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { vipApi } from '@/api/modules/vip'
import { t } from '@/utils/i18n'
import type { IVipItem, IVipItemProduct } from '@/types/vip'
import type { IGoods } from '@/types/order'
import GoodsSelector from '@/components/order/GoodsSelector.vue'

const vipIntro = {
  1: '<p>无限制观看中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
  2: '<p>无限制观看国学与心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
  4: '<p>无限制观看中医任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
  5: '<p>无限制观看针灸任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
  6: '<p>无限制观看肿瘤学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
  7: '<p>无限制观看国学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
  8: '<p>无限制观看心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
  9: '<p>无限制观看中医学板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>'
}

// 获取VIP列表
const list = ref<IVipItem[]>([])
const getData = async () => {  
  const res = await vipApi.getVipBuyConfigList()
  list.value = res.res
}
onShow(() => {
  getData()
})

// 商品选择
const showGoodsSelector = ref(false)
const goodsList = ref<IGoods[]>([])
const selectedGoods = ref<IGoods | null>(null)

/**
 * 打开商品选择器
 */
const handlePurchase = async (item: IVipItem) => {
  const currentVipProductList = item[item.state == null ? 'vcbList' : 'yanqiList']
  goodsList.value = currentVipProductList.map((e: IVipItemProduct) => {
    return { 
      productId: e.id,
      productName: `${e.title} ${e.year}年`,
      price: item.state == null ? e.fee : e.rebateFee,
      productImages: '/static/vip.png',
      state: item.state,
      orderType: 'vip'
    }
  })
  showGoodsSelector.value = true
}
/**
 * 关闭商品选择器
 */
const closeGoodsSelector = () => {
  showGoodsSelector.value = false
}

// 处理选择商品
const handleGoodsSelect = (data: IGoods) => {
  selectedGoods.value = data
}

// 购买商品
const handleGoodsConfirm = () => {
  uni.navigateTo({
    url: `/pages/order/vipConfirm`,
    success: () => {
      setTimeout(() => {
        uni.$emit('selectedGoods', selectedGoods.value)
      }, 100)
    }
  })
}

</script>

<style lang="scss" scoped>
.page-wrapper {
  padding: 20rpx;
}

.info {
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px #a7bbe4;
  margin-bottom: 20rpx;
  position: relative;
  font-size: 28rpx;

  .info-row {
    display: flex;
    margin-bottom: 3px;
    font-size: 28rpx;
    line-height: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
  .info-label {
    display: inline-block;
    white-space: nowrap;
    font-weight: bold;
  }
  .info-content {
    display: inline-block;
  }
}

.course-price {
  font-size: 34rpx !important;
  color: #258feb;
  font-weight: bold;
  text-decoration: line-through;
  font-style: italic;
  padding: 0 5rpx;
}
.vip-product {
  display: inline-block;
  color: #ff1f00;
  border: 1rpx solid #ff1f00;
  border-radius: 10rpx;
  margin-right: 15rpx;
  margin-bottom: 10rpx;
  padding: 0 10rpx;
}
.vip-item-btn {
  position: absolute !important;
  right: 20rpx;
  top: 20rpx;
  padding: 2rpx 10rpx !important;
  height: auto !important;
  line-height: 1.5 !important;
  border-radius: 5px !important;
}
.vip-item-title {
  display: inline-block;
  font-size: 24rpx;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  padding: 10rpx 12rpx;
  border-radius: 15rpx;
  background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
}

// 超级vip
.vip-item-special {
  .vip-item-title {
    font-size: 26rpx;
    background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
  }
}
// 已过期
.vip-item-overdue{
  background: rgba(220, 223, 225, 0.9) !important;
  opacity: 0.75;
  
  .vip-item-title {
    background-image: linear-gradient(90deg, #999 0%, #ccc 100%);
    color: #000;
  }
}
// 普通vip生效中
.vip-item-ordinary-effective {
  background-color: rgba(64, 148, 222, 0.3) !important;
}
// 超级vip生效中
.vip-item-special-effective {
  background: rgba(227, 120, 125, 0.3) !important;
}
</style>