<template>
  <div class="person">
    <x-header></x-header>
    <div class="person-info__wrap">
      <div class="person-info__bg"></div>
      <div class="person-info__portrait">
        <img v-if="user.head_img"
             :src="user.head_img" />
        <img v-else
             src="../assets/个人中心-默认头像.png" />
      </div>
      <div class="person-info__username"><span v-if="user.nickname">{{user.nickname}}</span><span v-else>书友</span></div>
      <div class="person-info__id">
        ID:{{user.id}}
        <span class="person-info__copy"
              :data-clipboard-text="user.id"
              @click="copyName">复制</span>
      </div>
      <div class="person-info__balancebox">
        <img src="../assets/余额.png" />
        <span class="person-info__balance">
          您还剩
          <span class="red">{{user.balance}}</span>书币
        </span>
        <router-link :to="Pay"
                     class="person-info__btn">充值</router-link>
      </div>
    </div>
    <div class="person-entry__wrap">
      <img src="https://cdn-novel.bookkks.com/h5/20191025_vip.jpg"
           @click="toBuyVip"
           class="person-entry__buyvip"
           v-if="!user.is_vip && showBuyVip" />
      <template v-if="user.is_vip">
        <div class="person-entry__vip">
          <img class="person-entry__icon"
               src="../assets/我是包年图标.png" />
          <!-- <span class="person-entry__text">包年有效期</span> -->
          <span class="person-entry__text">免费阅读卡</span>
          <span>还剩余{{user.vip_days}}</span>
        </div>
        <hr />
      </template>
      <template v-if="user.is_all_life">
        <div class="person-entry__vip">
          <img class="person-entry__icon"
               src="../assets/我是包年图标.png" />
          <span class="person-entry__text">包年有效期</span>
          <span>终身免费</span>
        </div>
        <hr />
      </template>
      <template v-if="xiyue_pay_template">
        <div class="person-entry__server">
          <img class="person-entry__icon"
               src="../assets/xiyue-person__entry.png" />
          <span @click="toXiYue"
                class="person-entry__text">我的微书店</span>
          <img class="person-entry__arrow"
               src="../assets/个人中心-进入.png" />
        </div>
        <hr />
      </template>
      <router-link class="person-entry__shelf"
                   :to="Coupon"
                   tag="div">
        <img class="person-entry__icon"
             src="../assets/my_coupon.png" />
        <span class="person-entry__text">我的优惠券</span>
        <img class="person-entry__arrow"
             src="../assets/个人中心-进入.png" />
      </router-link>
      <hr />
      <router-link class="person-entry__shelf"
                   :to="BookShelf"
                   tag="div">
        <img class="person-entry__icon"
             src="../assets/个人中心-书架.png" />
        <span class="person-entry__text">我的书架</span>
        <img class="person-entry__arrow"
             src="../assets/个人中心-进入.png" />
      </router-link>
      <hr />
      <router-link tag="div"
                   :to="RecordRecharge"
                   class="person-entry__pay">
        <img class="person-entry__icon"
             src="../assets/个人中心-充值记录.png" />
        <span class="person-entry__text">充值记录</span>
        <img class="person-entry__arrow"
             src="../assets/个人中心-进入.png" />
      </router-link>
      <hr />
      <router-link tag="div"
                   :to="RecordOrder"
                   class="person-entry__order">
        <img class="person-entry__icon"
             src="../assets/个人中心-消费记录.png" />
        <span class="person-entry__text">消费记录</span>
        <img class="person-entry__arrow"
             src="../assets/个人中心-进入.png" />
      </router-link>
      <hr />
      <router-link tag="div"
                   :to="RecordSend"
                   class="person-entry__send">
        <img class="person-entry__icon"
             src="../assets/个人中心-赠送记录.png" />
        <span class="person-entry__text">书币详情</span>
        <img class="person-entry__arrow"
             src="../assets/个人中心-进入.png" />
      </router-link>
      <hr />
      <div class="person-entry__sign"
           @click="toSignPage">
        <img class="person-entry__icon"
             src="../assets/sign.png" />
        <span class="person-entry__text">签到</span>
        <img class="person-entry__arrow"
             src="../assets/个人中心-进入.png" />
      </div>
      <hr />
      <template v-if="!!user.is_paid">
        <div class="person-entry__binding"
             @click="toBind">
          <img src="../assets/binding.png"
               alt
               class="person-entry__icon" />
          <span class="person-entry__text">绑定手机</span>
          <template v-if="!!user.bind">
            <span :class="['binding-text', {'binding-text__binded': !!user.bind}]">已绑定</span>
          </template>
          <template v-else>
            <span class="binding-text">
              绑定即得
              <i>100</i>书币
            </span>
            <img class="person-entry__arrow"
                 src="../assets/个人中心-进入.png" />
          </template>
        </div>
        <hr />
      </template>
      <div class="person-entry__server">
        <img class="person-entry__icon"
             src="../assets/个人中心-客服.png" />
        <span @click="Server"
              class="person-entry__text">联系客服</span>
        <img class="person-entry__arrow"
             src="../assets/个人中心-进入.png" />
      </div>
      <hr />
    </div>
    <p class="clear-cache"
       @click="onClear">清除缓存</p>
  </div>
</template>
<script>
import {
  Person,
  BookShelf,
  Pay,
  RecordOrder,
  RecordRecharge,
  RecordSend,
  RecordSign,
  PhoneBinding,
  Coupon,
} from "./namespace.js";
import { getUserInfo } from "../api";
import { Server } from "../components/prompt";
import Clipboard from "clipboard";
export default {
  name: Person.name,
  data() {
    return {
      BookShelf: BookShelf.route,
      Pay: Pay.route,
      RecordOrder: RecordOrder.route,
      RecordRecharge: RecordRecharge.route,
      RecordSend: RecordSend.route,
      RecordSign: RecordSign.route,
      Coupon: Coupon.route,
      PhoneBinding: PhoneBinding.route,
      xiyue_pay_template: window.options.xiyue_info,
      user: {},
      showBuyVip:
        window.options && window.options.hidden_personal_page_vip != 1,
    };
  },
  methods: {
    Server() {
      Server({ openid: this.user.openid });
    },
    toBind() {
      if (!!this.user.bind) return;
      this.$router.push(this.PhoneBinding);
    },
    toSignPage() {
      location.href = "/sign";
    },
    toXiYue() {
      location.href = this.xiyue_pay_template.xiyue_index_page;
    },
    toBuyVip() {
      location.href = "/sale/customvip";
    },
    copyName() {
      var that = this;
      var clipboard = new Clipboard(".person-info__copy");
      clipboard.on("success", function (e) {
        that.$Toast("复制成功");
      });
      clipboard.on("error", function (e) {
        console.log(e);
      });
    },
    onClear() {
      location.href = "/reLogin";
    },
  },
  created() {
    getUserInfo().then((r) => {
      this.user = r;
    });
  },
};
</script>
