<template>
  <view class="container">
    <MessageNotification />
    <!-- 1. 顶部轮播图 -->
    <view class="swiper-section">
      <swiper
          class="swiper"
          indicator-dots
          autoplay
          circular
          indicator-color="rgba(0,0,0,0.1)"
          indicator-active-color="#2B85E4"
      >
        <swiper-item v-for="(img, index) in productImages" :key="index">
          <image
              class="swiper-image"
              :src="img"
              mode="aspectFill"
              @click="previewImage(index)"
          />
        </swiper-item>
      </swiper>
    </view>

    <!-- 2. 核心信息区 -->
    <view class="basic-info">
      <!-- 价格与标签行 -->
      <view class="price-row">
        <view class="price-left">
          <text class="symbol">¥</text>
          <text class="amount">{{ productPrice }}</text>
          <text class="old-price" v-if="productDetail.daijian_price">¥{{ productDetail.daijian_price }}</text>
        </view>
        <!-- 优化点：根据 type 判断标签显示逻辑 -->
        <!-- 情况1：type === 3 为保健食品，显示特定标签 -->
        <view class="tag-capsule type-health" v-if="productDetail.type == 3">
          <text class="tag-text">保健食品</text>
        </view>
        <!-- 情况2：其他（如 type === 2 西药），走 OTC/Rx 逻辑 -->
        <view class="tag-capsule" :class="productDetail.is_otc === 0 ? 'type-rx' : 'type-otc'" v-else-if="productDetail.type==2">
          <text class="tag-text">{{ productDetail.is_otc === 0 ? 'Rx 处方药' : 'OTC 非处方药' }}</text>
        </view>
      </view>

      <!-- 合规提示 - 移动到商品名称上方 -->
      <view class="compliance-tip-card" v-if="complianceTip">
        <u-icon name="info-circle" color="#FF4D4F" size="32" style="margin-right: 12rpx;"></u-icon>
        <text class="tip-text">{{ complianceTip }}</text>
      </view>

      <view class="title">{{ productDetail.drug_name }}</view>
      <view class="sub-title" v-if="productDetail.drug_alias">{{ productDetail.drug_alias }}</view>

      <!-- 规格条 -->
      <view class="spec-bar">
        <view class="spec-item">
          <text class="label">规格</text>
          <text class="val">{{ productDetail.specification || '标准规格' }}</text>
        </view>
        <view class="spec-item" v-if="productDetail.guozi_no">
          <text class="label">批准文号</text>
          <text class="val">{{ productDetail.guozi_no }}</text>
        </view>
      </view>

      <!-- 平台资质入口 -->
      <view class="platform-qualification-entry" @click="goPlatformQualification">
        <text>查看平台资质</text>
        <u-icon name="arrow-right" size="28" color="#909399"></u-icon>
      </view>
    </view>

    <!-- 3. 物流提示 -->
    <view class="logistics-tip" v-if="orderText">
      <u-icon name="car-fill" color="#2B85E4" size="34" style="margin-right:12rpx"></u-icon>
      <text>{{ orderText }}</text>
    </view>


    <!-- 4. 功效与用法 (卡片式布局 + 优化标题) -->
    <view class="info-card" v-if="productDetail.category_type !== 'health_food'">
      <!-- 优化点：医疗风格标题 -->
      <view class="section-title-modern">
        <view class="indicator"></view>
        <text>功能主治</text>
      </view>
      <view class="card-body">
        {{ productDetail.function || productDetail.indications || '暂无详细信息，请以说明书为准' }}
      </view>
    </view>

    <!-- 保健食品不展示用法用量 -->
    <view class="info-card" v-if="productDetail.type != 3">
      <view class="section-title-modern">
        <view class="indicator"></view>
        <text>用法用量</text>
      </view>
      <view class="card-body">
        {{ productDetail.usage || '请遵医嘱或参照说明书' }}
      </view>
    </view>

    <!-- 说明书入口 - 处方药不展示 -->
    <view class="info-card" v-if="!(productDetail.is_otc == 0 && productDetail.type == 2)">
      <view class="section-title-modern">
        <view class="indicator"></view>
        <text>说明书</text>
      </view>
      <view class="instruction-content">
        <image
            v-if="productDetail.instruction"
            class="instruction-image"
            :src="productDetail.instruction"
            mode="widthFix"
            @click="previewInstruction"
        />
        <view v-else class="no-instruction">
          <u-icon name="file-text" size="60" color="#999"></u-icon>
          <text>详见产品包装内部说明书</text>
        </view>
      </view>
    </view>

    <!-- 5. 商品详情图 (淘宝式无缝加载 + 优化标题) -->
    <view class="detail-images-wrapper" v-if="introductionImages.length > 0">
      <view class="section-divider-modern">
        <text class="text">商品详情</text>
      </view>
      <view class="image-list">
        <image
            v-for="(img, idx) in introductionImages"
            :key="idx"
            class="seamless-img"
            :src="img"
            mode="widthFix"
            lazy-load
        />
      </view>
    </view>

    <!-- 占位符，防止底部操作栏遮挡内容 -->
    <view class="footer-placeholder"></view>

    <!-- 底部操作栏 -->
    <view class="footer-bar safe-area-inset-bottom">
      <view class="icons-area">
        <view class="icon-item" @click="goBack">
          <u-icon name="home" size="40" color="#606266"></u-icon>
          <text>首页</text>
        </view>
        <view class="icon-item" @click="goToCart">
          <view class="icon-rel">
            <u-icon name="shopping-cart" size="40" color="#606266"></u-icon>
            <!-- 徽标 -->
            <view class="badge-custom" v-if="cartCount > 0">{{ cartCount > 99 ? '99+' : cartCount }}</view>
          </view>
          <text>购物车</text>
        </view>
      </view>

      <view class="btns-area">
        <button class="btn btn-cart" @click="showCartPopup = true">加入购物车</button>
        <button class="btn btn-buy" @click="handleBuyNow">
          {{ productDetail.is_otc === 0 && productDetail.type == 2 ? '提交预定' : '立即购买' }}
        </button>
      </view>
    </view>

    <!-- === 以下为原有弹窗代码 (保留完整逻辑) === -->

    <!-- 购物车弹窗 -->
    <u-popup
        v-model="showCartPopup"
        mode="bottom"
        border-radius="24"
        :closeable="true"
        @close="closeCartPopup"
    >
      <view class="popup-wrapper safe-area-bottom">
        <view class="popup-header-title">选择购买数量</view>

        <view class="product-info-row">
          <image class="p-img" :src="productDetail.image" mode="aspectFill"></image>
          <view class="p-info">
            <view class="p-name">{{ productDetail.drug_name }}</view>
            <view class="p-spec">{{ productDetail.specification || '暂无规格' }}</view>
            <view class="p-price">¥{{ productPrice }}</view>
          </view>
        </view>

        <view class="quantity-row">
          <text class="label">购买数量</text>
          <u-number-box v-model="cartQuantity" :min="1" :max="999" integer :step="1"></u-number-box>
        </view>

        <view class="popup-actions">
          <button class="btn-cancel" @click="closeCartPopup">取消</button>
          <button class="btn-confirm" @click="addToCart">确定</button>
        </view>
      </view>
    </u-popup>

    <!-- 立即购买弹窗（非处方药） -->
    <u-popup
        v-model="showBuyPopup"
        mode="bottom"
        border-radius="24"
        :closeable="true"
        @close="closeBuyPopup"
    >
      <view class="popup-wrapper safe-area-bottom">
        <view class="popup-header-title">选择购买数量</view>

        <view class="product-info-row">
          <image class="p-img" :src="productDetail.image" mode="aspectFill"></image>
          <view class="p-info">
            <view class="p-name">{{ productDetail.drug_name }}</view>
            <view class="p-spec">{{ productDetail.specification || '暂无规格' }}</view>
            <view class="p-price">¥{{ productPrice }}</view>
          </view>
        </view>

        <view class="quantity-row">
          <text class="label">购买数量</text>
          <u-number-box v-model="buyQuantity" :min="1" :max="999" integer :step="1"></u-number-box>
        </view>

        <view class="popup-actions">
          <button class="btn-cancel" @click="closeBuyPopup">取消</button>
          <button class="btn-confirm" @click="buyNowConfirm">立即下单</button>
        </view>
      </view>
    </u-popup>

    <!-- 处方药购买表单弹窗 -->
    <u-popup
        v-model="showPrescriptionFormPopup"
        mode="bottom"
        border-radius="24"
        :closeable="true"
        @close="closePrescriptionFormPopup"
    >
      <view class="popup-wrapper safe-area-bottom">
        <view class="popup-header-title">请填写用药信息</view>

        <view class="product-info-row">
          <image class="p-img" :src="productDetail.image" mode="aspectFill"></image>
          <view class="p-info">
            <view class="p-name">{{ productDetail.drug_name }}</view>
            <view class="p-spec">{{ productDetail.specification || '暂无规格' }}</view>
            <view class="p-price">¥{{ productPrice }}</view>
          </view>
        </view>

        <view class="quantity-row">
          <text class="label">购买数量</text>
          <u-number-box v-model="prescriptionQuantity" :min="1" :max="999" integer :step="1"></u-number-box>
        </view>

        <u-form :model="prescriptionFormData" ref="prescriptionForm">
          <u-form-item label="是否就诊过" prop="hasVisited" label-width="200">
            <u-radio-group v-model="prescriptionFormData.hasVisited">
              <u-radio name="1" active-color="#2B85E4" style="margin-right: 40rpx;">是</u-radio>
              <u-radio name="0" active-color="#2B85E4">否</u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="是否用过此药" prop="hasUsedDrug" label-width="200">
            <u-radio-group v-model="prescriptionFormData.hasUsedDrug">
              <u-radio name="1" active-color="#2B85E4" style="margin-right: 40rpx;">是</u-radio>
              <u-radio name="0" active-color="#2B85E4">否</u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="症状" prop="illnessInfo" label-width="200">
            <u-input
                v-model="prescriptionFormData.illnessInfo"
                type="select"
                placeholder="请选择症状"
                @click="showIllnessPicker = true"
                disabled
            />
          </u-form-item>
        </u-form>

        <view class="popup-actions" style="margin-top:40rpx;">
          <button class="btn-cancel" @click="closePrescriptionFormPopup">取消</button>
          <button class="btn-confirm" @click="submitPrescriptionForm">提交信息</button>
        </view>
      </view>
    </u-popup>

    <!-- 患病信息选择器 -->
    <u-picker
        v-model="showIllnessPicker"
        mode="selector"
        :range="illnessOptions"
        range-key="label"
        @confirm="onIllnessConfirm"
        :mask-close-able="true"
        confirm-color="#2B85E4"
    ></u-picker>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
