<template>
  <div
    class="bg w-full h-1229px"
    :style="{ backgroundImage: `url('${current.bg}')` }"
  >
    <div class="text-39px font-bold pt-20px ml-110px text-[#19191A]">
      {{ data.name }}
    </div>
    <div class="ml-78px mt-54px">
      <span class="text-[#E73434] text-157px font-bold">{{
        currentAttr.price
      }}</span>
      <span class="text-[#19191A] ml-28px text-39px font-bold">元</span>
    </div>
    <div class="px-50px">
      <div class="mt-18px flex items-center justify-between">
        <div
          v-if="currentAttr.discount"
          class="bg-[#E73434] text-white text-28px font-bold rounded-4px px-18px h-43px flex items-center"
        >
          {{ currentAttr.discount }}
        </div>
        <div v-else></div>
        <div class="text-28px font-bold text-white line-through">
          原价 {{ currentAttr.origin_price }} 元
        </div>
      </div>
      <div class="mt-20px">
        <van-dropdown-menu class="cu-select"  :overlay="true">
          <van-dropdown-item  v-model="value" :options="options" />
        </van-dropdown-menu>
      </div>
      <div
        class="mt-40px text-35px text-[#886E43] font-bold"
        :style="{ color: current.color }"
      >
        权益内容
      </div>
      <van-divider class="!my-20px border-[#FFF4E0]" />
      <div class="flex justify-between items-center text-31px text-[#232323]">
        <div>字数上限</div>
        <div>{{ formatNumber(data.equity.words) }}</div>
      </div>
      <div v-if="data.equity.article>0" class="flex justify-between items-center text-31px text-[#232323] mt-10px">
        <div>阅读文章</div>
        <div>{{ data.equity.article=='unlimit' ?'无限制':`${data.equity.article}篇` }}</div>
      </div>
      <van-divider class="!my-20px border-[#FFF4E0]" />
      <div
        class="text-[#886E43] text-35px font-bold"
        :style="{ color: current.color }"
      >
        更多权益
      </div>
      <div
        :style="{ backgroundColor: current.color + 20 }"
        
        class="mt-20px bg-[#C1B9AF] py-16px px-20px text-[#695F56] h-370px leading-42px text-28px overflow-hidden overflow-y-auto"
      >
    <div v-html="data.description_html"></div>
    </div>
      <div
        class="grid gap-x-5 mt-40px"
        :class="[data.is_subscribe ? 'grid-cols-2' : 'grid-cols-1']"
      >
        <van-button
          @click="handleSubscribe(0)"
          type="primary"
          :style="{ background: `${current.color} !important` }"
          class="bg-[#786B56] !h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
          >订阅</van-button
        >
        <van-button
          @click="handleSubscribe(1)"
          type="primary"
          v-if="data.is_subscribe"
          :style="{ background: `${current.color} !important` }"
          class="bg-[#786B56] !h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
          >连续订阅</van-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, toRaw } from 'vue'
import v1 from '@/assets/images/vip_card-01.png'
import v2 from '@/assets/images/vip_card-02.png'
import v3 from '@/assets/images/vip_card-03.png'
import v4 from '@/assets/images/vip_card-04.png'

const emit = defineEmits(['subscribe'])

const list = [
  {
    name: '试用版',
    bg: v1,
    color: '#786B56',
  },
  {
    name: '普惠版',
    bg: v2,
    color: '#886E43',
  },
  {
    name: '高级版',
    bg: v3,
    color: '#886E43',
  },
  {
    name: '高阶版',
    bg: v3,
    color: '#886E43',
  },
  {
    name: '专业版',
    bg: v4,
    color: '#A14739',
  },
]

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

const value = ref('')

const current = computed(() => {
  return list.find((item) => item.name == props.data.name) ?? {}
})

const moreEquity = computed(() => {
  let text = ''
  if (props.data.equity.pdf) {
    text += '上传pdf文件、'
  }
  if (props.data.equity.online) {
    text += `在线人数 ${props.data.equity.online}、`
  }
  if (props.data.equity.article) {
    text += `阅读文章数 ${props.data.equity.article}、`
  }
  return text.replace(/、+$/, '')
})

const options = computed(() => {
  const arr = props.data.attrs.map((item, i) => {
    return {
      ...item,
      text: item.name,
      value: i,
    }
  })
  if (value.value == '' && arr.length > 0) {
    value.value = arr[0].value
  }
  return arr
})

const currentAttr = computed(() => {
  return options.value.find((item) => item.value == value.value) ?? {}
})

const handleSubscribe = (e) => {
  emit(
    'subscribe',
    {
      data: toRaw(props.data),
      value: value.value,
      isSerial: e,
    },
    e == 1
  )
}

function formatNumber(num, digits = 0) {
  if (num < 10000) {
    return num.toString()
  } else {
    return (num / 10000).toFixed(digits) + '万'
  }
}
</script>
<style scoped lang="scss">
.bg {
  // background: url('@/assets/images/vip_card-01.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

::v-deep(.cu-select) {
  .ant-select-selector {
    background-color: #a7957e !important;
    border-color: #a7957e;
    color: white;
  }
  .ant-select-arrow {
    color: white;
  }
}
</style>
<style lang="scss">
.cu-select-popup {
  &.ant-select-dropdown
    .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background-color: #847663;
  }
  &.ant-select-dropdown
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: #847663;
  }
  &.ant-select-dropdown .ant-select-item {
    color: white;
  }
}
.cu-select{
  .van-haptics-feedback:active{
    opacity: 1;
  }
  .van-dropdown-menu__title{

  }
  .van-cell{
    background-color: #847663;
    color: white;
    .van-badge__wrapper{
      &::before{
        color: white;
      }
    }
  }
  .van-dropdown-menu__bar{
    height: 79px;
  }
  .van-dropdown-item {
      width: 541px !important;
      left: 101px !important;
    }
  .van-dropdown-menu__item{
    align-items: center;
    justify-content: space-between;
   
    background-color: #847663;
    color: white;
    .van-ellipsis{
      color: white;
    }
    
  }
  .van-dropdown-menu__title--active{
    color: white;
  }
  .van-dropdown-menu__title{
    width: calc(100% - 30px);
    padding:0 30px;
  }
  .van-overlay{
    background: transparent;
  }
}
</style>
