<template>
  <view class="page-my">
    <view class="page-my__background"></view>
    <view class="page-my__info">
      <view class="page-my__info-avatar">
        <view class="avatar">
          <image class="image" src="/static/user_img.png" 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 }}{{ mobileFilter(freightInfo.mobile) }}</text>
          <!-- #ifdef MP-WEIXIN -->
          <open-data v-else type="userNickName"></open-data>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <text>钉钉用户</text>
          <!-- #endif -->
        </view>
        <view class="mobile">
          {{ freightInfo.enterpriseName || '' }}
        </view>
        <view class="tag-job" v-if="freightInfo.id">
          <render-dict v-if="freightInfo.job" dict="FREIGHT_ENTERPRISE_EMPLOYEE_JOB" :value="freightInfo.job"></render-dict>
          <text v-else-if="freightInfo.enterpriseAdmin">管理员</text>
        </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__list" v-if="$permission('/settlement/paymentApply')">
      <u-cell-group>
        <u-cell icon="/static/tabbar/settlement.png" icon-style="color:#333" title-style="color:#333" title="支付申请" is-link url="/pages/settlement/index"> </u-cell>
      </u-cell-group>
    </view>
    <view class="page-my__list" v-if="$permission('/settlement/paymentPlan')">
      <u-cell-group>
        <u-cell
          icon="https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/dispatch-helper-ma/svg/pay-rmb.svg"
          icon-style="color:#333"
          title-style="color:#333"
          title="支付计划"
          is-link
          url="/pages/payPlan/list"
        >
        </u-cell>
      </u-cell-group>
    </view>
    <view class="page-my__login">
      <u-button shape="circle" @click="handleRefreshVersion">检测更新</u-button>
      <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 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>
    </view>
  </view>
</template>

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

export default {
  mixins: [page],
  data() {
    return {
      loading: false,
      versionInfo: uni.getSystemInfoSync(),
    };
  },
  computed: {
    ...mapState(['authed']),
    ...mapGetters(['userInfo', 'freightInfo']),
    version() {
      return version;
    },
  },
  methods: {
    mobileFilter(value = '') {
      if (!value) return '';
      let reg = /^(\d{3})\d*(\d{4})$/;
      return value.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2');
    },
    // 登录
    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 {
    margin: $padding-md;
    background: $color-white;
    padding: $padding-md;
    border-radius: $radius-md;
    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;
      font-size: 26upx;
    }
    .tag-job {
      color: #2673fb;
      font-size: 20upx;
      margin-top: $padding-base;
      border-radius: $radius-sm;
      padding: 4upx 10upx;
      border: 1px solid #2673fb;
    }
  }
  &__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);
    }
  }
  &__list {
    margin: $padding-md;
    padding: 0 $padding-xs;
    background: $color-white;
    border-radius: $radius-md;
  }
  &__login {
    position: absolute;
    width: 100%;
    bottom: 20upx;
    .u-button {
      margin-bottom: $padding-md;
      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>