<template>
  <view class="zhuanduanli-component" :style="{
    background: `url(${$baseUrl}integral/1021/zhuanduanliBg${getBgName()}.png) no-repeat center/contain`,
    height: `${getHeight()}`
  }">

    <view class="tipLock-section" v-if="props.index == 0">
      <image class="tipLock" :src="$baseUrl +  `integral/1021/tipsLock1.png`" mode="aspectFit" />
    </view>
    <!-- 标题区域 -->
    <view class="title-section">
      <text class="main-title" :style="{ color: getColor()[props.index].titleColor }">转段礼</text>
    </view>
    
    <text class="points-text" :style="{ marginTop: Number(props.index) === 0 ? '153rpx' : '153rpx' }">200积分</text>
    
    <!-- 底部按钮 -->
    <!-- <image 
      v-if="props.isshowLock && props.index == 0"
      class="bottom-button" 
      :src="$baseUrl +  `integral/1021/zhuanduanliQushengjiBtn${props.index}.png`"
      mode="aspectFit"
      @click="handleUpgrade"
    /> -->

    <view 
        class="bottom-button" 
        v-if="props.isshowLock"
        :style="{
				background: `url(${$baseUrl}integral/1021/zhuanduanliBtnBg${props.index}.png) no-repeat center/contain`
			}"
        mode="aspectFit"
        @click="handleUpgrade"
    >
        <text class="bottom-button-text" :style="{ color: props.index == 4 ? '#ffffff' : '#ffe3c3' }">去升级</text>
    </view>
    
    <!-- 说明文字 -->
    <view class="description" :style="{ marginTop: getTop() }">
      <text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
        有过N段扫码积分记录，⾸次对N+1段扫码积分，包含0-1，1-2，2-3，3-4
      </text>
    </view>

  </view>
</template>

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

// 定义组件名称
defineOptions({
  name: 'zhuanduanli'
})

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

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

const getBgName = () => {
  if(props.isshowLock){
    return props.index + ""
  }else{
    return props.index + "0"
  }
}

const getTop = () => {
  if(!props.isshowLock){
    return "80rpx"
  }else{
    return "35rpx"
  }

  return "80rpx"
}

const getHeight = () => {
  if(props.isshowLock){
    return "569rpx"
  }else{
    return "495rpx"
  }
}
// 定义组件事件
const emit = defineEmits(['upgrade'])

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

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

<style lang="less" scoped>
.zhuanduanli-component {
  position: relative;
  width: 686rpx;
  display: flex;
  flex-direction: column;
  // align-items: center;
  .tipLock-section{
    position: relative;
    width: 100%;

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

  .title-section {
    // text-align: center;
    margin-top: 50rpx;
    margin-left: 30rpx;
    
    .main-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      letter-spacing: 2rpx;
    }
  }
  
  .points-text {
      font-size: 22rpx;
      text-align: center;
      font-weight: bold;
      color: #211d1a;
    //   margin-top: 145rpx;
    }


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

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