// 完整引入原有API
import { getOrderTextApi, getStoreDrugDetailApi, checkOnlineConsultationConfigApi } from "@/request/api/product";
import { genOrderApi } from "@/request/api/order";
import { getCartCountsApi, saveCartApi } from "@/request/api/cart";
import { sendToUserApi } from "@/request/api/im";
import request from "@/request/api/request";

export default {
  data() {
    return {
      productDetail: {
        id: '',
        type: 0, // 新增：药品类型 (2:西药, 3:保健食品)
        drug_name: '',
        drug_alias: '',
        image: '',
        price: 0,
        drug_store_drug: { price: 0 },
        daijian_price: null,
        specification: '',
        function: '',
        usage: '',
        instruction: '',
        is_otc: 1,
        guozi_no: '',
        bar_code: '',
        indications: '',
        indications_array: [],
        compliance_tip: '' // 合规提示文案，由后端返回
      },
      formData: {
        id: '',
        hasVisited: '1',
        hasUsedDrug: '1',
        number: 1,
        illnessInfo: '',
        doctor_id: '',
        type: '',
        drug_name: '',
        image: '',
        price: 0
      },
      productImages: [],
      isFavorite: false,
      cartCount: 0,
      submitted: false,
      showCartPopup: false,
      cartQuantity: 1,
      showBuyPopup: false,
      buyQuantity: 1,
      showPrescriptionFormPopup: false,
      prescriptionQuantity: 1,
      prescriptionFormData: {
        hasVisited: '1',
        hasUsedDrug: '1',
        illnessInfo: '',
      },
      illnessOptions: [],
      showIllnessPicker: false,
      orderText: '本次商品物流配送，由萧康医药提供服务。',
      introductionImages: [], // 商品介绍图数组
      delegateStoreId: '', // 委托诊所ID
    };
  },
  computed: {
    productPrice() {
      if (this.productDetail.drug_store_drug && this.productDetail.drug_store_drug.price) {
        return parseFloat(this.productDetail.drug_store_drug.price);
      }
      return parseFloat(this.productDetail.price || 0);
    },
    // 合规提示文案 - 从后端返回的 compliance_tip 字段获取
    complianceTip() {
      return this.productDetail.compliance_tip || '';
    }
  },
  onLoad(options) {
    if (options.id) {
      this.productDetail.id = options.id;
      this.formData.id = options.id;
      this.formData.type = options.type || '';
      this.formData.image = options.image || '';
      this.formData.price = parseFloat(options.price || 0);
      this.formData.doctor_id = options.doctor_id || '';
      this.formData.drug_name = options.drug_name || '';
      this.productDetail.drug_name = options.drug_name || '';
      this.productDetail.image = options.image || '';
      this.productDetail.price = parseFloat(options.price || 0);
      // 获取委托诊所ID（如果有）
      this.delegateStoreId = options.delegate_store_id || '';
      this.getDetail();
    } else {
      const savedId = uni.getStorageSync('symptoms_id');
      if (savedId) {
        this.productDetail.id = savedId;
        this.formData.id = savedId;
        this.getDetail();
      }
    }
    this.updateCartCount();
  },
  onShow() {
    this.updateCartCount();
  },
  methods: {
    getOrderText() {
      getOrderTextApi().then((res) => {
        if (res.data && res.data.result) {
          this.orderText = res.data.result;
        }
      }).catch(err => {
        console.error('获取订单提示失败:', err);
      })
    },
    getDetail() {
      let that = this;
      this.getOrderText();
      getStoreDrugDetailApi({
        id: this.productDetail.id,
      }).then((res) => {
        if (res.data.code === 0) {
          const data = res.data.result;
          Object.assign(this.productDetail, data);
          this.productImages = data.image ? [data.image] : [];
          if (data.indications_array && data.indications_array.length > 0) {
            this.illnessOptions = data.indications_array.map(item => ({
              value: item.label || item.value,
              label: item.label || item.value
            }));
          }
          if (!this.productDetail.indications && data.function) {
            this.productDetail.indications = data.function;
          }
          // 设置商品介绍图
          if (data.introduction_images && Array.isArray(data.introduction_images)) {
            this.introductionImages = data.introduction_images;
          } else {
            this.introductionImages = [];
          }
        }
      }).catch(error => {
        console.error('加载商品详情失败:', error);
      });
    },
    previewImage(index) {
      if (this.productImages.length > 0) {
        uni.previewImage({
          current: index,
          urls: this.productImages
        });
      }
    },
    previewInstruction() {
      if (this.productDetail.instruction) {
        uni.previewImage({
          urls: [this.productDetail.instruction]
        });
      }
    },
    // 预览商品介绍图
    previewIntroductionImage(index) {
      if (this.introductionImages.length > 0) {
        uni.previewImage({
          current: index,
          urls: this.introductionImages
        });
      }
    },
    updateCartCount() {
      getCartCountsApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        page: 1,
        limit: 100
      }).then((res) => {
        if (res.data.code == 0) {
          this.cartCount = res.data.result.cart_count;
        }
      })
    },
    addToCart() {
      // 检查是否为处方药：is_otc === 0 && type == 2
      if (this.productDetail.is_otc === 0 && this.productDetail.type == 2) {
        uni.showToast({
          title: '处方药不能加入购物车，请通过提交预定购买',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      saveCartApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        drug_id: this.productDetail.id,
        quantity: this.cartQuantity
      }).then(() => {
        this.updateCartCount();
        this.closeCartPopup();
        uni.showToast({
          title: `已加入${this.cartQuantity}件商品`,
          icon: 'success',
          duration: 1500
        });
      })
    },
    handleBuyNow() {
      if (this.productDetail.is_otc === 0 && this.productDetail.type == 2) {
        this.showPrescriptionFormPopup = true;
      } else {
        this.showBuyPopup = true;
      }
    },
    buyNowConfirm() {
      genOrderApi({
        drug_id: this.productDetail.id,
        number: this.buyQuantity,
        store_id: uni.getStorageSync('store_id') || '11001',
      }).then((resOrder) => {
        this.closeBuyPopup();
        uni.navigateTo({
          url: `/subPackages/my/my-drug/drug-info?id=${resOrder.data.result.id}&order_type=${resOrder.data.result.order_type}`
        });
      })
    },
    async submitPrescriptionForm() {
      if (!this.prescriptionFormData.hasVisited || !this.prescriptionFormData.hasUsedDrug || !this.prescriptionFormData.illnessInfo) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      
      // 先保存表单数据到局部变量（因为 closePrescriptionFormPopup 会清空表单）
      const formData = {
        hasVisited: this.prescriptionFormData.hasVisited,
        hasUsedDrug: this.prescriptionFormData.hasUsedDrug,
        illnessInfo: this.prescriptionFormData.illnessInfo,
      };
      const quantity = this.prescriptionQuantity;
      
      this.submitted = true;
      this.closePrescriptionFormPopup();
      
      try {
        const storeId = uni.getStorageSync('store_id');
        let delegateStoreId = this.delegateStoreId;
        let doctorId = null;
        
        // 如果没有传入委托诊所ID，需要先检查在线复诊配置
        if (!delegateStoreId) {
          const configRes = await checkOnlineConsultationConfigApi({ store_id: storeId });
          if (!configRes.data?.result?.can_use) {
            uni.showToast({
              title: configRes.data?.result?.message || '该门店暂不支持在线复诊功能',
              icon: 'none',
              duration: 2000
            });
            this.submitted = false;
            return;
          }
          // 获取委托诊所ID和医生ID
          delegateStoreId = configRes.data.result.delegate_store_id || storeId;
          doctorId = configRes.data.result.doctor_id;
        } else {
          // 如果已有委托诊所ID，获取默认医生ID
          const doctorRes = await this.getDefaultDoctorId();
          doctorId = doctorRes.data.result?.doctor_id;
        }
        
        // 检查是否配置了在线复诊负责人
        if (!doctorId) {
          uni.showToast({
            title: '该门店暂不支持在线复诊',
            icon: 'none',
            duration: 2000
          });
          this.submitted = false;
          return;
        }
        
        // 2. 先调用后端API保存就诊信息，获取info_id
        const createRes = await request('/xkApi/order/create-register-info', {
          method: 'POST',
          data: {
            doctor_id: doctorId,
            drug_id: this.productDetail.id,
            has_visited: formData.hasVisited,
            has_used_drug: formData.hasUsedDrug,
            illnessInfo: formData.illnessInfo,
            type: this.productDetail.type || 2,
            number: quantity,
          }
        }, 1);
        
        const infoId = createRes.data?.result?.info_id || createRes.data?.info_id;
        if (!infoId) {
          throw new Error('创建就诊信息失败');
        }
        
        // 3. 准备患者就诊信息（包含info_id，用于后续更新register_id）
        const rInfo = {
          info_id: infoId, // 新增：用于挂号后更新关联
          has_visited: formData.hasVisited,
          has_used_drug: formData.hasUsedDrug,
          illness_info: formData.illnessInfo,
          drug_name: this.productDetail.drug_name,
          drug_id: this.productDetail.id,
          number: quantity,
          type: this.productDetail.type || 2, // 2=西药，3=保健食品
          created_at: new Date().toLocaleString('zh-CN')
        };
        
        // 4. 跳转到就诊人选择页面，传递 register_type=3、患者就诊信息和委托诊所ID
        // 用户选择就诊人后，会创建挂号记录并跳转到 register.vue
        uni.navigateTo({
          url: `/subPackages/doctor/doctor-userinfo?id=${doctorId}&r_type=3&r_info=${encodeURIComponent(JSON.stringify(rInfo))}&delegate_store_id=${delegateStoreId}`
        });
      } catch (error) {
        console.error('提交处方药信息失败:', error);
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 获取默认医生ID（根据门店配置）
    async getDefaultDoctorId() {
      try {
        const storeId = uni.getStorageSync('store_id');
        if (!storeId) {
          console.warn('未找到store_id，无法获取默认医生');
          return { data: { result: { doctor_id: null, message: '未找到门店信息' } } };
        }
        const res = await request('/xkApi/online-consultation/get-default-doctor-id', {
          method: 'GET',
          data: { store_id: storeId }
        }, 0);
        return res;
      } catch (error) {
        console.error('获取默认医生ID失败:', error);
        // 如果接口失败，返回空值
        return { data: { result: { doctor_id: null, message: '获取失败' } } };
      }
    },
    goToCart() {
      uni.navigateTo({
        url: '/subPackages/shop/shop-cate'
      });
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    // 跳转平台资质页面
    goPlatformQualification() {
      uni.navigateTo({
        url: '/pages/index/platform-info?store_id=0'
      });
    },
    onIllnessConfirm(e) {
      const index = e[0];
      this.prescriptionFormData.illnessInfo = this.illnessOptions[index].value;
      this.showIllnessPicker = false;
    },
    closeCartPopup() {
      this.showCartPopup = false;
      this.cartQuantity = 1;
    },
    closeBuyPopup() {
      this.showBuyPopup = false;
      this.buyQuantity = 1;
    },
    closePrescriptionFormPopup() {
      this.showPrescriptionFormPopup = false;
      this.prescriptionQuantity = 1;
      this.prescriptionFormData = {
        hasVisited: '1',
        hasUsedDrug: '1',
        illnessInfo: '',
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #F5F7FA;
  min-height: 100vh;
}

/* 1. 轮播图 */
.swiper-section {
  height: 750rpx;
  background: #fff;
  .swiper, .swiper-image { width: 100%; height: 100%; }
}

/* 2. 基础信息区 */
.basic-info {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 0 0 24rpx 24rpx;

  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center; // 垂直居中对齐
    margin-bottom: 24rpx;

    .price-left {
      color: #FF4D4F;
      display: flex;
      align-items: baseline;
      .symbol { font-size: 28rpx; font-weight: bold; margin-right: 4rpx; }
      .amount { font-size: 56rpx; font-weight: 800; font-family: 'DIN Alternate', sans-serif; line-height: 1; }
      .old-price { font-size: 24rpx; color: #999; text-decoration: line-through; margin-left: 16rpx; }
    }

    // 优化：胶囊式标签
    .tag-capsule {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      height: 48rpx;
      border-radius: 24rpx;

      &.type-rx {
        background: #FEF0F0;
        border: 2rpx solid #FAB6B6;
        .tag-text { color: #F56C6C; font-size: 24rpx; font-weight: bold; }
      }
      &.type-otc {
        background: #F0F9EB;
        border: 2rpx solid #B3E19D;
        .tag-text { color: #67C23A; font-size: 24rpx; font-weight: bold; }
      }
      &.type-health {
        background: #FDF6EC;
        border: 2rpx solid #FAECD8;
        .tag-text { color: #E6A23C; font-size: 24rpx; font-weight: bold; }
      }
    }
  }

  .title { font-size: 36rpx; font-weight: 800; color: #303133; line-height: 1.4; margin-bottom: 12rpx; }
  .sub-title { font-size: 26rpx; color: #909399; margin-bottom: 24rpx; }

  .spec-bar {
    background: #F7F8FA;
    padding: 24rpx;
    border-radius: 12rpx;

    .spec-item {
      display: flex;
      font-size: 26rpx;
      margin-bottom: 12rpx;
      &:last-child { margin-bottom: 0; }

      .label { color: #909399; width: 140rpx; }
      .val { color: #303133; font-weight: 500; }
    }
  }

  .platform-qualification-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F7F8FA;
    padding: 24rpx;
    border-radius: 12rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #606266;
  }
}

/* 3. 物流提示 */
.logistics-tip {
  background: #ECF5FF;
  padding: 24rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #2B85E4;
}

/* 4. 信息卡片 & 优化标题 */
.info-card {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;

  // 优化：现代风格标题
  .section-title-modern {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 800;
    color: #333;
    margin-bottom: 24rpx;

    .indicator {
      width: 8rpx;
      height: 32rpx;
      background: linear-gradient(180deg, #2B85E4 0%, #5CADFF 100%);
      border-radius: 4rpx;
      margin-right: 16rpx;
    }
  }

  .card-body {
    font-size: 28rpx;
    color: #606266;
    line-height: 1.8;
    text-align: justify;
  }

  .instruction-content {
    .instruction-image { width: 100%; border-radius: 8rpx; }
    .no-instruction {
      padding: 40rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text { font-size: 26rpx; color: #999; margin-top: 10rpx; }
    }
  }
}

/* 合规提示卡片 - 与物流提示UI一致 */
.compliance-tip-card {
  background: #FFF1F0;
  padding: 24rpx 30rpx;
  margin: 0 -30rpx 20rpx -30rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #FF4D4F;
  
  .tip-text {
    font-weight: 600;
    line-height: 1.6;
    flex: 1;
  }
}

/* 5. 详情图区域 */
.detail-images-wrapper {
  background: #fff;
  padding-bottom: 20rpx;

  .section-divider-modern {
    text-align: center;
    padding: 40rpx 0;

    .text {
      font-size: 28rpx;
      color: #909399;
      position: relative;
      &::before, &::after {
        content: '';
        display: inline-block;
        width: 60rpx;
        height: 1px;
        background: #E4E7ED;
        vertical-align: middle;
        margin: 0 20rpx;
      }
    }
  }

  .image-list {
    width: 100%;
    font-size: 0; // 消除间隙
    .seamless-img { width: 100%; display: block; }
  }
}

/* 6. 底部操作栏 */
.footer-placeholder { 
  height: calc(110rpx + env(safe-area-inset-bottom));
  min-height: 140rpx; /* 确保最小高度，避免在小屏设备上被遮挡 */
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  height: 110rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(110rpx + env(safe-area-inset-bottom));

  .icons-area {
    display: flex;
    margin-right: 30rpx;

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 30rpx;
      position: relative;
      min-width: 80rpx;

      text { font-size: 20rpx; color: #606266; margin-top: 4rpx; }

      .icon-rel {
        position: relative;
        .badge-custom {
          position: absolute;
          top: -6rpx;
          right: -10rpx;
          background: #FA3534;
          color: #fff;
          font-size: 20rpx;
          padding: 2rpx 8rpx;
          border-radius: 20rpx;
          border: 2rpx solid #fff;
          line-height: 1;
        }
      }
    }
  }

  .btns-area {
    flex: 1;
    display: flex;
    gap: 20rpx;

    .btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: bold;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;

      &.btn-cart {
        background: #EBF4FF;
        color: #2B85E4;
      }

      &.btn-buy {
        background: linear-gradient(90deg, #5CADFF 0%, #2B85E4 100%);
        color: #fff;
        box-shadow: 0 6rpx 12rpx rgba(43, 133, 228, 0.3);
      }
    }
  }
}

/* 7. 弹窗样式补充 */
.popup-wrapper {
  padding: 30rpx;
  background: #fff;

  &.safe-area-bottom {
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  }

  .popup-header-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .product-info-row {
    display: flex;
    margin-bottom: 30rpx;
    .p-img { width: 160rpx; height: 160rpx; border-radius: 12rpx; background: #f8f8f8; margin-right: 20rpx; }
    .p-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .p-name { font-size: 30rpx; font-weight: bold; color: #333; }
      .p-spec { font-size: 24rpx; color: #999; }
      .p-price { font-size: 36rpx; color: #FF4D4F; font-weight: bold; }
    }
  }

  .quantity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-top: 1rpx solid #f5f5f5;
    border-bottom: 1rpx solid #f5f5f5;
    margin-bottom: 40rpx;
    .label { font-size: 28rpx; color: #333; }
  }

  .popup-actions {
    display: flex;
    gap: 30rpx;

    button {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      border: none;
      &.btn-cancel { background: #F5F7FA; color: #606266; }
      &.btn-confirm { background: #2B85E4; color: #fff; }
    }
  }
}
</style>