<template>
  <view class="mianfei-component" :style="{
    background: `url(${$baseUrl}integral/1021/mianfeiwenzhenBg${props.index}.png) no-repeat center/contain`,
  }">
    <!-- 标题区域 -->
    <view class="title-section">
      <text class="main-title" :style="{ color: getColor()[props.index].titleColor }">免费问诊</text>
    </view>
    
    <!-- 底部按钮 -->
    <!-- <image 
      class="bottom-button" 
      :src="$baseUrl +  `integral/1021/mianfeiwenzhenQushiyongBtn${props.index}.png`"
      mode="aspectFit"
      @click="handleUseNow"
    /> -->
    
    <view 
        class="bottom-button" 
        :style="{
				background: `url(${$baseUrl}integral/1021/shengriliBtnBg${props.index}.png) no-repeat center/contain`
		}"
        mode="aspectFit"
        @click="handleUseNow"
    >
        <text class="bottom-button-text">立即使用</text>
    </view>
    <!-- 说明文字 -->
    <view class="description">
      <text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
        {{Number(props.index) == 0 ? '三甲医⽣免费在线问诊服务（5次/年）' : '三甲医生免费在线问诊服务 (不限次数)'}}
      </text>
    </view>
  </view>
</template>

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

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

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

// 定义组件事件
const emit = defineEmits(['doctor-click', 'use-now'])

// 医生网格点击事件
const handleDoctorGridClick = () => {
  emit('doctor-click', {
    index: props.index
  })
}

// 立即使用按钮点击
const handleUseNow = () => {
  emit('use-now', {
    index: props.index
  })
}

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

<style lang="less" scoped>
.mianfei-component {
  position: relative;
  width: 686rpx;
  height: 834rpx;
  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;
    }
  }
  
  // .bottom-button {
  //   width: 442rpx;
  //   height: 86rpx;
  //   margin: 0 auto;
  //   margin-top: 470rpx;
  // }

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

    .bottom-button-text {
      font-size: 26rpx;
      color: #ffffff;
      font-weight: bold;
    }
  }
  
  .description {
    margin-top: 50rpx;
    .desc-text {
      position: absolute;
      width: 636rpx;
      left:50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      line-height: 1.5;
      letter-spacing: 0.5rpx;
      text-align: center;
    }
  }
}
</style>
