<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="(!hasBaby && islogin) ? true : !(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: '#ffffff' }">{{ getBtnName() }}</text>
        </view>


        <image 
            class="bottom-button" 
            v-if="(!hasBaby && islogin) ? false : 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'
import md from '../../md.js'

import { useUserStore } from "../../stores/user";

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 = () => {
    if(!hasBaby.value){
        if(props.index < 2){
            return '去升级';
        }else{
            return '去添加';
        }
    }
    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,
    userStore:useUserStore()
  })
  md.sensorComponentLogTake({
    xcxComponentClick: "true",
    pageName: "积分服务页",
    componentName: "会员权益",
    componentContent: "生日礼-"+getBtnName()
  });
}

// 待开启按钮点击
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);
const hasBaby = ref(false);
const islogin = ref(true);
onMounted(async () => {
   
    const userStore = useUserStore();

    const memberInfo = userStore.memberInfo;
    if(memberInfo.memberId == "not_login"){
		islogin.value = false;
	}else{
		islogin.value = true
	}


    if(userStore.babyInfo?.allBabyBaseInfo && userStore.babyInfo?.allBabyBaseInfo.length > 0){

        if (userStore.babyInfo?.allBabyBaseInfo?.some(baby => baby.babyStage == 2)) {

            hasBaby.value = true;
        }else{
            hasBaby.value = false;
            return;
        }   
    }else{
        hasBaby.value = false;
        return;
    }
    // hasBaby.value = false;
    // return;

    showLoading();
    const data = await fetchBirthdayGiftJSON();
    if(data.success){
        status1.value = data.data.status;
        // status1.value = 3000;
    }
    console.log('data', data);
    hideLoading();
    md.sensorComponentLogTake({
        xcxComponentExposure: "true",
        pageName: "积分服务页",
        componentName: "会员权益",
        componentContent: "生日礼-"+getBtnName()
    });
})


</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>
