<template>
  <view class='set'>
    <view class="set-content">
      <view class="set-item flex justify-between align-center">
        <view class="item-left">手机号</view>
        <view class="item-right" v-if="user">{{ user.phone | phoneFilter }}</view>
        <view class="item-right" v-else>暂未绑定</view>
      </view>
      <view class="set-item flex justify-between align-center">
        <view class="item-left">微信</view>
        <view class="item-right">已绑定</view>
      </view>
    </view>
    <view class="cu-btn block logout" @tap.stop="logout">退出登录</view>
    <view class="version">当前版本1.0.0</view>  
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {

    }
  },

  computed: {
    ...mapState({
      user: 'user'
    })
  },

  filters: {
    phoneFilter(val) {
      if(!val) return '暂未绑定';
      let reg = /^(\d{3})\d{4}(\d{4})$/;
      let tel = val.replace(reg, "$1****$2");
      return tel;
    }
  },

  onLoad() {},

  onShow() {},

  methods: {
    logout() {
      uni.showModal({
        content: '确定退出登录？',
        success: confirmRes => {
          if (confirmRes.confirm) {
            this.$mStore.commit('logout');
            this.$mRouter.push({
              route: '/pages/login/index'
            })
          }
        }
      });
    }
  }

}
</script>

<style lang="scss">
page {
  background: #F9F7F7;
}
.set {
  padding: 24upx 32upx ;
  .set-content {
    background: $color-white;
    box-shadow: 0px 0px 12upx 0px rgba(235, 235, 235, 0.5);
    border-radius: 20upx;
    padding: 32upx 24upx 32upx 32upx;
    .set-item {
      font-size: 0;
      margin-bottom: 64upx;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .item-left {
      font-size: 32upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 36upx;
    }
    .item-right {
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 32upx;
    }
  }
  .logout {
    margin-top: 24upx;
    height: 92upx;
    background: #FFFFFF;
    box-shadow: 0px 0px 12upx 0px rgba(235, 235, 235, 0.5);
    border-radius: 8upx;
    font-size: 28upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #161616;
  }
  .version {
    margin-top: 80upx;
    font-size: 28upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    text-align: center;
  }
}
</style>
