<script setup lang="ts">
import { pageUrl } from '@/utils/constants'
import { getDashboardApi } from '@/api/member'
import { useAddressStore, useMemberStore, useSettingStore } from '@/stores'
import { computed, ref } from 'vue'
import type ZPagingInstance from '@/uni_modules/z-paging/global'
import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import { onShowRefreshData } from '@/utils/common'
import { reactive } from 'vue'
import blockIcon from '@/pages/my/components/blockIcon.vue'

const memberStore = useMemberStore()
const addressStore = useAddressStore()
const settingStore = useSettingStore()

addressStore.changeScene('list')

const dashboard = reactive({
  rights: {
    balance: '0',
    coupon_num: '0',
    favorite_num: '0',
  },
  order_bar: {
    to_pay: '',
    to_ship: '',
    to_receive: '',
    to_evaluate: '',
    refund: '',
  },
  coupon: {
    eligibility: true,
  },
})

const orderSection = computed(() => {
  return [
    {
      name: '待付款',
      icon: 'icon-to-pay',
      count: dashboard.order_bar.to_pay,
      url: `${pageUrl['order-list']}?status=1`,
    },
    {
      name: '待发货',
      icon: 'icon-to-ship',
      count: dashboard.order_bar.to_ship,
      url: `${pageUrl['order-list']}?status=2`,
    },
    {
      name: '待收货',
      icon: 'icon-to-receive',
      count: dashboard.order_bar.to_receive,
      url: `${pageUrl['order-list']}?status=3`,
    },
    {
      name: '待评价',
      icon: 'icon-to-evaluate',
      count: dashboard.order_bar.to_evaluate,
      url: `${pageUrl['order-list']}?status=4`,
    },
    {
      name: '退款/售后',
      icon: 'icon-refund',
      count: dashboard.order_bar.refund,
      url: `${pageUrl['order-refund-list']}?status=1`,
    },
  ]
})

const couponSection = computed(() => {
  return [
    {
      name: '待使用',
      icon: 'icon-coupon-to-use',
      count: '',
      url: `${pageUrl['coupon']}?status=1`,
    },
    {
      name: '已使用',
      icon: 'icon-coupon-used',
      count: '',
      url: `${pageUrl['coupon']}?status=2`,
    },
    {
      name: '已过期',
      icon: 'icon-coupon-expired',
      count: '',
      url: `${pageUrl['coupon']}?status=3`,
    },
    {
      name: '领券中心',
      icon: 'icon-coupon-center',
      count: dashboard.coupon.eligibility ? 'New' : '',
      url: `${pageUrl['coupon-center']}`,
    },
  ]
})

const agreements = settingStore.data.agreement
const serviceSection = computed(() => {
  return [
    {
      name: '我的地址',
      iconPath: '/static/icons/my-address.svg',
      count: '',
      url: `${pageUrl['address']}`,
    },
    {
      name: '充值中心',
      iconPath: '/static/icons/balance.svg',
      count: '',
      url: `${pageUrl['balance-recharge']}`,
    },
    {
      name: '订单中心',
      iconPath: '/static/icons/order-center.svg',
      count: '',
      url: `${pageUrl['order-center']}`,
    },
    {
      name: '设置',
      iconPath: '/static/icons/setting.svg',
      count: '',
      url: `${pageUrl['setting']}`,
    },
    {
      name: '我的收藏',
      icon: 'icon-my_favorite',
      iconPath: '/static/icons/my-favorite.svg',
      count: '',
      url: `${pageUrl['favorite']}`,
    },
    {
      name: '用户协议',
      iconPath: '/static/icons/user-agreement.svg',
      count: '',
      url: `${pageUrl['rich-text']}?title=用户协议&content=${encodeURIComponent(
        agreements.user_agreement,
      )}`,
    },
    {
      name: '隐私协议',
      iconPath: '/static/icons/privacy-agreement.svg',
      count: '',
      url: `${pageUrl['rich-text']}?title=隐私协议&content=${encodeURIComponent(
        agreements.privacy_agreement,
      )}`,
    },
    {
      name: '关于我们',
      iconPath: '/static/icons/about-us.svg',
      count: '',
      url: `${pageUrl['rich-text']}?title=关于我们&content=${encodeURIComponent(
        agreements.about_us_agreement,
      )}`,
    },
  ]
})

const getData = () => {
  return new Promise(() => {
    if (memberStore.profile?.token) {
      getDashboardApi().then((res) => {
        Object.assign(dashboard, res.result)
      })
    }
  })
}

onShowRefreshData(() => {
  getData()
}, true)

const paging = ref<ZPagingInstance>()
const onRefresh = () => {
  getData()
  setTimeout(() => {
    paging.value?.complete()
  }, 1000)
}
</script>

