<template>
  <div class="container login-panel">
    <img class="logo-img" src="/static/img/logo.png">
    <van-button plain hairline type="primary" class="login-btn" round open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
      <div class="login-btn-content">
        <div class="wechat-img"></div>
        <div>微信登陆</div>
      </div>
    </van-button>

    <view class="canseLogin" @click="gotoHome()">
      取消登录
    </view>
  </div>
</template>

<script>
/**
 * saveCode
 * getPhone
 */
import { code2Session, zyycLogin } from '@/api/login';
export default {
  components: {},
  data() {
    return {
      path: '/pages/index/main',
      lanuch: true
    };
  },
  mounted() {
    wx.login({
      success(result) {
        if (result.code) {
          code2Session({
            code: result.code
          }).then(res => {
            if (res.status === '200') {
              wx.setStorageSync('openid', res.data);
            };
          });
        }
      }
    });
  },
  methods: {
    gotoHome () {
      console.log('gohome')
      wx.reLaunch({
        url: '/pages/index/main'
      })
    },
    getPhoneNumber(e) {
      wx.showLoading({
        mask: true,
        title: '加载中'
      });
      if (e.target.errMsg === 'getPhoneNumber:ok') {
        zyycLogin({
          openid: wx.getStorageSync('openid'),
          encryptedData: e.target.encryptedData,
          iv: e.target.iv
        }).then(res => {
          wx.hideLoading();
          if (res.status === '200') {
            console.log(res.data,'login data')
            wx.setStorageSync('token', res.data.token);
            wx.setStorageSync('phone', res.data.phone);
            wx.setStorageSync('userId', res.data.userId);
            wx.removeStorageSync('openid');
            if (this.path === '/pages/index/main' || this.lanuch) {
              wx.reLaunch({ url: this.path });
            } else {
              wx.redirectTo({ url: this.path });
            }
          } else {
            wx.showToast({
              title: res.message,
              icon: 'none',
              duration: 2500
            });
          }
        });
      } else {
        wx.showToast({
          title: '您没有授权, 无法享受各种优惠福利',
          icon: 'none',
          duration: 2500
        });
      }
    }
  },
  onShow() {
    const { path, lanuch } = this.$mp.query;
    this.lanuch = (lanuch + '') === 'true';
    if (path) {
      this.path = decodeURIComponent(path);
    }
  }
};
</script>

<style lang="stylus" scoped>
.login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 35%;
}

.logo-img {
  width: 180rpx;
  height: 180rpx;
}

.wechat-img {
  width: 40px;
  height: 35px;
  margin-right: 10px;
  padding-top: 10px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiMwOUJCMDciIGQ9Ik0xMDEwLjggNjI4YzAtMTQxLjItMTQxLjMtMjU2LjItMjk5LjktMjU2LjItMTY4IDAtMzAwLjMgMTE1LjEtMzAwLjMgMjU2LjIgMCAxNDEuNCAxMzIuMyAyNTYuMiAzMDAuMyAyNTYuMiAzNS4yIDAgNzAuNy04LjkgMTA2LTE3LjdsOTYuOCA1My0yNi42LTg4LjJjNzAuOS01My4yIDEyMy43LTEyMy43IDEyMy43LTIwMy4zek02MTggNTg4LjhjLTIyLjEgMC00MC0xNy45LTQwLTQwczE3LjktNDAgNDAtNDAgNDAgMTcuOSA0MCA0MGMwIDIyLTE3LjkgNDAtNDAgNDB6IG0xOTQuMy0wLjNjLTIyLjEgMC00MC0xNy45LTQwLTQwczE3LjktNDAgNDAtNDAgNDAgMTcuOSA0MCA0MC0xNy45IDQwLTQwIDQweiIgIC8+PHBhdGggZmlsbD0iIzA5QkIwNyIgZD0iTTM2Ni4zIDEwNi45Yy0xOTQuMSAwLTM1My4xIDEzMi4zLTM1My4xIDMwMC4zIDAgOTcgNTIuOSAxNzYuNiAxNDEuMyAyMzguNGwtMzUuMyAxMDYuMiAxMjMuNC02MS45YzQ0LjIgOC43IDc5LjYgMTcuNyAxMjMuNyAxNy43IDExLjEgMCAyMi4xLTAuNSAzMy0xLjQtNi45LTIzLjYtMTAuOS00OC4zLTEwLjktNzQgMC0xNTQuMyAxMzIuNS0yNzkuNSAzMDAuMi0yNzkuNSAxMS41IDAgMjIuOCAwLjggMzQgMi4xQzY5MiAyMTIuNiA1MzkuOSAxMDYuOSAzNjYuMyAxMDYuOXpNMjQ3LjcgMzQ5LjJjLTI2LjUgMC00OC0yMS41LTQ4LTQ4czIxLjUtNDggNDgtNDggNDggMjEuNSA0OCA0OC0yMS41IDQ4LTQ4IDQ4eiBtMjQ2LjYgMGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhzMjEuNS00OCA0OC00OCA0OCAyMS41IDQ4IDQ4LTIxLjUgNDgtNDggNDh6IiAgLz48L3N2Zz4K') no-repeat center  center;
}

.login-btn {
  margin-top: 30px;
}

.login-btn-content {
  width: 65vw;
  display: flex;
  justify-content: center;
  align-item: center;
}
.canseLogin{
  width: 65vw;
  padding : 20rpx 15rpx;
  text-align : center;
  font-size: 1em;
  margin-top: 1.8em;
  color: #666;
}
</style>
