<template>
  <el-dialog v-model="visible" title="查询商品明细" width="800px" :before-close="handleClose">
    <div class="product-detail">
      <!-- SKU价格 -->
      <div class="section">
        <div class="section-title">SKU价格</div>
        <el-row :gutter="20" class="price-row">
          <el-col :span="8">
            <div class="price-item">
              <span class="label">市场价</span>
              <span class="value">{{ productDetail.marketPrice || '0.00' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="price-item">
              <span class="label">平台售价</span>
              <span class="value">{{ productDetail.platformPrice || '0.00' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="price-item">
              <span class="label">协议价</span>
              <span class="value">{{ productDetail.agreementPrice || '0.00' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="price-row">
          <el-col :span="8">
            <div class="price-item">
              <span class="label">最低售价</span>
              <span class="value">{{ productDetail.minSellingPrice || '0.00' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 库存信息 -->
      <div class="section">
        <div class="section-title">库存信息</div>
        <el-row :gutter="20" class="stock-row">
          <el-col :span="12">
            <div class="stock-item">
              <span class="label">总库存量</span>
              <span class="value">{{ productDetail.totalStock || '0' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="stock-item">
              <span class="label">当期仓库存量</span>
              <span class="value">{{ productDetail.currentWarehouseStock || '0' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface ProductDetail {
  marketPrice?: number | string;
  platformPrice?: number | string;
  agreementPrice?: number | string;
  minSellingPrice?: number | string;
  totalStock?: number | string;
  currentWarehouseStock?: number | string;
}

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  productData: {
    type: Object as () => ProductDetail,
    default: () => ({})
  }
});

const emit = defineEmits(['update:modelValue']);

const visible = ref(false);
const productDetail = ref<ProductDetail>({});

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
    if (val) {
      productDetail.value = { ...props.productData };
    }
  }
);

watch(visible, (val) => {
  emit('update:modelValue', val);
});

const handleClose = () => {
  visible.value = false;
};
</script>

<style scoped lang="scss">
.product-detail {
  padding: 10px 0;

  .section {
    margin-bottom: 30px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e4e7ed;
    }

    .price-row,
    .stock-row {
      margin-bottom: 15px;
    }

    .price-item,
    .stock-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background-color: #f5f7fa;
      border-radius: 4px;

      .label {
        font-size: 14px;
        color: #606266;
      }

      .value {
        font-size: 14px;
        color: #303133;
        font-weight: 500;
      }
    }
  }
}
</style>
