<template>
  <view class='content'>
    <view class='user-info-view'>
      <image
        class='image-bg'
        :src="assetsUrl+'test_bg.png'"
      />

      <view class='top-row'>
        <image :src='assetsUrl+"ic_coupon.png"' />

        <view class='u-flex-column'>
          <text>设计小仙女</text>
          <text>15542535625</text>
        </view>

        <image :src='assetsUrl+"ic_qrcode_white.png"' />
      </view>

      <view class='bottom-row'>
        <view>
          <text>100</text>
          <text>积分</text>
        </view>
        <view>
          <text>255.00</text>
          <text>余额</text>
        </view>
        <view>
          <text>3</text>
          <text>优惠券</text>
        </view>
      </view>
    </view>

    <view class='integral-add-view'>
      <text>将会员卡放入微信卡包，及时了解积分变动</text>
      <text>去添加</text>
      <image :src='assetsUrl+"ic_arrow_right_yellow.png"' />
    </view>

    <text class='title-view'>
      我的订单
    </text>
    <view class='card-order-view'>
      <view v-for='(item,index) in orderActionList' :key='index'>
        <image :src='item.icon' />
        <text>{{ item.title }}</text>
        <text v-if='item.amount>0'>{{ item.amount }}</text>
      </view>
    </view>

    <text class='title-view'>
      会员服务
    </text>

    <view class='card-service-view'>
      <view v-for='(item,index) in serviceList' :key='index'>
        <image :src='item.icon' />
        <text>{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store';
import { assetsUrl } from '@/utils/assets';

const orderActionList = ref([{
  title: '进行中',
  icon: assetsUrl + 'ic_order_progressing.png',
  path: '',
  amount: 10
}, {
  title: '已结束',
  icon: assetsUrl + 'ic_order_finish.png',
  path: '',
  amount: 0
}, {
  title: '全部订单',
  icon: assetsUrl + 'ic_order_all.png',
  path: '',
  amount: 0
}]);

const serviceList = [
  {
    title: '会员信息',
    icon: assetsUrl + 'ic_member_service_info.png',
    path: ''
  },
  {
    title: '消费记录',
    icon: assetsUrl + 'ic_member_service_record.png',
    path: ''
  },
  {
    title: '关注公众号',
    icon: assetsUrl + 'ic_member_service_follow.png',
    path: ''
  },
  {
    title: '收货地址',
    icon: assetsUrl + 'ic_member_service_address.png',
    path: ''
  }, {
    title: '联系商家',
    icon: assetsUrl + 'ic_member_service_contact.png',
    path: ''
  }
  // ,{
  //   title: '推广中心',
  //   icon: assetsUrl + 'ic_order_progressing.png',
  //   path: ''
  // }
];

const title = ref<string>();
title.value = import.meta.env.VITE_APP_TITLE;

const store = useUserStore();
console.log('store.user_name', store.user_name);
</script>

<style lang='scss' scoped>
.content {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
}

.user-info-view {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 275rpx;

  .image-bg {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .top-row {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-left: 33rpx;
    margin-top: 43rpx;
    margin-right: 28rpx;
    align-items: center;

    image:nth-of-type(1) {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      border: #FFFFFF solid 2rpx;
    }

    view:nth-of-type(1) {
      display: flex;
      flex-direction: column;
      color: white;
      flex: 1;
      margin-left: 20rpx;

      text:nth-of-type(1) {
        font-size: 30rpx;
        font-weight: 800;
      }

      text:nth-of-type(2) {
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 5rpx;
      }
    }

    image:nth-of-type(2) {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .bottom-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    margin-top: 33rpx;

    view:nth-of-type(n+1) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;

      text:nth-of-type(1) {
        font-size: 36rpx;
        font-weight: 400;
        color: #FFFFFF;
      }

      text:nth-of-type(2) {
        font-size: 26rpx;
        font-weight: 400;
        margin-top: 8rpx;
        color: #FFFFFF;
      }
    }
  }
}

.integral-add-view {
  display: flex;
  flex-direction: row;
  background: #F8ECDE;
  align-items: center;
  border-radius: 10rpx;
  padding: 20rpx 17rpx;
  margin-top: 30rpx;

  text:nth-of-type(1) {
    display: flex;
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    flex: 1;
  }

  text:nth-of-type(2) {
    font-size: 26rpx;
    font-weight: 400;
    color: #DB7400;
  }

  image {
    width: 30rpx;
    height: 30rpx;
    margin-left: 14rpx;
  }
}

.title-view {
  font-size: 30rpx;
  font-weight: 800;
  color: #333333;
  margin-top: 30rpx;
}

.card-view {
  display: flex;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.card-order-view {
  @extend .card-view;
  flex-direction: row;
  padding: 30rpx 0;

  view:nth-of-type(n+1) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;

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

    text:nth-of-type(1) {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      margin-top: 10rpx;
    }

    text:nth-of-type(2) {
      display: flex;
      position: absolute;
      min-width: 40rpx;
      min-height: 35rpx;
      align-items: center;
      justify-content: center;
      background: #F32B2B;
      border-radius: 50%;
      color: #FFFFFF;
      top: -10rpx;
      right: 70rpx;
    }
  }
}

.card-service-view {
  @extend .card-view;
  display: grid;
  grid-template-columns:repeat(4, 1fr);

  view:nth-of-type(n+1) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
  }

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


</style>
