<template>
  <view>
     <loading-view v-if="isFirstLoading"></loading-view>
    <view class="bg-hex-303133 flex items-center justify-between  p-30rpx ">
      <view class="flex">
        <cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
        <view class="ml-20rpx mt-10rpx">
          <image :src="!user.is_vip?'/static/images/svip/vip_failure.png':'/static/images/svip/vip.png'" class="w-48rpx h-48rpx" mode=""></image>
          <view v-if="!user.is_vip" class="text-hex-f5f5f5 text-22rpx mt-10rpx">您暂未开通会员</view>
          <view v-else class="text-hex-f5f5f5 text-22rpx mt-10rpx">vip到期日期：{{time}}</view>
        </view>
      </view> 
      <view class="text-white flex items-center text-26rpx" @click="$u.route('/pageB/record/index')">
        <view class="mr-8rpx">购买记录</view>
         <u-icon color="#ffffff" name="arrow-right" size="26"></u-icon>
      </view>
    </view>
    <!--  -->
    <view class="bg-white pb-40rpx">
      <view class="p-30rpx text-32rpx ">尊享特权</view>
      <view class="grid grid-cols-4  gap-30rpx">
        <view class="flex items-center justify-center flex-col ">
          <view class="item">
            <image src="@/static/images/svip/vip_icon02.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
          </view>
          <view class="mt-20rpx text-24rpx">会员折扣</view>
        </view>
        <view class="flex items-center justify-center flex-col">
          <view class="item">
            <image src="@/static/images/svip/vip_icon03.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
          </view>
          <view class="mt-20rpx text-24rpx">会员礼卷</view>
        </view>
        <view class="flex items-center justify-center flex-col">
         <view class="item">
            <image src="@/static/images/svip/vip_icon01.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
         </view>
          <view class="mt-20rpx text-24rpx">会员特权</view>
        </view>
        <view class="flex items-center justify-center flex-col">
         <view class="item">
            <image src="@/static/images/svip/vip_icon04.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
         </view>
          <view class="mt-20rpx text-24rpx">尊贵标识</view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="bg-white mt-20rpx p-30rpx">
      <!--  -->
      <view class="grid grid-cols-3  gap-30rpx">
        <view @click="Index=index" :class="Index==index?'text-hex-f59e0b border-hex-f59e0b':'border-hex-F5F5F5'"
          class="rounded-15rpx py-50rpx flex items-center justify-center flex-col border border-solid "
          v-for="(item,index) in list" :key="index">
          <view class="text-26rpx">{{item.name}}</view>
          <view class="price-text text-34rpx font-medium mt-15rpx">{{item.price}}</view>
          <view :class="Index==index?'text-hex-f59e0b':''" class="text-26rpx mt-15rpx text-hex-909399">{{item.times.text}}
          </view>
        </view>
      </view>
      <!--  -->
      <view class="mt-30rpx text-28rpx">
       <text class="leading-40rpx">
          {{chooseVip.description}}
       </text>
      </view>
      <!--  -->
      <view class="flex items-center mt-20rpx">
        <u-checkbox v-model="checked" shape="circle" active-color="#f59e0b" size="28" icon-size="18"></u-checkbox>
        <view class="text-22rpx -ml-15rpx mt-8rpx ">
          已同意并阅读
          <text class="text-hex-f59e0b">《平台协议》、</text>
          <text class="text-hex-f59e0b">《价格说明》</text>
        </view>
      </view>
      <!--  -->
      <view
        class="w-full mt-30rpx h-88rpx bg-hex-404040 rounded-full text-center text-hex-f59e0b leading-88rpx text-32rpx" @click="onSumbit">
        {{user.is_vip?'续费':'立即开通'}}</view>
    </view>
  </view>
</template>

<script>
  import { wxpay, alipay } from '@/utils/pay.js';
  export default {
    data() {
      return {
        isFirstLoading:true,
        list: [],
        Index: 0,
        checked: true
      };
    },
    computed:{
      user() {
        return this.$store.getters.user ?? {};
      },
      chooseVip(){
        return this.list[this.Index]
      },
      time(){
        return this.$u.timeFormat(this.user.vip_expired, 'yyyy-mm-dd');
      }
    },
    onLoad() {
      this.getDate()
    },
    methods: {
      async getDate(){
        try{
          const resData=await this.$api.get('/v1/vip')
          this.list=resData
        }catch(err){}finally{
          this.isFirstLoading=false
        }
      },
     async onSumbit(){
       if(!this.checked) return this.$u.toast('请勾选协议')
       try{
         const resData=await this.$api.post('/v1/vip/buy',{vip_id:this.chooseVip.id})
         const res=await wxpay(resData.data)
         if(res=='success'){
           this.$u.toast('充值成功');
           this.$store.dispatch('user/getUserInfo');
           setTimeout(()=>{
             uni.navigateBack({})
           },300)
         }else{
           this.$u.toast('支付失败');
         }
       }catch(err){
       }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    background-image: linear-gradient(-90deg,
        #e3a96d 0%,
        #f8cfb4 100%), linear-gradient(#c59f6d,
        #c59f6d);
        border-radius: 50%;
        width: 64rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
  }
</style>
