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

    <view class="tipLock-section" v-if="props.index < 3">
        <image class="tipLock" :src="$baseUrl +  `integral/1021/tipsLock3${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="bottom-button" 
        v-if="getshowShengji()"
        :style="{
				background: `url(${$baseUrl}integral/1021/shengriliBtnBg${props.index}.png) no-repeat center/contain`
		}"
        mode="aspectFit"
        @click="handleUpgrade"
    >
        <text class="bottom-button-text">{{ props.isshowLock ? '去升级' : '立即报名' }}</text>
    </view>
    <!-- 待开启按钮 -->
    <image v-else
      class="bottom-button" 
      :src="`${$baseUrl}integral/1021/daikaiqiDisBtn${props.index}.png`"
      mode="aspectFit"
      @click="handleUpgrade_daikaiqi"
    />
    <!-- 底部说明文字 -->
    <view class="description">
      <text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
        报名填写信息抽取溯源游资格，中签者可享受飞鹤牧场溯源游2日游(含跟团游玩+住宿，路费报销1000元)
      </text>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted } from 'vue'
import { showLoading, hideLoading } from '../../utils';
import { fetchActivityStateJSON } from '../../api/integral';
import md from '../../md.js'
const handleUpgrade_daikaiqi = () => {
  uni.showToast({
    title: '活动暂未开启',
    icon: 'none'
  })
}
// 定义组件名称
defineOptions({
  name: 'suyuanyou'
})

const getshowShengji = () => {
  if(isStart.value){
    return true;
  }else{
    if(props.isshowLock){
      return true;
    }else{
      return false;
    }
  }
}
// 定义组件属性
const props = defineProps({
  index: {
    type: Number,
    default: 0
  },
  // startDate: {
  //   type: String,
  //   default: ''
  // },

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

// const isStart = () => {
//   const startDate = new Date(props.startDate);
//   const now = new Date();
//   console.log(startDate <= now);
//   return startDate <= now;
// }

// 定义组件事件
const emit = defineEmits(['upgrade'])

// 去升级按钮点击
const handleUpgrade = () => {
  md.sensorComponentLogTake({
    xcxComponentClick: "true",
    pageName: "积分服务页",
    componentName: "会员权益",
    componentContent: "溯源游-"+(props.isshowLock ? '去升级' : '立即报名')
  });
  emit('upgrade', {
    index: props.index
  })
}

// 颜色配置
const getColor = () => {
  const colors = [
    {
      "titleColor": "#503404",
      "privilegeColor": "#9a8b74",
      "qualificationColor": "#503404",
      "titleDetail": "#503404"
    },
    {
      "titleColor": "#284a6c",
      "privilegeColor": "#7b8b9a",
      "qualificationColor": "#284a6c",
      "titleDetail": "#284a6c"
    },
    {
      "titleColor": "#322d6f",
      "privilegeColor": "#9c8aba",
      "qualificationColor": "#322d6f",
      "titleDetail": "#322d6f"
    },
    {
      "titleColor": "#503404",
      "privilegeColor": "#9d8d6c",
      "qualificationColor": "#503404",
      "titleDetail": "#6d5d4f"
    },
    {
      "titleColor": "#fff0df",
      "privilegeColor": "#c2a98d",
      "qualificationColor": "#fff0df",
      "titleDetail": "#fff0df"
    }
  ]
  return colors;
}

const isStart = ref(false);
onMounted(async () => {
  showLoading();
  const res = await fetchActivityStateJSON();
  if(res?.success){
    isStart.value = res?.data;
  }

  hideLoading();

  md.sensorComponentLogTake({
    xcxComponentExposure: "true",
    pageName: "积分服务页",
    componentName: "会员权益",
    componentContent: "溯源游-"+(props.isshowLock ? '去升级' : '立即报名')
  });
})

</script>

<style lang="less" scoped>
.suyuanyou-component {
  position: relative;
  width: 686rpx;
  height: 569rpx;
  display: flex;
  flex-direction: column;
  .tipLock-section{
    position: relative;
    width: 100%;

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

  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    
    .main-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      letter-spacing: 2rpx;
    }

  }

  .bottom-button {
    width: 442rpx;
    height: 86rpx;
    margin: 0 auto;
    margin-top: 233rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .bottom-button-text {
      font-size: 26rpx;
      color: #ffffff;
      font-weight: bold;
    }
  }
  
  .description {
    margin-top: 35rpx;
    margin-left: 35rpx;
    margin-right: 30rpx;
    
    .desc-text {
      font-size: 22rpx;
      line-height: 1;
      letter-spacing: 0.5rpx;
      text-align: left;
    }
  }
}
</style>
