<template>
  <layout class="user">
    <uv-navbar
      :fixed="false"
      :safeAreaInsetTop="true"
      height="0"
      bgColor="transparent"
      leftIcon=""
    />

    <container>
      <view
        class="user-card"
        v-if="main.user"
      >
        <view
          class="avatar-box"
          @tap=""
        >
          <button
            class="avatar"
            open-type="chooseAvatar"
            @chooseavatar="handleChooseAvatar"
          >
            <image :src="main.user.avatar" />
          </button>
          <view class="avatar-name">
            {{ main.user.nickname }}
          </view>
        </view>
      </view>
      <view
        class="user-card"
        v-else
        @tap="$yrouter.navigateTo({ url: '/pages/login/login' })"
      >
        <view class="avatar-box">
          <view class="avatar">
            <image :src="main?.user?.avatar" />
          </view>
          <view class="avatar-name">
            点击登录
          </view>
        </view>
      </view>
      <view class="card">
        <view
          class="card-head"
          @tap="goOrderList(-1)"
        >
          <view class="card-title">我的订单</view>
          <view class="card-more"><span>
              查看全部订单
            </span>
            <uv-icon name="arrow-right" />
          </view>
        </view>
        <view class="card-content">
          <uv-grid
            :border="false"
            :col="4"
            :gutter="0"
          >
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goOrderList(0)"
              >
                <view class="card-grid-item-badge">
                  <uv-badge
                    type="error"
                    max="99"
                    :value="orderUserCountData?.unpaidCount"
                  />
                </view>
                <img
                  class="image"
                  src="@/static/images/icon-dfk.png"
                  alt=""
                >
                <span class="card-grid-item-label">待付款</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goOrderList(1)"
              >
                <view class="card-grid-item-badge">
                  <uv-badge
                    type="error"
                    max="99"
                    :value="orderUserCountData?.unshippedCount"
                  />
                </view>
                <img
                  class="image"
                  src="@/static/images/icon-dfh.png"
                  alt=""
                >
                <span class="card-grid-item-label">待发货</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goOrderList(2)"
              >
                <view class="card-grid-item-badge">
                  <uv-badge
                    type="error"
                    max="99"
                    :value="orderUserCountData?.receivedCount"
                  />
                </view>
                <img
                  class="image"
                  src="@/static/images/icon-dsh.png"
                  alt=""
                >
                <span class="card-grid-item-label">待收货</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goOrderList(3)"
              >
                <view class="card-grid-item-badge">
                  <uv-badge
                    type="error"
                    max="99"
                    :value="orderUserCountData?.evaluatedCount"
                  />
                </view>
                <img
                  class="image"
                  src="@/static/images/icon-dpj.png"
                  alt=""
                >
                <span class="card-grid-item-label">待评价</span>
              </view>
            </uv-grid-item>
          </uv-grid>
        </view>
      </view>
      <blank size="10"></blank>

      <view class="card">
        <view class="card-content">
          <uv-grid
            :border="false"
            :col="4"
            :gutter="0"
          >
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goFootprint()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-wdzj.png"
                  alt=""
                >
                <span class="card-grid-item-label">我的足迹</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="$toAuth()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-yhq.png"
                  alt=""
                >
                <span class="card-grid-item-label">优惠券</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goCollect()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-wdsc.png"
                  alt=""
                >
                <span class="card-grid-item-label">我的收藏</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="$toAuth()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-kqzb.png"
                  alt=""
                >
                <span class="card-grid-item-label">开启直播</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="$toAuth()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-wdtg.png"
                  alt=""
                >
                <span class="card-grid-item-label">我的推广</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="$toAuth()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-kqjl.png"
                  alt=""
                >
                <span class="card-grid-item-label">砍价记录</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="toRefundList()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-kqjl.png"
                  alt=""
                >
                <span class="card-grid-item-label">售后记录</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="$toAuth()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-lxkf.png"
                  alt=""
                >
                <span class="card-grid-item-label">联系客服</span>
              </view>
            </uv-grid-item>
          </uv-grid>
        </view>
      </view>
      <blank size="10"></blank>
      <view class="card">
        <view class="card-content">
          <uv-grid
            :border="false"
            :col="4"
            :gutter="0"
          >
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goAddress()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-zhsz.png"
                  alt=""
                >
                <span class="card-grid-item-label">地址管理</span>
              </view>
            </uv-grid-item>
            <uv-grid-item>
              <view
                class="card-grid-item"
                @tap="goUserInfo()"
              >
                <img
                  class="image"
                  src="@/static/images/icon-zhsz.png"
                  alt=""
                >
                <span class="card-grid-item-label">账号设置</span>
              </view>
            </uv-grid-item>
          </uv-grid>
        </view>
      </view>
    </container>
    <blank size="15"></blank>

  </layout>
</template>

<script setup>
import { ref } from 'vue'

import { orderUserCount } from '@/api/order'

import { onShow } from '@dcloudio/uni-app'
import { navigateTo } from '@/utils/router'

import { updateAvatar } from '@/api/user'

import { useMainStore } from '@/store/store'
const main = useMainStore()
console.log("--> % main:\n", main)

const orderUserCountData = ref(null)

const handleOrderUserCount = async () => {
  let res = await orderUserCount()
  orderUserCountData.value = res
}

const goOrderList = (type) => {
  navigateTo({
    url: "/pages/orderList/orderList",
    query: {
      type
    }
  });
}

const goCollect = (type) => {
  navigateTo({
    url: "/pages/collect/collect",
    query: {

    }
  });
}

const goFootprint = (type) => {
  navigateTo({
    url: "/pages/footprint/footprint",
    query: {

    }
  });
}

const goAddress = () => {
  navigateTo({
    url: "/pages/address/address"
  });

}

const toNot = () => {
  uni.showToast({
    title: '暂未开放',
    icon: 'none',
    duration: 2000,
  })
}

const toRefundList = () => {
  navigateTo({
    url: "/pages/refundList/refundList"
  });
}

const goUserInfo = () => {
  navigateTo({
    url: "/pages/userInfo/userInfo"
  });
}

const handleChooseAvatar = async (e) => {
  const { detail } = e

  uni.showLoading({
    title: '加载中'
  });
  await updateAvatar({
    avatarFile: detail.avatarUrl
  })
  uni.hideLoading()
  main.getUserInfo()
  console.log("gxs --> % handleChooseAvatar % e:\n", e)

}

onShow(() => {
  handleOrderUserCount()
  main.getUserInfo()
})


</script>

<style lang="less">
.user-card {
  padding: 50rpx 0;

  button {
    border: 0;
    background: none;

    &:after {
      display: none;
    }
  }
}

.avatar-box {
  display: flex;
  align-items: center;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    background: #FFFFFF;
    border-radius: 50%;
    opacity: 1;
    margin: 0 30rpx;
  }

  .avatar-name {
    font-size: 34rpx;
    color: #333333;
  }
}
</style>
