<template>
  <view class="profile">
    <view class="user-header">
      <view v-if="userInfo.show_id && userInfo.session" class="user-box">
        <image class="avatar" :src="userInfo.avatar" mode=""></image>
        <view class="user-body">
          <text class="user-name">
            {{ userInfo.nickname }}
          </text>
          <text class="user-id" @click="handleCopyId"
            >ID: {{ userInfo.show_id }} <text class="copy">复制</text></text
          >
        </view>
        <button class="user-btn" @tap="logout">退出登录</button>
      </view>
      <view v-else class="user-box">
        <image
          class="avatar"
          :src="require('@/assets/my/userimg.png')"
          mode=""
        ></image>
        <button class="user-btn" @tap="onLoginTap">点击登录</button>
      </view>
      <view class="my-balance">
        <view class="my-balance-item" @click="jump('../task/index')">
          <view class="num">{{ userInfo.score ? userInfo.score : "0" }}</view>
          <view class="label">任务积分</view>
        </view>
        <view class="my-balance-item" @click="jump('./coupon')">
          <view class="num">{{
            userInfo.coupon_count ? userInfo.coupon_count : "0"
          }}</view>
          <view class="label">红包卡券</view>
        </view>
      </view>
    </view>
    <view class="my-main">
      <view class="my-title">
        <text>我的订单</text>
        <view class="my-title-sub" @click="jump('../order/order?tabIndex=1')">
          <text>全部订单</text>
          <image
            class="icon-more"
            :src="require('@/assets/my/icon-more.png')"
          ></image>
        </view>
      </view>
      <view class="my-icon-list">
        <view
          v-for="item in datas"
          :key="item.name"
          class="my-icon-item"
          @click="jump(item.url)"
        >
          <image class="my-icon" :src="item.image"></image>
          {{ item.name }}
        </view>
      </view>
      <view class="my-title">其他功能</view>
      <view class="my-icon-list">
        <view
          v-for="item in datas1"
          :key="item.name"
          class="my-icon-item"
          @click="jump(item.url)"
        >
          <image class="my-icon" :src="item.image"></image>
          <view
            v-if="item.showTip && Number(userInfo.unread_count || '0') > 0"
            class="my-tip"
          ></view>
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import login from "@/lib/utils/login";
import api from "@/lib/api/api";

export default {
  name: "PageMy",
  data() {
    return {
      testInt: 1,
      rechargeList: [
        {
          text: "充300元",
          num: 300,
          type: 1,
          getNum: "得310元",
        },
        {
          text: "充500元",
          num: 500,
          type: 1,
          getNum: "得520元",
        },
        {
          text: "充1000元",
          num: 1000,
          type: 1,
          getNum: "得1050元",
        },
      ],
      userInfo: {},
      datas: [
        {
          name: "寄存盒柜",
          image: require("@/assets/my/icon-box.png"),
          url: "../order/unsend",
        },
        {
          name: "待发货",
          image: require("@/assets/my/icon-waiting.png"),
          url: "../order/sended",
        },
        {
          name: "待收货",
          image: require("@/assets/my/icon-shipped.png"),
          url: "../order/sended",
        },
        {
          name: "已完成",
          image: require("@/assets/my/icon-finished.png"),
          url: "../order/sended",
        },
      ],
      datas1: [
        {
          name: "邀请好友",
          image: require("@/assets/my/icon-friend.png"),
          url: "./invite",
        },
        {
          name: "收货地址",
          image: require("@/assets/my/icon-address.png"),
          url: "../address/address",
        },
        {
          name: "我的客服",
          image: require("@/assets/my/icon-service.png"),
          url: "../help/help_contact",
        },
        // {
        //   name: "消息中心",
        //   image: require("@/assets/my/icon-message.png"),
        //   url: "./messages",
        //   showTip: true,
        // },
        {
          name: "帮助中心",
          image: require("@/assets/my/icon-help.png"),
          url: "../help/help",
        },
      ],
    };
  },
  onShow() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      this.getUserInfo();
    } else {
      this.userInfo = {};
    }
  },
  onPullDownRefresh() {
    if (JSON.stringify(this.userInfo) == "{}") {
      uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
      return;
    }
    this.getUserInfo();
  },
  methods: {
    //获取个人信息
    getUserInfo() {
      api
        .userInfo(this.userInfo.session)
        .then((data) => {
          this.userInfo = { ...this.userInfo, ...data.data };
          uni.setStorageSync("userinfo", JSON.stringify(this.userInfo));
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        })
        .catch((e) => {
          console.error(e);
        });
    },
    logout() {
      login.logout();
      this.userInfo = {};
    },
    // 获取用户头像和昵称
    onLoginTap() {
      return new Promise((resolve, reject) => {
        login.wxLogin((userInfo) => {
          if (userInfo.session) {
            this.userInfo = userInfo;
            this.getUserInfo();
            if (userInfo.coupons && userInfo.coupons.is_bind_coupon === 1) {
              uni.showToast({
                icon: "none",
                title: userInfo.coupons.is_bind_info || "登录成功~",
                duration: 2e3,
                mask: true,
              });
              setTimeout(() => {
                resolve();
              }, 2000);
            } else {
              resolve();
            }
          } else reject();
        });
      });
    },
    async jump(url) {
      try {
        if (!this.userInfo.session) {
          uni.showToast({
            title: "请先登录",
            icon: "none",
          });
          await this.onLoginTap();
        }

        uni.navigateTo({
          url: url,
        });
      } catch (e) {}
    },

    handleCopyId() {
      uni.setClipboardData({
        data: this.userInfo.show_id,
      });
    },
  },
};
</script>

