<template>
  <view>
    <view class="mine" v-if="token">
      <image class="bg" src="/static/pic-wd-bg@2x.png" />
      <view class="content">
        <view class="content_detail">
          <!-- 头像信息 -->
          <view class="head_box">
            <view class="head">
              <image mode="aspectFill" class="head_img" :src="userDetail.avatarUrl" />
            </view>
            <view class="name">{{ userDetail.nickName }}</view>
            <view class="integral_msg" @click="myIntegral">
              <view class="msg_left">
                <image mode="aspectFill" class="integral_icon" src="/static/icon/ic_jifen@2x.png" />
                <view class="number">{{ userDetail.integral }}</view>
              </view>
              <view class="msg_right">
                <view class="withdrawal">提现</view>
                <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
              </view>
            </view>
          </view>

          <view class="my_item_box">
            <!-- 我的随手拍 -->
            <view class="my_items" @click="myPhoto">
              <view class="my_item_left">
                <image mode="aspectFill" class="task_icon" src="/static/icon/ic_wd_ssp@2x.png" />
                <view class="item_name">我的随手拍</view>
              </view>
              <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right1@2x.png" />
            </view>
            <!-- 关于我们 -->
            <view class="my_items" @click="about">
              <view class="my_item_left">
                <image mode="aspectFill" class="task_icon" src="/static/icon/ic_wd_gy@2x.png" />
                <view class="item_name">关于我们</view>
              </view>
              <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right1@2x.png" />
            </view>
            <!-- 注销登录 -->
            <view class="my_items" @click="tailor">
              <view class="my_item_left">
                <image mode="aspectFill" class="task_icon" src="/static/icon/ic_wd_srdz@2x.png" />
                <view class="item_name">注销登录</view>
              </view>
              <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right1@2x.png" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="unauthorized" v-else>
      <view class="unauthorized_box" v-if="canIUseGetUserProfile">
        <view class="unauthorized_tip">未授权登录</view>
        <button class="unauthorized_btn" bindtap="getUserProfile">去授权</button>
      </view>
      <view class="unauthorized_box" v-else>
        <view class="unauthorized_tip">未授权登录</view>
        <button class="unauthorized_btn" bindtap="getUserProfile">去授权</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: null,
      canIUseGetUserProfile: false,
      userDetail: {},
    };
  },

  onLoad(query) {},

  onShow() {
    this.token = '1234qwer1234';
    this.fetchUserInfo();
  },

  methods: {
    async fetchUserInfo() {
      const { detail } = await uni.$u.http.get('/api/user_center/detail');
      this.userDetail = detail;
    },

    myPhoto() {
      uni.$u.route({ url: 'pages/mine-picture/index' });
    },

    about() {
      uni.$u.route({ url: 'pages/mine-about/index' });
    },

    async tailor() {
      try {
        await uni.$u.http.get('/api/user/logout', { params: { token: '' } });
        uni.$u.toast('注销登录成功');
      } finally {
      }
    },

    myIntegral() {
      uni.$u.route({ url: 'pages/mine-integral/index' });
    },
  },
};
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
