<template>
  <view class="xinrenli-component" :style="{
    background: `url(${$baseUrl}integral/1021/xinrenliBg${props.index}.png) no-repeat center/contain`,
  }">
    <!-- 标题区域 -->
    <view class="title-section">
      <text class="main-title" :style="{ color: getColor()[props.index].titleColor }">新人礼</text>
      <text class="sub-title" :style="{ color: getColor()[props.index].titleDes }">200元优惠券包</text>
    </view>
    
    <!-- 优惠券网格 -->
    <view class="coupon-grid"
    >
      <!-- 第一行优惠券 -->
      <view class="coupon-row">
        <view class="coupon-item" @click="handleCouponClick(0)">
          <image 
            class="coupon-img"
            :src="$baseUrl +  `integral/1021/xirenliQuan${props.index}0.png`"
            mode="aspectFit"
          />
        </view>
        
        <view class="coupon-item" @click="handleCouponClick(1)">
          <image 
            class="coupon-img"
            :src="$baseUrl +  `integral/1021/xirenliQuan${props.index}1.png`"
            mode="aspectFit"
          />
        </view>
        
        <view class="coupon-item" @click="handleCouponClick(2)">
          <image 
            class="coupon-img"
            :src="$baseUrl +  `integral/1021/xirenliQuan${props.index}2.png`"
            mode="aspectFit"
          />
        </view>
      </view>
      
      <!-- 第二行优惠券 -->
      <view class="coupon-row">
        <view class="coupon-item" @click="handleCouponClick(3)">
          <image 
            class="coupon-img"
            :src="$baseUrl +  `integral/1021/xirenliQuan${props.index}3.png`"
            mode="aspectFit"
          />
        </view>
        
        <view class="coupon-item" @click="handleCouponClick(4)">
          <image 
            class="coupon-img"
            :src="$baseUrl +  `integral/1021/xirenliQuan${props.index}4.png`"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <image 
      class="bottom-button" 
      :src="$baseUrl +  `integral/1021/xinrenliQuxingmaBtn${props.index}.png`"
      mode="aspectFit"
      @click="handleGoToShop"
    />
    
    <!-- 说明文字 -->
    <view class="description">
      <text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
        首次访问星妈优选的用户可以领取200元优惠券包，包含(满49-20coupon新客周卡，优选自营49-20，北纬99-40，六水香99-40，功能营养188-80)
      </text>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义组件名称
defineOptions({
  name: 'xinrenli-popup'
})


const getColor = () => {
  const colors = [
    {
      "titleColor": "#503404",
      "titleDes":"#9a8b74",
      "titleDetail":"#503404"
    },
    {
      "titleColor": "#284a6c",
      "titleDes":"#6585a0",
      "titleDetail":"#284a6c"
    },
    
    {
      "titleColor": "#322d6f",
      "titleDes":"#9c8bb9",
      "titleDetail":"#322d6f"
    },
    
    {
      "titleColor": "#503404",
      "titleDes":"#9d8d6c",
      "titleDetail":"#6d5d4f"
    },
    
    {
      "titleColor": "#fff0df",
      "titleDes":"#fff0df",
      "titleDetail":"#fff0df"
    },
    
  ]
  return colors;
}

// 定义组件属性
const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
})

// 定义组件事件
const emit = defineEmits(['coupon-click', 'go-to-shop'])

// 优惠券点击事件
const handleCouponClick = (couponIndex) => {
  emit('coupon-click', {
    index: props.index,
    couponIndex: couponIndex
  })
}

// 去星妈优选按钮点击
const handleGoToShop = () => {
  emit('go-to-shop', {
    index: props.index
  })
}
</script>

<style lang="less" scoped>
.xinrenli-component {
  position: relative;
  width: 686rpx;
  height: 807rpx;
  display: flex;
  flex-direction: column;
  // align-items: center;

  .title-section {
    // text-align: center;
    margin-bottom: 40rpx;
    margin-top: 40rpx;
    margin-left: 28rpx;
    
    .main-title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #1d1e25;
      margin-bottom: 8rpx;
      letter-spacing: 2rpx;
    }
    
    .sub-title {
      display: block;
      font-size: 28rpx;
      color: #1d1e25;
      letter-spacing: 1rpx;
    }
  }
  
  .coupon-grid {
    margin-bottom: 30rpx;
    
    .coupon-row {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      justify-content: center;
      gap: 20rpx;

      // &:first-child {
      //   justify-content: space-between;
      // }
      
      // &:last-child {
      //   margin-bottom: 0;
      //   justify-content: center;
      //   gap: 20rpx;
      // }
      
      .coupon-item {
        width: 190rpx;
        height: 159rpx;
        border-radius: 16rpx;
        overflow: hidden;
        position: relative;
        
        .coupon-img {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
        }
      }
    }
  }
  
  .bottom-button {
    position: relative;
    width: 442rpx;
    height: 86rpx;
    margin: 0 auto;
    margin-bottom: 30rpx;
  }
  
  .description {
    .desc-text {
      position: absolute;
      width: 636rpx;
      left:50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      line-height: 1.5;
      letter-spacing: 0.5rpx;
    }
  }
}
</style>
