<template>
  <v-container fill-height>
    <span><h2>VIP 套餐</h2></span>
    <v-row no-gutters justify="center" align="center">
      <v-col
        v-for="item in vipPlans"
        :key="item.planId"
        v-resize="onResize"
        :cols="cols"
        style="margin-top: 48px;"
      >
        <v-card
          class="mx-auto"
          max-width="344"
        >
          <v-card-text>
            <div> 时长： </div>
            <p class="display-1 text--primary">
              {{ item.duration }}
            </p>

            <div class="text--primary">
              <strong> ￥： {{ item.price }} </strong>
            </div>
          </v-card-text>
          <v-card-actions>
            <v-btn
              text
              color="deep-purple accent-4"
              @click="choosePlan(item)"
            >
              选择
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
    <v-dialog
      v-model="dialog"
      max-width="290"
    >
      <v-card>
        <v-card-title class="headline">套餐详情</v-card-title>
        <v-card-text v-if="vipPlan !== null">
          <span>您选择的是 </span>
          <h3>{{ vipPlan.duration }}</h3>
          <span> 套餐, 确定选择此套餐? </span>
        </v-card-text>

        <v-card-actions>
          <v-spacer />
          <v-btn
            color="green darken-1"
            text
            @click="dialog = false"
          >
            重新选择
          </v-btn>

          <v-btn
            color="green darken-1"
            text
            @click="ensurePlan"
          >
            就是它了
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import { getVipPlan, createVipOrder } from '@/api/user/user'

export default {
  data() {
    return {
      dialog: false,
      vipPlans: [],
      vipPlan: null,
      planId: null,
      cols: 5,
      windowSize: {
      }
    }
  },
  created() {
    this.windowSize = { x: window.innerWidth, y: window.innerHeight }
    getVipPlan().then(res => {
      if (res.code === 0) {
        const resData = res.data
        this.vipPlans = []
        for (const item of resData) {
          this.vipPlans.push(item)
        }
      } else {
        alert(res.data)
      }
    }).catch(error => {
      console.error(error.message)
    })
  },
  methods: {
    onResize() {
      this.windowSize = { x: window.innerWidth, y: window.innerHeight }
      if (this.windowSize.x < 700) {
        this.cols = 12
      } else {
        this.cols = 5
      }
    },
    choosePlan(item) {
      this.dialog = true
      this.vipPlan = item
    },
    ensurePlan() {
      createVipOrder(this.vipPlan.planId).then(res => {
        if (res.code === 0) {
          if (this.$route.path === '/vip/pay') {
            return
          }

          const orderId = res.data
          this.$router.push({
            path: '/vip/pay',
            query: {
              orderId: orderId
            }
          })
        } else {
          alert('订单创建失败')
        }
      })
    }
  }
}
</script>

<style>

</style>
