<script lang="ts" setup>
definePage({
  style: {
    'navigationBarTitleText': '我的',
    'navigationStyle': 'custom',
    'backgroundColor': '#F8FAFB',
    'app-plus': {
      bounce: 'none',
    },
  },
})

interface MenuItem {
  name: string
  icon: string
  label: string
  url?: string
}

const msgCount = ref(99)
const orderConfig: Array<MenuItem> = [
  {
    name: '待付款',
    icon: '/static/images/me/pending_payment.png',
    label: '待付款',
  },
  {
    name: '待发货',
    icon: '/static/images/me/pending_delivery.png',
    label: '待发货',
  },
  {
    name: '待收货',
    icon: '/static/images/me/pending_receipt.png',
    label: '待收货',
  },
  {
    name: '待评价',
    icon: '/static/images/me/pending_comment.png',
    label: '待评价',
  },
  {
    name: '退款/售后',
    icon: '/static/images/me/refunds.png',
    label: '退款/售后',
  },
]

const featureMenu: Array<MenuItem> = [
  {
    name: '购物车',
    icon: '/static/images/me/cart.png',
    label: '购物车',
  },
  {
    name: '收藏列表',
    icon: '/static/images/me/collection.png',
    label: '收藏列表',
  },
  {
    name: '收货地址',
    icon: '/static/images/me/address.png',
    label: '收货地址',
  },
  {
    name: '客服中心',
    icon: '/static/images/me/customer_service.png',
    label: '客服中心',
  },
  {
    name: '意见反馈',
    icon: '/static/images/me/feedback.png',
    label: '意见反馈',
    url: '/pages/me/menu/feedback',
  },
]

function clickUser() {
  uni.navigateTo({
    url: '/pages/me/auth/login',
  })
}

function clickFeature(item: MenuItem) {
  if (item.url) {
    uni.navigateTo({
      url: item.url,
    })
  }
}
</script>

