<template>
  <v-container fill-height>
    <span><h2>支付页面</h2></span>
    <v-row no-gutters justify="center" align="center">
      <v-col
        style="margin-top: 48px;"
      >
        <v-card
          class="mx-auto"
          max-width="344"
        >
          <v-card-text>
            <div> 您正在支付订单号为 11223344 的订单 </div>
            <!--            <p class="display-1 text&#45;&#45;primary">
              {{ item.duration }}
            </p>-->
          </v-card-text>
          <v-card-actions>
            <v-btn
              text
              color="deep-purple accent-4"
              @click="pay"
            >
              支付
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { payVip } from '@/api/user/user'

export default {
  data() {
    return {
      orderId: null
    }
  },
  created() {
    this.orderId = parseInt(this.$route.query.orderId)
  },
  methods: {
    pay() {
      if (this.orderId === null) {
        alert('订单 ID 不存在')
        return
      }

      payVip(this.orderId).then(res => {
        if (res.code === 0) {
          this.$store.commit('user/SET_VIP', res.data)

          if (this.$route.path === '/vip/order') {
            return
          }
          this.$router.push('/vip/order')
        } else {
          alert(res.data)
        }
      }).catch(error => {
        console.error(error.message)
      })
    }
  }
}
</script>

<style>
</style>
