<template>
  <div class="mainPage">
    <div>
      <div class="userTop_view" :class="{'long':user.Phone}">
        <div class="gradient_bg"></div>
        <div class="zIndex_bg"></div>
        <div class="user-card">
          <div>
            <img :src="headimgurl" alt width="100%" height="100%">
            <div>
              <div class="user-name">{{user.Name}}</div>
              <div v-if="user.Phone">{{user.Phone}}</div>
              <div v-else>未绑定</div>
            </div>
            <div></div>
          </div>
          <div v-if="user.Phone" class="code">
            <div>卡号：2334546456456</div>
            <svg style="width:100%" id="barcode"></svg>
          </div>
          <div v-else class="bind">
            <span>请绑定手机号后查看会员条形码</span>
            <span @click="bindMobile">立即绑定</span>
          </div>
        </div>
        <!-- <div class="userAvatar_Border">
          <div class="userAvatar">
            <img :src="headimgurl" alt width="100%" height="100%">
          </div>
        </div>
        <div class="uesr-info">
          <div class="user-name">{{user.Name}}</div>
          <div class="mobile" v-if="user.Phone">{{user.Phone}}</div>
          <div class="mobile" v-else @click="bindMobile">绑定手机号</div>
        </div>-->
      </div>
      <div class="vip-privilege flex-h">
        <div class="flex-item privilege-item" @click="toCoupons">
          <div class="img-box">
            <img src="../../../../common/icon/userCenter-icon-1.png" width="100%" height="100%" alt>
          </div>
          <span>优惠券</span>
          <span>{{Nums.couponnum || 0}}张未使用</span>
        </div>
        <div class="flex-item privilege-item" @click="toCard">
          <div class="img-box">
            <img src="../../../../common/icon/userCenter-icon-2.png" width="100%" height="100%" alt>
          </div>
          <span>卡券</span>
          <span>0张未使用</span>
        </div>
        <div class="flex-item privilege-item">
          <!-- <i class="iconfont icon-01" @click.stop="toVip"></i> -->
          <div class="img-box">
            <img src="../../../../common/icon/userCenter-icon-3.png" width="100%" height="100%" alt>
          </div>
          <span>积分</span>
          <span>
            ￥{{Nums.vipbalance}}
            <i class="iconfont icon-jiantou-right" style="font-size: 0.1rem;"></i>
          </span>
        </div>
      </div>

      <div class="userCenter-menu">
        <div class="menu-item flex-h" @click="toLessonOrder">
          <span>我的课程</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h" @click="toGoodsOrder">
          <span>商品订单</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h" @click="toBodyCheck">
          <span>体检报告</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h" @click="toLuckdraw">
          <span>抽奖记录</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h" @click="toActiveList">
          <span>活动记录</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h" @click="toMyBook">
          <span>我的借阅</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('userCenter')
export default {
  name: '',
  data () {
    return {
      user: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      org: x => x.app.orgId,
      Nums: x => x.userCenter.Nums
    })
  },
  components: {

  },
  mounted () {
    this.getUserInfo({ org: this.org }).then(() => {
      this.user = this.userInfo.customer
      if (this.user.AccountInfo) {
        this.AccountInfo = JSON.parse(this.user.AccountInfo)
        this.$nextTick(() => {
          if (this.user.Phone) {
            JsBarcode("#barcode", "2334546456456", {
              lineColor: '#000000',
              height: 60,
              displayValue: false
            })
          }
        })
      }
      this.headimgurl = this.user.Headimgurl
    })
    this.getNum()
  },
  methods: {
    ...actions(['getUserInfo', 'getNum']),
    toLessonOrder () {
      this.$router.push({ name: 'lessonOrder' })
    },
    toVip () {
      this.$router.push({ name: 'vip' })
    },
    toVipDetail () {
      this.$router.push({ name: 'vipDetail' })
    },
    toCard () {
      this.$router.push({ name: 'card' })
    },
    toCoupons () {
      this.$router.push({ name: 'coupons' })
    },
    bindMobile () {
      this.$router.push({ name: 'bindMobile' })
    },
    toGoodsOrder () {
      this.$router.push({ name: 'orderList', query: { from: 'c' } })
    },
    toBodyCheck () {
      var url = window.location.pathname
      window.location.href = url.replace('user.html', 'bodyCheck.html') + '#/'
    },
    toMyBook () {
      this.$router.push({ name: 'borrowedRecord' })
    },
    toLuckdraw () {
      // ^参数约定为97
      let userid = this.userInfo.customer.CustomerId
      let num = Math.floor(Math.random() * 10 + 1) * 100 + Math.floor(Math.random() * 10 + 1) * 10 + Math.floor(Math.random() * 10 + 1)
      num = num >= 1000 ? 999 : num
      userid = `${userid}${num}`
      window.location.href = `${window.location.origin}/game/luckdraw/#/lotteryList?from=${userid}`
    },
    toActiveList () {
      this.$router.push({ name: 'activeList' })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>