<template>
  <div class="container">
    <div class="header">
      <div class="user-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </div>
      <div class="user-nickname">
        <open-data type="userNickName"></open-data>
      </div>
    </div>
    <div class="menu-list">
      <van-cell-group>
        <van-cell size="large" is-link title="我的优惠券" url="/pages/couponList/main?tab=0">
          <van-icon slot="icon" class="title-icon" name="coupon" />
          <div>({{canUsedCount}}张可使用)</div>
        </van-cell>
        <van-cell size="large" is-link title="我的订单" url="/pages/order/main">
          <van-icon slot="icon" class="title-icon" name="balance-list" />
        </van-cell>
        <!-- <van-cell size="large" is-link title="洗车机" @click="getCode">
          <van-icon slot="icon" class="title-icon" name="graphic" />
        </van-cell> -->
        <van-cell size="large" is-link title="联系客服" @click="callPhone">
          <van-icon slot="icon" class="title-icon" name="service" />
        </van-cell>
      </van-cell-group>
    </div>
    <van-button plain hairline block round class="logout-btn" @click="logoutHandle">
      退出登录
    </van-button>

  </div>
</template>

<script>
import { getCouponCount } from '@/api/coupon';
import { checkLogin, zyycLogout } from '@/api/login';
export default {

  data() {
    return {
      canUsedCount: 0,
      isLogin: false
    };
  },
  methods: {
    callPhone() {
      wx.makePhoneCall({
        phoneNumber: '4001616312'
      });
    },
    getCoupon() {
      getCouponCount({}).then(res => {
        if (res.status === '200') {
          this.canUsedCount = res.data;
        } else {
          wx.showToast({
            title: res.message,
            icon: 'none',
            duration: 2500
          });
        }
        wx.hideLoading();
      });
    },
    logoutHandle() {
      wx.showModal({
        title: '提示',
        content: '您确定要退出登录吗?',
        success(res) {
          if (res.confirm) {
            zyycLogout({}).then(res => {
              mpvue.removeStorageSync('token');
              wx.switchTab({ url: '/pages/index/main' });
            });
          }
        }
      });
    },
    openMini(){
      wx.navigateToMiniProgram({
        appId: 'wxed9c04d05ab849f9',
        path: '',
        extraData: {
          foo: 'bar'
        },
        envVersion: 'release',
        success(res) {
          // 打开成功
        }
      })
    },
    // 洗车 扫码
    getCode () {
      wx.scanCode({
        success (res) {
          console.log(res)
        }
      })
    }
  },
  onTabItemTap(item) {
    console.log(item)
    wx.showLoading({
      mask: true,
      title: '加载中'
    });
    checkLogin().then(res => {
      if (res.status === '200') {
        this.getCoupon();
      } else {
        wx.redirectTo({
          url: '/pages/login/main?lanuch=true&path=' + encodeURIComponent('/pages/member/main')
        });
      }
      this.isLogin = true
      wx.hideLoading();
    });
  },
  onShow() {

  }
};
</script>

<style lang="stylus" scoped>
.container {
  padding: 15rpx 40rpx;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
}

.menu-list {
  margin-top: 50rpx;

  .title-icon {
    display: flex;
    align-items: center;
    font-size: 1.4em;
    color: #ed3f14;
    margin-right: 25rpx;
  }
}

.logout-btn {
  position: relative;
  top: 25vh;
}
</style>