<template>
  <view class='u-flex-column'>
    <swiper class='swiper' :indicator-dots='true' :autoplay='true' :interval='3000' :duration='1000'
            @change='swiperChange'>
      <swiper-item v-for='(item, index) in bannerList' :key='index'>
        <image :src='item' mode='aspectFill' />
      </swiper-item>
    </swiper>

    <view class='basic-view'>
      <view class='indicator-view'>
        <view v-for='(item,index) in bannerList' :key='item' class='normal'
              :class="{'active': index === currentBannerIndex}">
        </view>
      </view>

      <view class='user-info-card'>
        <image class='user-avatar' :src='bannerList[0]' mode='aspectFill' />
        <text class='user-name'>设计小仙女</text>
        <view class='integral-view'>
          <text>1000</text>
          <text>积分</text>
        </view>
        <view class='divider' style='height: 83rpx' />
        <view class='balance-view'>
          <text>998.00</text>
          <text>余额（元）</text>
        </view>
      </view>

      <view class='menu-view'>
        <view>
          <image :src='assetsUrl+"ic_member_card.png"' style='width: 108rpx;height: 72rpx;padding: 11rpx 0' />
          <text>会员充值</text>
        </view>
        <view class='divider' style='margin: 0;height: 153rpx' />
        <view>
          <image :src='assetsUrl + "ic_coupon.png"' style='width: 108rpx;height: 95rpx' />
          <text>优惠券</text>
        </view>
      </view>

      <view class='second-menu-view'>
        <view v-for='(item, index) in submenuList' :key='index'>
          <view class='menu-item' @click='toPath(item.path)'>
            <image :src='item.icon' />
            <text>{{ item.title }}</text>
          </view>
        </view>
      </view>

      <text class='hot-recommend'>热门推荐</text>

      <view class='bottom-banner-view'>
        <swiper :indicator-dots='true' :autoplay='true' :interval='3000' :duration='1000'>
          <swiper-item v-for='(item, index) in bannerList' :key='index'>
            <image :src='item' mode='aspectFill' />
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

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

const store = useUserStore();

const bannerList = ref<string[]>(['https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/0D/ChMkJ1eV_EiIckZnAAxoKo4d-a0AAT0gwJxjq4ADGhC893.jpg',
  'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
  'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
  'https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg']);
const currentBannerIndex = ref(0);

const submenuList = [
  {
    title: '注册有礼',
    icon: assetsUrl + 'ic_register_gift.png',
    path: '/pages/order/order'
  },
  {
    title: '团购秒杀',
    icon: assetsUrl + 'ic_groupbuy.png',
    path: '/pages/order/order'
  },
  {
    title: '入群有礼',
    icon: assetsUrl + 'ic_group_gift.png',
    path: '/pages/order/order'
  }
];

const swiperChange = (e: any) => {
  currentBannerIndex.value = e.detail.current;
};

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

<style lang='scss'>
.swiper {
  display: flex;
  position: relative;
  width: 100%;
  height: 520rpx;

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

.basic-view {
  display: flex;
  flex-direction: column;
  position: relative;
  top: -100rpx;
}

.indicator-view {
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: center;

  .normal {
    width: 16rpx;
    height: 16rpx;
    background: #707070;
    border-radius: 50%;
    margin: 0 8rpx;
  }

  .active {
    @extend .normal;
    background: #333333;
  }
}

.card {
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 0 24rpx;
}

.user-info-card {
  @extend .card;
  display: flex;
  flex-direction: row;
  padding: 30rpx;
  align-items: center;
  margin-top: 14rpx;

  .user-avatar {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
  }

  .user-name {
    display: flex;
    flex: 1;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-left: 16rpx;
  }

  .integral-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text:nth-child(1) {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }

    text:nth-child(2) {
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
      margin-top: 10rpx;
    }
  }

  .balance-view {
    @extend .integral-view;

    text:nth-child(1) {
      font-size: 36rpx;
      font-weight: bold;
      color: #F32B2B;
    }
  }
}

.divider {
  margin: 0 40rpx;
  width: 0.5rpx;
  height: 100%;
  background: #C7C7C7;
}

.menu-view {
  @extend .card;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0 32rpx 0;
  margin-top: 20rpx;

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

  text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-top: 16rpx;
  }
}

.second-menu-view {
  @extend .menu-view;

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

  text {
    font-size: 28rpx;
    color: #333333;
    margin-top: 23rpx;
  }
}

.hot-recommend {
  margin-top: 30rpx;
  margin-left: 24rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.bottom-banner-view {
  display: flex;
  flex-direction: column;
  margin: 20rpx 24rpx 0 24rpx;
  border-radius: 20rpx;
  height: 285rpx;

  swiper {
    width: 100%;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
}
</style>