<style lang="scss">
.profile {
  width: 100%;
  padding: 0;
  .user-header {
    background-color: #f7f6fb;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    padding: 30rpx 30rpx 0;
  }
  .user-box {
    display: flex;
    align-items: center;
    .avatar {
      width: 96rpx;
      height: 96rpx;
      margin-right: 18rpx;
      border-radius: 100%;
    }
    .user-btn {
      min-width: 160rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 56rpx;
      margin: 0;
      font-size: 28rpx;
      color: #000000;
      padding: 0 24rpx;
      background: transparent;
      &::after {
        border-radius: 56rpx;
        border-color: #000000;
      }
    }
    .user-body {
      flex: 1;
      margin-right: 18rpx;
      .user-name,
      .user-id {
        display: block;
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #292d3b;
        line-height: 44rpx;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .user-id {
        font-size: 24rpx;
        color: #9496a5;
        line-height: 34rpx;
      }
      .copy {
        margin-left: 20rpx;
        color: #08c2c3;
      }
    }
  }
  .my-balance {
    display: flex;
    text-align: center;
    margin: 36rpx 0 32rpx;
    .my-balance-item {
      width: 0;
      flex: 1;
      .num {
        height: 52rpx;
        font-size: 44rpx;
        font-weight: bold;
        color: #222222;
        line-height: 52rpx;
      }
      .label {
        height: 36rpx;
        font-size: 26rpx;
        color: #888888;
        line-height: 30rpx;
        margin-top: 2rpx;
      }
    }
  }
  .my-balance-bar {
    height: 96rpx;
    background: #313341;
    display: flex;
    align-items: center;
    padding: 0 32rpx;

    font-size: 28rpx;
    color: #ffffff;
    .my-balance-text {
      flex: 1;
      width: 0;
      .big {
        font-size: 46rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }
    .my-balance-btn {
      height: 56rpx;
      line-height: 56rpx;
      background: #4efbff;
      padding: 0 20rpx;
      font-size: 30rpx;
      color: #000000;
      border-radius: 0;
      font-weight: 500;
      &::after {
        display: none;
      }
    }
  }
  .my-main {
    padding: 42rpx 30rpx;
    background: #fff;
    .my-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48rpx;
      font-size: 34rpx;
      font-weight: 600;
      color: #222222;
    }
    .my-title-sub {
      font-size: 26rpx;
      font-weight: 400;
      color: #555555;
      display: flex;
      align-items: center;
      .icon-more {
        width: 20rpx;
        height: 20rpx;
        margin-left: 6rpx;
      }
    }
  }
  .my-icon-list {
    display: flex;
    text-align: center;
    padding: 23rpx 0;
    margin-bottom: 86rpx-48rpx-25rpx;
    flex-wrap: wrap;
    .my-icon-item {
      width: 25%;
      font-size: 24rpx;
      color: #555555;
      line-height: 28rpx;
      margin: 25rpx 0;
      position: relative;
      .my-icon {
        display: block;
        width: 52rpx;
        height: 52rpx;
        margin: 0 auto 12rpx;
      }
      .my-tip {
        position: absolute;
        box-sizing: border-box;
        width: 22rpx;
        height: 22rpx;
        border-radius: 22rpx;
        background: #eb5757;
        border: 2rpx solid #ffffff;
        top: -4rpx;
        left: 50%;
        margin-left: 14rpx;
      }
    }
  }
}
</style>
