<template>
  <view class="vip-table-container">
    <!-- VIP专栏背景 -->
    <view class="vip-column-bg"></view>

    <!-- 表格内容 -->
    <view class="vip-table">
      <!-- 表头 -->
      <view class="vip-table-header">
        <view class="feature-column">功能</view>
        <view class="vip-column vip-header">
          <image
            src="https://api.static.ycymedu.com/sub/images/ucenter/vip-crown.png"
            class="vip-icon"
          ></image>
        </view>
        <view class="normal-column">普通用户</view>
      </view>

      <!-- 表格内容 -->
      <view class="vip-table-body">
        <view class="vip-table-row" v-for="(item, index) in featureList" :key="index">
          <view class="feature-name">{{ item.name }}</view>
          <view class="vip-access">
            <text v-if="item.vipAccess" class="check-icon">✓</text>
            <text v-else>-</text>
          </view>
          <view class="normal-access">{{ item.normalAccess }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const featureList = ref([
  {
    name: '志愿填报表AI解读',
    vipAccess: true,
    normalAccess: '—',
  },
  {
    name: '11项测评报告AI解读',
    vipAccess: true,
    normalAccess: '—',
  },
  {
    name: '高考信息咨询AI咨询',
    vipAccess: true,
    normalAccess: '次数限制',
  },
])
</script>

<style scoped>
.vip-table-container {
  font-size: 24rpx;
  position: relative;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  color: #333333;
}

.vip-column-bg {
  position: absolute;
  width: 19%;
  left: 50%;
  top: -30rpx;
  bottom: -30rpx;
  background: linear-gradient(180deg, rgba(254, 235, 192, 0.8) 0%, rgba(255, 204, 104, 0.8) 100%);
  z-index: 0;
  border-radius: 20rpx;
}

.vip-table {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
}

.vip-table-header,
.vip-table-row {
  display: flex;
  width: 100%;
  font-weight: 500;
}

.vip-table-header {
  background-color: transparent;
  font-weight: 500;
}

.feature-column,
.feature-name {
  flex: 4;
  text-align: left;
  padding: 24rpx 32rpx;
  background-color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.vip-column,
.vip-access {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rpx 0;
  background-color: transparent;
  position: relative;
  z-index: 3;
}

.normal-column,
.normal-access {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rpx 0;
  color: #666;
  background-color: #fff;
}

.vip-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vip-icon {
  width: 66rpx;
  height: 46rpx;
  background-color: transparent;
}

.check-icon {
  color: #8b5a00;
  font-weight: bold;
  font-size: 36rpx;
}

.vip-table-body {
  background-color: transparent;
}

.vip-table-row:last-child {
  border-bottom: none;
}

.feature-column,
.normal-column {
  border-radius: 20rpx 0 0 0;
}
.feature-column:not(:last-child),
.feature-name:not(:last-child) {
  border-bottom: 1rpx solid #f5f5f5;
}
.normal-access,
.normal-column {
  border-bottom: 1rpx solid #f5f5f5;
}
</style>
