<template>
  <wd-popup 
    v-model="visible" 
    position="bottom"
    @close="handleClose"
  >
    <view class="goods-selector">
      <view v-if="selectedIndex !== -1" class="goods-info-mini">
        <image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
        <view class="info">
          <view class="name">{{ goods[selectedIndex].productName }}</view>
          <view class="price-info">
            <text class="price">{{ selectedGoodsPrice.lowestPrice }} 天医币</text>
            <text class="price-label">{{ selectedGoodsPrice.priceLabel }}</text>
            <text v-if="selectedGoodsPrice.priceLabel" class="original-price">{{ goods[selectedIndex].price }} 天医币</text>
          </view>
        </view>
      </view>
      
      <!-- 商品列表 -->
      <view class="selector-header">
        <text class="title">{{ isFudu ? t('order.selectFuduScheme') : t('order.selectPurchaseScheme') }}</text>
      </view>
      <view class="goods-list">
        <view
          v-for="(item, index) in goods"
          :key="item.productId"
          :class="['goods-item', selectedIndex === index ? 'selected' : '']"
          @click="selectGoods(index)"
        >
          <image :src="item.productImages" mode="aspectFit" class="goods-cover" />
          <view class="goods-info">
            <text class="goods-name">{{ item.productName }}</text>

            <view class="price-info">
              <text class="price">{{ calculatePrice(item).lowestPrice }} 天医币</text>
              <text class="price-label">{{ calculatePrice(item).priceLabel }}</text>
              <text v-if="calculatePrice(item).priceLabel" class="original-price">{{ item.price }} 天医币</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="selector-actions">
        <wd-button type="primary" block :disabled="selectedIndex === -1" @click="handleConfirm">立即购买</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user'
import { calculateLowestPrice } from '@/utils/index'
import type { IGoods } from '@/types/order'

const { t } = useI18n()
const userStore = useUserStore()

interface Props {
  show: boolean
  goods: IGoods[]
  isFudu?: boolean  // 是否为复读
}

const props = defineProps<Props>()

const emit = defineEmits<{
  select: [goods: IGoods]
  confirm: [goods: IGoods]
  close: []
}>()

const visible = computed({
  get: () => props.show,
  set: (val: boolean) => {
    if (!val) emit('close')
  }
})

// 计算商品价格
const calculatePrice = (goods: IGoods) => {
  const { activityPrice, vipPrice, price } = goods
  const isVipUser = userStore.userVips && userStore.userVips.length > 0
  const priceLabel = {
    vipPrice: 'VIP优惠价',
    activityPrice: '活动价',
    price: ''
  }
  
  let priceData = null
  if (isVipUser) {
    priceData = { activityPrice, vipPrice, price }
  } else {
    priceData = { activityPrice, price }
  }
  const lowestPrice = calculateLowestPrice(priceData)
  
  return {
    lowestPrice: parseFloat(lowestPrice.value).toFixed(2),
    priceLabel: priceLabel[lowestPrice.key as keyof typeof priceLabel]
  }
}

const selectedIndex = ref(-1)
// 选中商品的价格
const selectedGoodsPrice = computed(() => {
  if (selectedIndex.value === -1) return 0
  const selectedGoods = props.goods[selectedIndex.value]
  return calculatePrice(selectedGoods)
})

/**
 * 选择商品
 */
const selectGoods = (index: number) => {
  selectedIndex.value = index
  emit('select', props.goods[index])
}

/**
 * 确认购买
 */
const handleConfirm = () => {
  if (selectedIndex.value === -1) {
    uni.showToast({
      title: '请选择购买方案',
      icon: 'none'
    })
    return
  }
  
  emit('confirm', props.goods[selectedIndex.value])
}

/**
 * 关闭选择器
 */
const handleClose = () => {
  emit('close')
}

// 监听显示状态，重置选择
watch(() => props.show, (newVal: boolean) => {
  if (newVal && props.goods.length > 0) {
    // 默认选中第一个
    selectedIndex.value = 0
    emit('select', props.goods[0])
  } else {
    selectedIndex.value = -1
  }
})
</script>

<style lang="scss" scoped>
.goods-selector {
  padding: 15px;
  background-color: #fff;
  max-height: 80vh;
  overflow-y: auto;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  
  .title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 10rpx;
  color: #e97512;
  
  .price {
    font-size: 16px;
    font-weight: bold;
    color: #e97512;
  }
  
  .price-label {
    font-size: 12px;
    color: #e97512;
  }
  
  .original-price {
    font-size: 12px;
    color: #8a8a8a;
    text-decoration: line-through;
  }
}

.goods-info-mini {
  display: flex;
  align-items: center;
  margin: 5px 0 10px;
  
  .goods-cover {
    max-width: 80px;
    max-height: 80px;
    border-radius: 10rpx;
    background-color: #f5f5f5;
  }
  
  .info {
    flex: 1;
    padding-left: 10px;
    
    .name {
      display: block;
      font-size: 30rpx;
      line-height: 38rpx;
      color: #333;
      max-height: 76rpx;
      overflow: hidden;
    }

    .price-info {
      padding-top: 20rpx;
    }
    
    .price {
      font-size: 36rpx;
    }
  }
}

.goods-list {
  margin-bottom: 15px;
  
  .goods-item {
    position: relative;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    
    &.selected {
      border-color: #258feb;
      background-color: #f0f8ff;
    }

    .goods-cover {
      max-width: 40px;
      max-height: 40px;
      border-radius: 6px;
      margin-right: 10px;
      background-color: #f5f5f5;
    }
    
    .goods-info {
      .goods-name {
        display: block;
        font-size: 14px;
        color: #333;
        line-height: 1.4;
      }
    }
  }
}

.selector-actions {
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
}
</style>