<template>
  <view class="viewport">
    <z-paging ref="paging" refresher-only @onRefresh="onRefresh" safe-area-inset-bottom>
      <template #top>
        <!-- 已登录 -->
        <template v-if="memberStore.profile">
          <view class="profile">
            <view class="overview">
              <navigator :url="`${pageUrl['profile']}`" hover-class="none">
                <shop-user-avatar :width="120" :url="memberStore.profile.avatar" />
              </navigator>
              <view class="meta">
                <view class="nickname">
                  {{ memberStore.profile.nickname || memberStore.profile.username }}
                </view>
                <navigator class="extra" :url="`${pageUrl['profile']}`" hover-class="none">
                  <text class="update">更新个人信息</text>
                </navigator>
              </view>
            </view>
          </view>
        </template>
        <!-- 未登录 -->
        <template v-else>
          <view class="profile">
            <view class="overview">
              <navigator :url="`${pageUrl['login']}`" hover-class="none">
                <shop-user-avatar :width="120" url="" />
              </navigator>
              <view class="meta">
                <navigator :url="`${pageUrl['login']}`" hover-class="none" class="nickname">
                  未登录
                </navigator>
                <view class="extra">
                  <text class="tips">点击登录账号</text>
                </view>
              </view>
            </view>
          </view>
        </template>
        <!-- 权益栏 -->
        <view class="rights">
          <navigator
            :url="`${pageUrl['balance']}`"
            open-type="navigate"
            hover-class="navigator-hover"
            class="rights-item"
          >
            <text class="rights-item-num">{{ dashboard.rights.balance }}</text>
            <text>账户余额</text>
          </navigator>
          <navigator
            :url="`${pageUrl['favorite']}`"
            open-type="navigate"
            hover-class="navigator-hover"
            class="rights-item"
          >
            <text class="rights-item-num">{{ dashboard.rights.favorite_num }}</text>
            <text>收藏</text>
          </navigator>
          <navigator
            :url="`${pageUrl['coupon']}`"
            open-type="navigate"
            hover-class="navigator-hover"
            class="rights-item"
          >
            <text class="rights-item-num">{{ dashboard.rights.coupon_num }}</text>
            <text>优惠券</text>
          </navigator>
        </view>
      </template>
      <!-- 订单栏 -->
      <blockIcon :data="orderSection" :perRow="5">
        <template #header>
          <view class="title">
            我的订单
            <navigator class="navigator" :url="`${pageUrl['order-list']}`" hover-class="none">
              <text>全部</text><text class="icon-right"></text>
            </navigator>
          </view>
        </template>
      </blockIcon>
      <!-- 优惠券栏 -->
      <blockIcon :data="couponSection" />
      <!-- 服务栏 -->
      <blockIcon :data="serviceSection" big-space>
        <template #footer>
          <!-- #ifdef MP-WEIXIN -->
          <view class="section-item" hover-class="none">
            <button hover-class="none" class="contact-btn" open-type="contact">
              <image src="@/static/icons/contact.svg" style="width: 60rpx; height: 60rpx" />
            </button>
            <view class="section-item-text">{{ '联系客服' }}</view>
          </view>
          <!-- #endif -->
        </template>
      </blockIcon>
    </z-paging>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f7f7f8;
}

.viewport {
  height: 100%;
  background-repeat: no-repeat;
  background-image: url('~@/static/images/bg.png');
  background-size: 100% auto;
}

/* 用户信息 */
.profile {
  margin-top: 50rpx;
  position: relative;

  /* #ifdef MP-WEIXIN */
  padding-top: 25px;
  /* #endif */

  .overview {
    display: flex;
    height: 120rpx;
    padding: 0 36rpx;
    color: #fff;
  }

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .gray {
    filter: grayscale(100%);
  }

  .meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 30rpx;
    padding: 16rpx 0;
    margin-left: 20rpx;
  }

  .nickname {
    max-width: 350rpx;
    padding-bottom: 20rpx;
    font-size: 30rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .extra {
    display: flex;
    font-size: 20rpx;
  }

  .tips {
    font-size: 22rpx;
  }

  .update {
    padding: 3rpx 10rpx 1rpx;
    color: rgba(255, 255, 255, 0.8);
    border: 1rpx solid rgba(255, 255, 255, 0.8);
    margin-right: 10rpx;
    border-radius: 30rpx;
  }

  .settings {
    position: absolute;
    bottom: -20rpx;
    right: 40rpx;
    font-size: 45rpx;
    color: #fff;
  }
}

.rights {
  display: flex;
  justify-content: space-around;
  padding: 35rpx 40rpx;
  margin: 45rpx 20rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

  /* #ifdef WEB */
  padding-top: 25px;
  /* #endif */

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    color: #75787d;
    padding-bottom: 10rpx;

    &-num {
      font-size: 40rpx;
      color: #ff9545;
      padding-bottom: 25rpx;
    }
  }
}

.title {
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #1e1e1e;
  padding: 10rpx 15rpx 50rpx;
  font-weight: bold;

  .navigator {
    font-size: 24rpx;
    color: #939393;
    float: right;
  }
}

.section-item {
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20rpx;
}

.section-item-text {
  padding-top: 10rpx;
  font-size: 28rpx;
}

/* #ifdef MP-WEIXIN */
.contact-btn {
  display: flex;
  width: 60rpx;
  height: 68rpx;
  padding: 0;
  background-color: transparent;

  &::after {
    border: none;
  }
}
/* #endif */
</style>