<template>
  <view class="me">
    <view class="me-header">
      <view class="user-info" @click="clickUser">
        <view class="user-avatar">
          <image src="/static/images/me/user.png" mode="scaleToFill" />
        </view>
        <view>
          <view class="user-name">
            登录/注册
          </view>
        </view>
      </view>

      <view class="me-buttons">
        <view class="me-button">
          <image src="/static/images/me/notice.png" mode="scaleToFill" />
          <view class="badge">
            {{ msgCount }}
          </view>
        </view>
        <view class="me-button">
          <image src="/static/images/me/setting.png" mode="scaleToFill" />
        </view>
      </view>
    </view>
    <view class="me-content">
      <view class="account-data">
        <view class="account-data-item">
          <view class="value balance">
            0
          </view>
          <view class="label">
            我的余额
          </view>
        </view>
        <view class="account-data-item">
          <view class="value points">
            0
          </view>
          <view class="label">
            我的积分
          </view>
        </view>
      </view>
      <view class="order-data">
        <view class="order-data-title">
          <view>
            我的订单
          </view>
          <view class="all-order">
            全部
          </view>
        </view>
        <view class="order-menu">
          <view v-for="item in orderConfig" :key="item.name" class="order-menu-item">
            <view class="icon">
              <image :src="item.icon" mode="scaleToFill" />
            </view>
            <view class="label">
              {{ item.label }}
            </view>
          </view>
        </view>
      </view>
      <view class="more-feature">
        <view class="more-feature-title">
          更多功能
        </view>
        <view class="feature-list">
          <view v-for="item in featureMenu" :key="item.name" class="feature-item" @click="clickFeature(item)">
            <view class="icon">
              <image :src="item.icon" mode="scaleToFill" />
            </view>
            <view class="label">
              {{ item.label }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.badge {
  position: absolute;
  top: 0;
  left: 60%;
  height: 24rpx;
  padding: 0 7rpx;
  line-height: 24rpx;
  text-align: center;
  font-size: 18rpx;
  color: #fff;
  background-color: #ea4141;
  border-radius: 50rpx;
}

.me {
  padding-top: 120rpx;
  background-image: url('/static/images/me/background.png');
  background-size: cover;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f8fafb;
  min-height: calc(100vh - 128rpx);

  .me-header {
    display: flex;
    justify-content: space-between;
    padding: 0 28rpx;

    .user-info {
      display: flex;
      align-items: center;

      .user-avatar {
        height: 96rpx;
        width: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 50%;
        margin-right: 24rpx;

        image {
          height: 48rpx;
          width: 48rpx;
        }
      }

      .user-name {
        font-size: 32rpx;
        color: #24272c;

        &::after {
          content: '';
          display: inline-block;
          height: 12rpx;
          width: 12rpx;
          border-top: 1px solid #24272c;
          border-right: 1px solid #24272c;
          transform: rotate(45deg) translateY(-4rpx);
        }
      }
    }

    .me-buttons {
      display: flex;
      align-items: center;
      column-gap: 32rpx;

      .me-button {
        height: 48rpx;
        width: 48rpx;
        position: relative;

        image {
          height: 100%;
          width: 100%;
        }
      }
    }
  }

  .me-content {
    padding: 0 28rpx;

    .account-data {
      display: flex;
      justify-content: space-around;
      margin: 40rpx 0;

      .account-data-item {
        display: flex;
        flex-direction: column;
        row-gap: 12rpx;
        align-items: center;
        width: fit-content;

        .value {
          font-size: 36rpx;
          color: #24272c;

          &.balance {
            color: #0070d5;
          }

          &.points {
            color: #ff782c;
          }
        }

        .label {
          font-size: 24rpx;
          line-height: 1.2;
          color: #666666;
        }
      }
    }

    .order-data {
      margin-bottom: 16rpx;
      background-color: #fff;
      padding: 0 32rpx;
      border-radius: 16rpx;

      .order-data-title {
        font-size: 28rpx;
        line-height: 1.2;
        font-weight: 500;
        color: #24272c;
        padding: 32rpx 0;
        border-bottom: 1px solid #e7e7e7;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .all-order {
          font-size: 24rpx;
          line-height: 1;
          color: #aaaaaa;

          &::after {
            content: '';
            display: inline-block;
            height: 12rpx;
            width: 12rpx;
            border-top: 1px solid #aaaaaa;
            border-right: 1px solid #aaaaaa;
            transform: rotate(45deg) translateY(-4rpx);
          }
        }
      }

      .order-menu {
        display: flex;
        justify-content: space-around;
        padding: 28rpx 0 32rpx;

        .order-menu-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: fit-content;

          .icon {
            image {
              height: 48rpx;
              width: 48rpx;
            }
          }

          .label {
            font-size: 24rpx;
            line-height: 1.2;
            color: #666666;
            font-weight: 400;
          }
        }
      }
    }

    .more-feature {
      background-color: #fff;
      padding: 0 32rpx;
      border-radius: 8rpx;

      .more-feature-title {
        font-size: 28rpx;
        line-height: 1.2;
        font-weight: 500;
        color: #24272c;
        padding: 32rpx 0;
        border-bottom: 1px solid #e7e7e7;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .feature-list {
        display: flex;
        flex-direction: column;
        padding: 28rpx 0 32rpx;

        .feature-item {
          display: flex;
          align-items: center;
          column-gap: 16rpx;
          width: 100%;
          padding: 8px 0;

          .icon {
            height: 44rpx;
            width: 44rpx;
            image {
              height: 44rpx;
              width: 44rpx;
            }
          }

          .label {
            font-size: 28rpx;
            line-height: 1;
            color: #333333;
            font-weight: 400;
          }

          &:after {
            content: '';
            display: inline-block;
            height: 12rpx;
            width: 12rpx;
            border-top: 1px solid #aaaaaa;
            border-right: 1px solid #aaaaaa;
            transform: rotate(45deg) translateY(0rpx);
            margin-left: auto;
          }
        }
      }
    }
  }
}
</style>
