<template>
  <Page name="my" flank>
    <template #content>   
      <view class="page-my__background"></view>
      <view class="page-my__info">
        <view class="page-my__info-avatar">
          <view class="avatar">
            <image v-if="freightInfo.headImgUrl" class="image" :src="freightInfo.headImgUrl" mode="aspectFill" />
            <!-- #ifdef MP-WEIXIN -->
            <open-data v-else type="userAvatarUrl"></open-data>
            <!-- #endif -->
            <!-- #ifndef MP-WEIXIN -->
              <!-- #ifdef MP-DINGTALK -->
              <image class="image" :src="formatImagePath('dingtalk', 'svg')" mode="aspectFill"></image>
              <!-- #endif -->
              <!-- #ifndef MP-DINGTALK -->
              <image class="image" :src="formatImagePath('avatar-none', 'svg')" mode="aspectFill"></image>
              <!-- #endif -->
            <!-- #endif -->
          </view>
        </view>
        <view class="page-my__info-content">
          <view class="name">
            <text v-if="freightInfo.name">{{ freightInfo.name }}</text>
            <!-- #ifdef MP-WEIXIN -->
            <open-data v-else type="userNickName"></open-data>
            <!-- #endif -->
            <!-- #ifndef MP-WEIXIN -->
            <text>钉钉用户</text>
            <!-- #endif -->
          </view>
          <view class="mobile">
            <render-mobile :value="userInfo.mobile" />
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view class="refresh-version" @click.stop="handleRefreshVersion">
            <view :class="[loading && 'loading']"><u-icon name="reload" size="20" /></view>
            <text>检测更新</text>
          </view>
          <!-- #endif -->
        </view>
      </view>
      <view class="page-my__login">
        <template v-if="authed">
          <u-button shape="circle" @click="handleLogout">退出登录</u-button>
        </template>
        <template v-else>
          <u-button shape="circle" @click="handleLogin">立即登录</u-button>
        </template>
      </view>
      <view class="card-version">
        <text class="cell-version">SDK: {{versionInfo.SDKVersion}}</text>
        <text class="cell-version">wechat: {{versionInfo.version}}</text>
        <text class="cell-version" v-if="version">version: {{version}}</text>
      </view>
    </template>
  </Page>
</template>

<script>
import cache from '@/utils/cache';
import { mapState, mapGetters } from 'vuex';
import { version } from '@/config';

export default {
  data() {
    return {
      loading: false,
      versionInfo: uni.getSystemInfoSync(),
    }
  },
  computed: {
    ...mapState(['authed']),
    ...mapGetters(['userInfo', 'freightInfo']),
    version() {
      return version;
    }
  },
  methods: {
    // 登录
    handleLogin() {
      uni.navigateTo({ url: '/pages/login/login' });
    },
    // 退出登录
    handleLogout() {
      if (this.authed) {
        uni.showModal({
          title: '提示',
          content: '确定退出登录吗？',
          confirmColor: '#f5222d',
          // #ifdef MP-DINGTALK
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // #endif
          success: res => {
            if (res.confirm) {
              // uni.$u.api.login.unbind().then(success => {
                // if (success) {
                  uni.showToast({ title: '退出成功', icon: 'none' });
                  this.$store.commit('LOGOUT');
                  uni.reLaunch({ url: '/pages/login/login' });
                // }
              // });
            }
          }
        });
      } else {
        uni.showToast({ title: '您还未登录', icon: 'none' });
      }
    },
    // 检测更新
    handleRefreshVersion() {
      uni.$emit('refresh-version');
      this.loading = true;
      setTimeout(() =>{
        this.loading = false;
      }, 2000);
    }
  }
}
</script>

<style lang="scss">
.page-my {
  box-sizing: border-box;
  overflow-x: hidden;
  &__info {
    padding-top: $padding-md * 6;
    padding-bottom: $padding-md * 3;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    .avatar {
      width: 128upx;
      height: 128upx;
      border-radius: 50%;
      overflow: hidden;
      font-size: 0;
      filter: blur(0);
      .image {
        height: 100%;
        width: 100%;
        font-size: 0;
      }
    }
    &-content {
      padding-left: $padding-md;
      flex: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      .refresh-version {
        position: absolute;
        right: 0;
        top: 16px;
        display: flex;
        align-items: center;
        font-size: $font-md;
        color: $color-text-minor;
      }
    }
    .name {
      font-weight: bold;
      font-size: $font-lg;
    }
    .mobile {
      color: $color-text-minor;
    }
  }
  &__background {
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(300upx);
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    &::before {
      position: absolute;
      content: '';
      top: 600upx;
      left: -100upx;
      height: 300upx;
      width: 300upx;
      transform: rotate(45deg);
      background-color: rgba($color-zy-orange, 0.3);
    }
    &::after {
      position: absolute;
      content: '';
      top: 0upx;
      left: 300upx;
      height: 600upx;
      width: 600upx;
      transform: rotate(45deg);
      background-color: rgba($color-primary, 0.3);
    }
  }
  &__login {
    margin-top: $padding-md * 24;
    .u-button {
      box-shadow: $shadow-normal;
    }
  }
  .button-cell {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background-color: inherit;
    line-height: inherit;
    padding: $padding-sm $padding-md;
    border-radius: 0;
    border-top-left-radius: $radius-md;
    border-top-right-radius: $radius-md;
    box-sizing: border-box;
    &::after {
      display: none;
    }
    &__left-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: $color-primary;
      margin-right: $padding-base;
      .u-icon {
        margin-right: $padding-md;
        &__icon {
          font-size: $font-lg !important;
        }
      }
    }
    &__title {
      color: $color-text;
      font-size: $font-md;
      flex: auto;
      text-align: left;
    }
    &__right-icon {
      color: $color-text-caption;
    }
    &__line {
      margin: 0;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      width: 100%;
      transform: scaleY(0.5);
      border-color: rgba(151, 151, 151, 0.2);
      position: absolute;
      bottom: 0;
      right: 0;
      margin-left: $padding-md;
      width: calc(100% - 24rpx);
    }
    &--hover {
      background-color: #f3f4f6;
    }
  }

  .loading {
    animation: _loading 1s ease 2;
  }
  @keyframes _loading {
    from {
      transform: rotateZ(0deg);
    }
    to {
      transform: rotateZ(360deg);
    }
  }
  .card-version {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #999999;
    line-height: 30rpx;
    text-align: left;
    font-style: normal;
    .cell-version {
      margin: 0 8rpx;
    }
  }
}
</style>