<template>
  <view>
    <u-navbar title="我的" bgColor="transparent"></u-navbar>
    <view class="topBgBox">
      <view class="name flexA">
        <!-- <image src="../../static/logo.png" mode=""></image>
				<text>阅读</text> -->
        <!-- <view class="avatar"> -->
        <img class="avatar" :src="userInfo.avatar" alt="" />
        <!-- <open-data type="userAvatarUrl"></open-data> -->
        <!-- </view> -->
        <view class="nicName">
          {{ userInfo.nickname }}
          <!-- <open-data type="userNickName"></open-data> -->
        </view>
      </view>
      <view class="vipBox">
        <image class="blackBg" src="/static/mineIc/blackBg.png" mode=""></image>
        <view class="vip flexJ">
          <view>
            <view class="title flexA">
              <image src="/static/mineIc/Vector.png" mode=""></image>
              会员中心
            </view>
            <view class="tip">充值会员享更多权益</view>
          </view>
          <view class="btn flexC" @click="toRecharg">立即充值</view>
        </view>
      </view>
    </view>
    <view class="mainBox">
      <view class="orderClass">
        <view class="classTitle flexJ" @click="orderStatus(5)">
          <view class="my">我的订单</view>
          <view class="all flexA">
            全部
            <image src="/static/mineIc/gayRight.png" mode=""></image>
          </view>
        </view>
        <view class="classBox flexJ">
          <view class="items flexV" v-for="(item, index) in classList" :key="item.id" @click="orderStatus(index)">
            <view class="badge">
              <u-badge absolute :offset="[-4, -10]" color="#FFFFFF" bgColor="#F74637" max="99" :value="item.num"></u-badge>
              <image :src="item.ic" mode=""></image>
            </view>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
      <view class="functionBox">
        <view class="item flexJ" v-for="(item, index) in functionList" :key="item.id" @click="functionC(index)">
          <view class="itemIc flexA">
            <image :src="item.ic" mode=""></image>
            <text>{{ item.name }}</text>
          </view>
          <image src="/static/mineIc/gayRight.png" mode=""></image>
        </view>
        <view class="myService flexJ">
          <view class="service flexA">
            <image src="/static/indexIc/service.png" mode=""></image>
            <text>我的客服</text>
          </view>
          <image src="/static/mineIc/gayRight.png" mode=""></image>
          <button open-type="contact"></button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getMine } from '@/api/'

const userInfo = ref({})

// userInfo.value = uni.getStorageSync('userInfo') ?? {}

onShow(() => {
  getMines()
})
let classList = reactive([
  { id: 1, name: '待付款', num: 0, ic: '/static/mineIc/obligation.png' },
  { id: 2, name: '待发货', num: 0, ic: '/static/mineIc/shipped.png' },
  { id: 3, name: '待收货', num: 0, ic: '/static/mineIc/received.png' },
  { id: 4, name: '待评价', num: 0, ic: '/static/mineIc/evaluated.png' },
  { id: 5, name: '售后', num: 0, ic: '/static/mineIc/afterSales.png' }
])
let functionList = reactive([
  { id: 1, name: '我的余额', ic: '/static/mineIc/balance.png' },
  { id: 2, name: '我的积分', ic: '/static/mineIc/collect.png' },
  { id: 3, name: '我的地址', ic: '/static/mineIc/addressBlack.png' }
])
let info = ref({})
// 订单跳转
const orderStatus = index => {
  uni.navigateTo({
    url: `/pages/mine/myOrder?status=${index == 5 ? 0 : Number(index) + 1}`
  })
}
// 功能跳转
const functionC = index => {
  // uni.navigateTo({
  // 	url:'/pages/mine/' + ( index < 2 ? 'myPoints' : index==1 ? 'myCollection' :'myAddress' )
  // })
  if (index < 2) {
    uni.navigateTo({
      url: `/pages/mine/myPoints?type=${index}`
    })
  } else {
    uni.navigateTo({
      url: '/pages/mine/myAddress'
    })
  }
}
// 跳转充值中心
const toRecharg = () => {
  uni.navigateTo({ url: '/pages/mine/recharge' })
}
// 个人信息
const getMines = async () => {
  try {
    const res = await getMine()
    classList[0].num = res.dfk
    classList[1].num = res.dfh
    classList[2].num = res.dsh
    classList[3].num = res.dpj
    classList[4].num = res.yth
    userInfo.value = res.userInfo
    userInfo.value.avatar = res.avatar
    console.log('getMine', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getMine', err)
  }
}
</script>

<style lang="scss">
.u-icon__icon {
  display: none !important;
}

page {
  background-color: #f6f8fa;
}

.topBgBox {
  width: 100%;
  height: 520rpx;
  padding: 202rpx 24rpx 26rpx;
  box-sizing: border-box;
  opacity: 1;
  background: linear-gradient(180deg, #ffece3ff 0%, #f7f8faff 100%);

  .name {
    margin-bottom: 32rpx;

    .avatar {
      overflow: hidden;
      margin-right: 40rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50% !important;
    }
    .nicName {
      color: #000000e6;
      font-size: 40rpx;
      font-weight: 700;
    }
  }

  .vipBox {
    position: relative;
    width: 702rpx;
    height: 140rpx;

    .blackBg {
      width: 100%;
      height: 100%;
    }

    .vip {
      width: 642rpx;
      position: absolute;
      top: 28rpx;
      left: 28rpx;

      .title {
        color: #ffdcb5ff;
        font-size: 30rpx;
        font-weight: 700;

        image {
          margin-right: 8rpx;
          width: 58rpx;
          height: 26rpx;
        }
      }

      .btn {
        width: 136rpx;
        height: 56rpx;
        border-radius: 34rpx;
        color: #361e0dff;
        font-size: 26rpx;
        font-weight: 700;
        background: linear-gradient(142.6deg, #fbcd9bff 0%, #ebc295ff 100%);
        box-shadow: inset 0 -6rpx 8rpx 0 #9760217d;
      }

      .tip {
        color: #ffffffb3;
        font-size: 22rpx;
        margin-top: 16rpx;
      }
    }
  }
}

.mainBox {
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;

  .orderClass {
    width: 100%;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    background: #fff;

    .classTitle {
      margin-bottom: 28rpx;

      .my {
        color: #323233ff;
        font-size: 30rpx;
        font-weight: 700;
      }

      .all {
        color: #969799ff;
        font-size: 26rpx;

        image {
          margin: 4rpx 0 0 12rpx;
          width: 16rpx;
          height: 32rpx;
        }
      }
    }

    .classBox {
      .items {
        .badge {
          position: relative;

          image {
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 16rpx;
          }
        }

        text {
          color: #646566ff;
          font-size: 24rpx;
        }
      }
    }
  }

  .functionBox {
    width: 100%;
    padding: 0 32rpx 0 24rpx;
    box-sizing: border-box;
    border-radius: 34rpx;
    margin-top: 24rpx;
    background-color: #fff;

    .item {
      width: 100%;
      height: 104rpx;

      .itemIc {
        text {
          color: #000000e6;
          font-size: 28rpx;
        }

        image {
          margin-right: 24rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }

      image {
        width: 16rpx;
        height: 32rpx;
      }
    }

    .myService {
      position: relative;
      width: 100%;
      height: 104rpx;

      .service {
        image {
          margin-right: 24rpx;
          width: 36rpx;
          height: 36rpx;
        }

        text {
          color: #000000e6;
          font-size: 28rpx;
        }
      }

      button {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: transparent;
        &::after {
          border: none;
        }
      }

      image {
        width: 16rpx;
        height: 32rpx;
      }
    }
  }
}
</style>