<template>
  <uni-popup ref="popup" type="bottom">
    <view class="good-confirm-container">
      <!-- 头部标题栏 -->
      <view class="header">
        <view class="header-title">确认订单</view>
        <view class="close-btn" @click="closePopup">
          <uni-icons type="closeempty" size="20" color="#666"></uni-icons>
        </view>
      </view>

      <!-- 商品信息区域 -->
      <view class="goods-info">
        <view class="goods-image">
          <image
            :src="
              goodsData.commodityPhotoList?.[0]?.photoUrl ||
              '/static/test/mk_img_1.png'
            "
            mode="aspectFill"
          />
        </view>
        <view class="goods-details">
          <view class="goods-title">{{
            goodsData.commodityName || "商品名称"
          }}</view>
          <view class="goods-price">
            <text class="currency">¥</text>
            <text class="price">{{ goodsData.price || 399 }}</text>
          </view>
          <view class="goods-tag" v-if="goodsData.timeTag">
            {{ goodsData.timeTag }}
          </view>
        </view>
      </view>

      <!-- 数量选择区域 -->
      <view class="quantity-section">
        <view class="quantity-label">购买数量</view>
        <view class="quantity-control">
          <view
            class="quantity-btn"
            :class="{ disabled: quantity <= 1 }"
            @click="decreaseQuantity"
          >
            <uni-icons type="minus" size="16" color="#666"></uni-icons>
          </view>
          <view class="quantity-input">
            <input
              type="number"
              v-model="quantity"
              @input="handleQuantityInput"
              :disabled="false"
            />
          </view>
          <view class="quantity-btn" @click="increaseQuantity">
            <uni-icons type="plus" size="16" color="#666"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 总价区域 -->
      <view class="total-section">
        <view class="total-label">合计</view>
        <view class="total-price">
          <text class="currency">¥</text>
          <text class="price">{{ totalPrice }}</text>
        </view>
      </view>

      <!-- 底部按钮区域 -->
      <view class="footer">
        <button class="confirm-btn" @click="confirmOrder">确认购买</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from "vue";

// Props定义
const props = defineProps({
  goodsData: {
    type: Object,
    default: () => ({}),
  },
});

// Emits定义
const emits = defineEmits(["confirm", "close"]);

// 响应式数据
const popup = ref(null);
const quantity = ref(1);

// 计算属性
const totalPrice = computed(() => {
  const price = props.goodsData.price || 399;
  return (price * quantity.value).toFixed(0);
});

// 方法定义
const showPopup = () => {
  popup.value?.open();
};

const closePopup = () => {
  popup.value?.close();
  emits("close");
};

const increaseQuantity = () => {
  quantity.value++;
};

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const handleQuantityInput = (e) => {
  const value = parseInt(e.detail.value);
  if (value && value > 0) {
    quantity.value = value;
  } else {
    quantity.value = 1;
  }
};

const confirmOrder = () => {
  const orderData = {
    goodsData: props.goodsData,
    quantity: quantity.value,
    totalPrice: totalPrice.value,
  };
  emits("confirm", orderData);
  closePopup();
};

// 暴露方法给父组件
defineExpose({
  showPopup,
  closePopup,
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>