<template>
  <!-- <scroll class="mine" :pullup="true" :bounce="true"> -->
  <div class="mine">
    <div class="head">
      <img class="bg" :src="image.head_bg">
      <!-- <div class="ref-block" @click="clearBoth()">
          <img :src="image.ref">
      </div>-->
      <div class="contentBox">
        <div class="left">
          <img class="header-icon" :src="userDetail.avatar">
          <p class="name">{{userDetail.nickname}}</p>
        </div>
        <div class="right">
          <p class="id">学员号：{{userDetail.user_id}}</p>
          <p class="id" v-if="!userDetail.mobile">手机号：暂未绑定</p>
          <p class="id" v-if="userDetail.mobile">手机号：{{phoneNumber}}</p>
        </div>
      </div>
    </div>
    <div class="outBox">
      <div class="list">
        <van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link>
          <img slot="icon" :src="image.order">
        </van-cell>
        <van-cell title="我的星星" ref="star" to="/starRank" @click="toStar" is-link>
          <img slot="icon" :src="image.mine_icon_star">
          <!-- <div class="starNum" v-if="starNum">{{starNum}}颗</div> -->
        </van-cell>
        <van-cell title="宝宝档案" ref="bbda" to="/bbda" @click="toBbda" is-link>
          <img slot="icon" :src="image.babyicon">
        </van-cell>
        <van-cell
          title="子账号"
          v-if="userDetail.family_user==1||userDetail.family_user==0"
          ref="subAccount"
          to="/subAccount"
          @click="toBbda"
          is-link
        >
          <img slot="icon" :src="image.mine_son">
        </van-cell>
        <van-cell
          title="主账号"
          v-if="userDetail.family_user==2"
          ref="subAccount"
          to="/subAccount"
          @click="toBbda"
          is-link
        >
          <img slot="icon" :src="image.mine_mom">
        </van-cell>
      </div>
    </div>
    <div class="outBox addr"  style="margin-top:10px;margin-bottom: 50px;">
      <div class="list">
        <van-cell title="收货地址" ref="address" to="/address" is-link v-if="addressInfo&&addressInfo.receive_name">
          <img slot="icon" :src="image.mine_address">
        </van-cell>
        <van-cell title="清除缓存" is-link @click="clearBoth()">
          <img slot="icon" :src="image.ref">
        </van-cell>
      </div>
    </div>
    <div class="landscape"></div>
    <bottom-tab/>
  </div>
  <!-- </scroll> -->
</template>

<script>
import bottomTab from "../public/bottomTab";
import { mineImage } from "../../util/imgUrl";
import { Cell, Toast } from "vant";
import {
  getStarSumberApi,
  getUserAdressApi,
  getUserDetailApi
} from "../../service/api";
export default {
  name: "mine",
  components: {
    bottomTab,
    [Cell.name]: Cell
  },
  data() {
    return {
      image: mineImage,
      userDetail: {},
      phoneNumber: "",
      starNum: "",
      addressInfo: {}
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
      getStarSumberApi().then(res => {
        this.starNum = res.last_value;
        console.log(res);
      });
      getUserAdressApi().then(res => {
        this.addressInfo = res;
      });
      if (this.userDetail.mobile) {
        this.phoneNumber = this.userDetail.mobile;
      }
      var str = "18912341234";
      var pat = /(\d{3})\d*(\d{4})/;
      this.phoneNumber = this.phoneNumber.replace(pat, "$1****$2");
    },
    clearBoth() {
      this.$sa.track("buttonClick", {
        tabTitle: "我的",
        moduleTitle: "我的",
        buttonType: "清楚缓存",
        buttonName: "清楚缓存"
      });
      localStorage.clear();
      Toast("清除成功");
      console.log(process.env.API_URL);
      window.location = process.env.AUTHOR_UEL + "&refresh=1";
    },
    toStar() {
      this.$sa.quick("trackHeatMap", this.$refs.star);
    },
    toOrder() {
      this.$sa.quick("trackHeatMap", this.$refs.order);
    },
    toBbda() {
      this.$sa.quick("trackHeatMap", this.$refs.bbda);
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.mine {
  height: 100vh;
  background: white;
  overflow: auto;
  .head {
    position: relative;
    .contentBox {
      width: 335 * @toVw;
      height: 104 * @toVw;
      background: white;
      box-shadow: 0px 1px 6px 0px rgba(64, 169, 255, 0.3);
      border-radius: 8 * @toVw;
      position: absolute;
      top: 100 * @toVw;
      left: 20 * @toVw;
      display: flex;
      .left {
        // min-width: 90 * @toVw;
        width: 160 * @toVw;
        margin-right: 0;
        margin-left: 0 * @toVw;
        padding-left: 16 * @toVw;
        box-sizing: border-box;
        // margin-left: 26* @toVw;
        p {
          max-width: 120 * @toVw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 20 * @toVw;
          margin-left: 0 * @toVw;
          line-height: 28 * @toVw;
          text-align: center;
          // text-align: left;
        }
      }
      .right {
        margin-left: 0 * @toVw;
      }
    }
    .bg {
      width: 100%;
    }
    .ref-block {
      width: 25 * @toVw;
      height: 25 * @toVw;
      position: absolute;
      right: 28 * @toVw;
      top: 56 * @toVw;
      img {
        width: 100%;
      }
    }
    width: 375 * @toVw;
    height: 160 * @toVw;
    background-size: 100% 100%;
    color: white;
    text-align: center;
    .header-icon {
      width: 84 * @toVw;
      height: 84 * @toVw;
      border-radius: 10000px;
      border: 3 * @toVw solid white;
      position: absolute;
      top: -40 * @toVw;
      left: 30 * @toVw;
    }
    .name {
      font-size: 20 * @toVw;
      font-family: PingFang-SC-Medium;
      font-weight: normal;
      line-height: 20 * @toVw;
      margin-top: 42 * @toVw;
      color: black;
      font-weight: 500;
    }
    .id {
      font-size: 14 * @toVw;
      // font-family: PingFang-SC-Medium;
      color: #808080;
      border-radius: 200px;
      line-height: 17 * @toVw;
      background-color: white;
      margin-top: 14 * @toVw;
      text-align: left;
      // font-weight: 300;
      // padding: 10 20*@toVw 0 ;
    }
  }
  .outBox {
    background: white;
    box-shadow: 0px 1px 6px 0px rgba(64, 169, 255, 0.3);
    width: 335 * @toVw;
    // width: 412px;
    border-radius: 8 * @toVw;
    margin-top: 62 * @toVw;
    overflow: hidden;
    .list {
      .van-cell {
        font-size: 16 * @toVw;
        padding-top: 12 * @toVw;
        padding-bottom: 12 * @toVw;
        img {
          margin-right: 12 * @toVw;
          width: 28 * @toVw;
          // margin:auto 0 ;
          height: 28 * @toVw;
        }
        .starNum {
          font-size: 13 * @toVw;
        }
      }
      .van-cell:not(:last-child)::after {
        right: 15px;
      }
    }
  }
}
@media screen and (orientation: landscape) {
  .landscape {
    height: 100 * @toVw;
  }
  .mine {
    min-height: 100vh;
  }
}
</style>