<template>
  <view class="station-item-wrapper">
    <template v-if="type === 1">
      <view class="station-card-wrap">
        <view class="card-header">
          <view class="text">{{ item.name }}</view>
          <image :src="minioUrl + '/icon_sm_jiayou.png'" mode="aspectFill" />
        </view>
        <view class="card-bottom">
          <view class="price-box">
            <view class="price"
              ><text>{{ item.activityPrice }}</text
              >元</view
            >
          </view>
          <view class="origin-box">原价：{{ item.originalPrice }}元</view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="station-list-wrap">
        <view class="station-name">{{ item.name }}</view>
        <view class="price-wrap">
          <view class="price-text"
            ><text>{{ item.activityPrice }}</text
            >元</view
          >
          <view class="origin-text">原价：{{ item.originalPrice }}元</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { useGlobal } from '@/composables/index'
const { minioUrl } = useGlobal()

// type 类型区分 1卡片形式 2列表形式, 通过props传递
defineProps({
  type: {
    type: Number,
    default: 1
  },
  item: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style lang="scss" scoped>
.station-item-wrapper {
  box-sizing: border-box;
  .station-card-wrap {
    width: 140rpx;
    height: 140rpx;
    background-image: linear-gradient(90deg, #fe594d 0%, #ff8f58 100%), linear-gradient(#f2f1f6, #f2f1f6);
    background-blend-mode: normal, normal;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    .card-header {
      width: 100%;
      height: 35rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 10rpx 0 17rpx;
      .text {
        font-size: 26rpx;
        color: #fff;
        font-weight: 600;
      }
      image {
        width: 21rpx;
        height: 19rpx;
      }
    }
    .card-bottom {
      width: 137rpx;
      height: 103rpx;
      background-color: #fff;
      border-radius: 8rpx;
      margin: 0 auto;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .price-box {
        display: flex;
        align-items: baseline;
        .price {
          font-size: 20rpx;
          color: #333;
          text {
            font-size: 42rpx;
            color: #ff3d28;
            font-weight: 600;
          }
        }
      }
      .origin-box {
        font-size: 16rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
  }
  .station-list-wrap {
    width: 100%;
    height: 84rpx;
    border-radius: 8rpx;
    background-color: #f6f7fb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    margin-bottom: 24rpx;
    .station-name {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
    }
    .price-wrap {
      display: flex;
      align-items: center;
      .price-text {
        font-size: 21rpx;
        color: #333;
        text {
          font-size: 28rpx;
          color: #ff3d28;
          font-weight: 600;
        }
      }
      .origin-text {
        font-size: 21rpx;
        color: #999;
        margin-left: 10rpx;
        text-decoration: line-through;
      }
    }
  }
}
</style>
