<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>书友 <span v-if="user.bind_phone">{{user.bind_phone.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2")}}</span> </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>
    <hr />
    <div class="person-entry__wrap">

      <router-link class="person-entry_login" :to="Login" tag="div">
        <img class="login-icon" src="../assets/login.png" />
        <div class="login-text">登录绑定</div>
        <div class="login-notify" v-show="!user.bind_phone">绑定手机号防止数据丢失</div>
       <div class="login-notify" v-show="user.bind_phone" @click.stop="changePhone">已绑定手机号，点击换绑</div>
        <div>
          <img class="person-login_arrow" src="../assets/个人中心-进入.png" />
        </div>
      </router-link>
      <div style="height: 0.2rem;background-color: #F5F5F5;"></div>
      <router-link class="person-entry__shelf" :to="{name:Coupon.name,query:{uuids}}" 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="{name:BookRecent.name,query:{uuids}}" 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 />
      <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,
  Coupon,
  Login,
  BookRecent
} 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,
      BookRecent:BookRecent.route,
      RecordOrder: RecordOrder.route,
      RecordRecharge: RecordRecharge.route,
      RecordSend: RecordSend.route,
      RecordSign: RecordSign.route,
      Coupon: Coupon.route,
      Login: Login.route,
      user: {},
      uuids:''
    };
  },
  methods: {
    Server() {
      Server({ openid: this.user.openid });
    },
    toBind() {
      if (!!this.user.bind) return;
      this.$router.push('/login');
    },
    toSignPage() {
      const token = localStorage.getItem('token')
      location.href = `/sign?token=${token}`;
    },

    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";
    },
    changePhone(){
      this.$router.push(`/phonebind?phone=${this.user.bind_phone}`)
    }
  },
  created() {
    getUserInfo().then(r => {
      this.user = r;
    });
    let uuid = localStorage.getItem("uuids");
      let {uuids } = this.$route.query;
      this.uuids = uuids || uuid;
  }
};
</script>
