<template>
  <div class="package-title">{{ packData[type].title }}</div>
  <div class="d-flex mt-5 list">
    <div v-for="(val, i) in packData[type].items" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
      <div v-if="val.recommend" class="recommend">推荐</div>
      <div class="text-center font-weight-bold">{{ val.title }}</div>
      <div class="text-center my-5">
        <div>
          ￥ <span class="font-weight-bold font-size-20">{{ val.price }}</span>
          <span v-if="packData[type].showUnit"> /年</span>
        </div>
      </div>
      <v-divider></v-divider>
      <div>
        <div class="font-weight-bold my-3">权益</div>
        <ul>
          <li v-for="k in val.equity" :key="k">{{ k }}</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="scanCode my-7">
    <div class="code resume-box">
      <div class="resume-header">
        <div class="resume-title">扫码支付</div>
      </div>
      <div class="d-flex align-end mt-3">
        <div class="code-left">
          <QrCode text="二维码内容二维码内容二维码内容二维码内容" :width="170" />
        </div>
        <div class="ml-5">
          <div class="price">
            <span class="font-size-13">￥</span>
            {{ price }}
          </div>
          <div class="mt-3 d-flex align-center">
            <span class="color-666 font-weight-bold mr-5">支付方式</span>
            <v-chip-group v-model="payment" selected-class="text-primary" mandatory>
              <v-chip filter v-for="k in paymentList" :key="k.value" :value="k.value" class="mr-3" label>
                {{ k.label }}
                <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
              </v-chip>
            </v-chip-group>
          </div>
          <div class="font-size-14 color-666 mt-3 cursor-pointer">服务协议</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'open-page'})
import { ref } from 'vue'
import { packData, paymentList } from '@/utils/package.js'

const props = defineProps({
  type: String
})

const active = ref(packData[props.type].active || 2)
const price = ref(packData[props.type].price)
const payment = ref('wx_native')

const handleClickItem = (val, i) => {
  active.value = i
  price.value = val.price
}
</script>

<style scoped lang="scss">
@import '@/styles/package/index.scss'
</style>
