<template>
  <ui-page-layout :title="$t('开通VIP')">

    <div class="pt-24rem pl-24rem  flex flex-wrap">
      <ui-vip-preset v-for="vipSmeal in vipSmeals" @choose="handleChoose(vipSmeal)" :item="vipSmeal" class="mr-24rem mb-24rem"></ui-vip-preset>
    </div>


  </ui-page-layout>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      vipSmeals:[]
    };
  },
  methods:{
    async handleChoose(vipSmeal) {

      let resp = await this.$http.post(this.$api.mzUser.createVipOrder,this.$qs.stringify({vipCode:vipSmeal.code}))
      if(resp.data.status === 200){
        await this.$dialog.confirm( {
          message:this.$t('请在弹出的窗口完成付款操作?'),
          title:this.$t('提示'),
          confirmButtonText: this.$t('已完成付款'),
          cancelButtonText: this.$t('取消'),
        });
        resp = await this.$http.post(this.$api.mzUser.confirmVipOrder,this.$qs.stringify({orderCode:resp.data.data.vipSmOrder.code}))

        if(resp.data.status === 200){
          this.$toast(this.$t('开通成功'));
          this.$router.back();
        }

      }



    },
  },
  async created(){
    let r = await  this.$http.post(this.$api.common.vipSmeals);
    if(r.data.status === 200){
      this.vipSmeals = r.data.data.vipSmeals;
    }
  }
};
</script>
<style>
.swiper-group {
  display: grid;
  grid-template-columns: repeat(2, 290px);
  grid-template-rows: repeat(2, 163px);
  grid-gap: 10px;
}

.swiper {
  @apply w-290px;

  /* align-items: end; */
  /* @apply w-290px h-163px; */
}

.swiper-title {
  @apply bottom-17px left-17px text-size-16px;
}
</style>
