<template>
    <view class="shengri-component" :style="{
        background: `url(${$baseUrl}integral/1021/shengriliBg${props.index}.png) no-repeat center/contain`,
    }">

    <view class="tipLock-section" v-if="props.index < 2">
      <image class="tipLock" :src="$baseUrl +  `integral/1021/tipsLock2${Number(props.index)}.png`" mode="aspectFit" />
    </view>

        <!-- 标题区域 -->
        <view class="title-section">
        <text class="main-title" :style="{ color: getColor()[props.index].titleColor }">基础生日礼</text>
        </view>
        
        <!-- 奖励卡片区域 -->
        <view class="rewards-section">
                    <!-- 积分奖励卡片 -->
            <view class="reward-card" :style="{ background: `url(${$baseUrl}integral/1021/shengriliJifenIcon${props.index}.png) no-repeat center/contain` }" @click="handlePointsClick">
                <!-- <image 
                class="reward-icon"
                :src="`${$baseUrl}integral/1021/shengriliJifenIcon${props.index}.png`"
                mode="aspectFit"
                /> -->
                <text class="reward-text">888积分</text>
            </view>
            
            <!-- 优惠券奖励卡片 -->
            <view class="reward-card1" @click="handleCouponClick">
                <image 
                class="reward-icon1"
                :src="`${$baseUrl}integral/1021/shengriliQuanIcon${props.index}.png`"
                mode="aspectFit"
                />
            </view>
        </view>
        
        <!-- 底部按钮 -->
        <view 
            class="bottom-button" 
            v-if="!(status1 === 4000 && !props.isshowLock)"
            :style="{
				background: `url(${$baseUrl}integral/1021/shengriliBtnBg${props.index}.png) no-repeat center/contain`
			}"
            mode="aspectFit"
            @click="handleUpgrade"
        >
            <text class="bottom-button-text" :style="{ color: props.index == 4 ? '#ffffff' : '#ffe3c3' }">{{ getBtnName() }}</text>
        </view>


        <image 
            class="bottom-button" 
            v-if="status1 === 4000 && !props.isshowLock"
            :src="`${$baseUrl}integral/1021/daikaiqiDisBtn${props.index}.png`"
            mode="aspectFit"
            @click="handleUpgrade_daikaiqi"
        />
  </view>
</template>

<script setup>
import { defineProps, defineEmits, onMounted, ref } from 'vue'
import { showLoading, hideLoading } from '../../utils'
import { fetchBirthdayGiftJSON } from '../../api/integral'

const isShowShengjiBtn = () => {
    let show = false;
    if(props.isshowLock){
        show = true;
    }else{
        if(status1.value == 4000 && Number(props.index) < 2){
            show = true;
        }else{
            show = false;
        }
    }

    return show;
}

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

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

  isshowLock:{
    type: Boolean,
    default: false
  }
  }
})

// 定义组件事件
const emit = defineEmits(['points-click', 'coupon-click', 'upgrade'])

const getBtnName = () => {
    const btnName = '';
    switch(status1.value){
        case 4000:
            return '去升级';
        case 3000:
            return '一键领取';
        case 2000:
            return '去升级';
        case 1000:
            return '去使用';
        default:
            return '去升级';
    }
}



// 积分卡片点击事件
const handlePointsClick = () => {
  emit('points-click', {
    index: props.index
  })
}

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

// 去升级按钮点击
const handleUpgrade = async () => {
  emit('upgrade', {
    index: status1.value
  })
  
}

// 待开启按钮点击
const handleUpgrade_daikaiqi = () => {
  uni.showToast({
    title: '奖励还未开启哦',
    icon: 'none'
  });
}

// 颜色配置
const getColor = () => {
  const colors = [
    {
      "titleColor": "#503404"
    },
    {
      "titleColor": "#284a6c"
    },
    {
      "titleColor": "#322d6f"
    },
    {
      "titleColor": "#503404"
    },
    {
      "titleColor": "#fff0df"
    }
  ]
  return colors;
}

const status1 = ref(0);
onMounted(async () => {
  showLoading();
  const data = await fetchBirthdayGiftJSON();
  if(data.success){
    status1.value = data.data.status;
    // status1.value = 3000;
  }
  console.log('data', data);
  hideLoading();
})


</script>

<style lang="less" scoped>
.shengri-component {
  position: relative;
  width: 686rpx;
  height: 460rpx;
  display: flex;
  flex-direction: column;


  .tipLock-section{
    position: relative;
    width: 100%;

    .tipLock{
      position: absolute;
      right: 0;
      top: 0;
      width: 257rpx;
      height: 41rpx;
    }
  }

  .title-section {
    margin-top: 50rpx;
    margin-left: 30rpx;
    
    .main-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #1d1e25;
      letter-spacing: 2rpx;
    }
  }
  

  
  .rewards-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    gap: 20rpx;
    
    .reward-card {
      display: flex;
      flex-direction: column;
      align-items: center;

      width: 272rpx;
      height: 161rpx;
      
    //   .reward-icon {
    //     width: 272rpx;
    //     height: 161rpx;
    //     margin-bottom: 20rpx;
    //   }
      
      .reward-text {
        font-size: 28rpx;
        font-weight: bold;
        color: #211d1a;
        margin-top: 110rpx;
      }
    }

    .reward-card1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .reward-icon1 {
        width: 272rpx;
        height: 159rpx;
      }
    }
  }
  
  .bottom-button {
    width: 442rpx;
    height: 86rpx;
    margin: 0 auto;
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .bottom-button-text {
      font-size: 26rpx;
      font-weight: bold;
    }
  }
}
</style>
