<template>
  <mobile v-if="!isPC && this.vipList.length>0" :com="com" :dev="dev" :pre="pre" :vipDetail="vipDetail"></mobile>
  <div v-else></div>
</template>

<script>
  import {mapState} from "vuex";
  import pc from "@/components/type/vip/pc";
  import mobile from "@/components/type/vip/mobile";
  import getDeviceType from "@/mixins/getDeviceType";

  export default {
    head: {
      title: "会员中心页 - 程序员客栈"
    },
    components: {
      pc,
      mobile
    },
    mixins: [getDeviceType],
    data() {
      return {
        vipList: [],
        vipDetail: {}
      };
    },
    computed: {
      ...mapState(["isPC"]),
      com() {
        return this.vipList[0];
      },
      dev() {
        return this.vipList[1];
      },
      pre() {
        return this.vipList[2];
      }
    },
    async mounted() {
      await this.getList();
      await this.getVipDetail();
    },
    methods: {
      async getList() {
        let extraHeaders = {};
        if (this.deviceType === "ios") {
          extraHeaders = this.getSign();
        }
        let res = await this.$axios.$post(`/api/vip/getList`, extraHeaders);
        this.vipList = res && res.data ? res.data : [];
      },
      async getVipDetail() {
        let res = await this.$axios.$post("/api/vip/getVipUserDetail");
        this.vipDetail = res && res.data ? res.data : {};
      }
    }
  };
</script>

<style>
</style>
