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

      <view class='top-row'>
        <image :src='userInfo.image' />
        <view class='u-flex-column'>
          <text>{{ userInfo.nickName }}</text>
          <text>{{ userInfo.telephone }}</text>
        </view>

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

      <view class='bottom-row'>
        <view @click.stop='gotoPath("/pages/mine/subs/integral/index")'>
          <text>{{ userInfo.integration }}</text>
          <text>积分</text>
        </view>
        <view @click.stop='gotoPath("/pages/mine/subs/recharge/index")'>
          <text>{{ userInfo.balance }}</text>
          <text>余额</text>
        </view>
        <view @click.stop='gotoPath("/pages/mine/subs/coupon/index")'>
          <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' @click.stop='gotoPath(item.path)'>
        <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' @click.stop='gotoPath(item.path)'>
        <image :src='item.icon' />
        <text>{{ item.title }}</text>
      </view>
    </view>
  </view>

  <official-account-dialog ref='officialAccountDialogRef' />
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store';
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
import OfficialAccountDialog from '@/components/official-account-dialog.vue';

const officialAccountDialogRef = ref();

const orderActionList = ref([{
  title: '进行中',
  icon: assetsUrl('ic_order_progressing.png'),
  path: '/pages/mine/subs/order/order-list',
  amount: 10
}, {
  title: '已结束',
  icon: assetsUrl('ic_order_finish.png'),
  path: '/pages/mine/subs/order/order-list?index=1',
  amount: 0
}, {
  title: '全部订单',
  icon: assetsUrl('ic_order_all.png'),
  path: '/pages/mine/subs/order/order-list?index=2',
  amount: 0
}]);

const serviceList = [
  {
    title: '会员信息',
    icon: assetsUrl('ic_member_service_info.png'),
    path: '/pages/mine/subs/profile/index'
  },
  {
    title: '消费记录',
    icon: assetsUrl('ic_member_service_record.png'),
    path: '/pages/mine/subs/trade/index'
  },
  {
    title: '关注公众号',
    icon: assetsUrl('ic_member_service_follow.png'),
    path: 'follow_official_account'
  },
  {
    title: '收货地址',
    icon: assetsUrl('ic_member_service_address.png'),
    path: '/pages/mine/subs/address/address-list'
  }, {
    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();
const { userInfo } = storeToRefs(store);

const gotoPath = (path: string) => {
  if(path === 'follow_official_account') {
    showOfficialAccountDialog();
  } else {
    goPath(path);
  }
};

const showOfficialAccountDialog = () => {
  officialAccountDialogRef.value.show();
};

</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;
      font-size: 26rpx;
      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;
    font-size: 26rpx;
  }

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


</style>
