<template>
  <view class="spec-panel-mask" @click.self="$emit('close')">
    <view class="spec-panel">
      <view class="spec-panel__header">
        <text class="spec-panel__title">详细参数</text>
        <text class="spec-panel__close" @click="$emit('close')">✕</text>
      </view>

      <!-- 加载中 -->
      <view v-if="loadingConfig" class="spec-panel__loading">加载中...</view>

      <template v-else-if="config">
        <!-- 成色选择 -->
        <view class="spec-group" v-if="config.fineness.length">
          <text class="spec-group__label">成色</text>
          <view class="spec-group__options">
            <view
              v-for="item in config.fineness"
              :key="item"
              class="spec-option"
              :class="{ 'spec-option--active': selected.fineness === item }"
              @click="selected.fineness = item"
            >
              {{ item }}
            </view>
          </view>
        </view>

        <!-- 主石选择 -->
        <view class="spec-group" v-if="config.mainStone.length">
          <text class="spec-group__label">主石</text>
          <view class="spec-group__options">
            <view
              v-for="item in config.mainStone"
              :key="item"
              class="spec-option"
              :class="{ 'spec-option--active': selected.mainStone === item }"
              @click="selected.mainStone = item"
            >
              {{ item }}
            </view>
          </view>
        </view>

        <!-- 手寸选择 -->
        <view class="spec-group" v-if="config.ringSize.length">
          <text class="spec-group__label">手寸</text>
          <view class="spec-group__options">
            <view
              v-for="item in config.ringSize"
              :key="item"
              class="spec-option"
              :class="{ 'spec-option--active': selected.ringSize === item }"
              @click="selected.ringSize = item"
            >
              {{ item }}
            </view>
          </view>
        </view>

        <!-- 查询按钮 -->
        <view class="spec-panel__action">
          <view
            class="spec-panel__btn"
            :class="{ 'spec-panel__btn--disabled': !canQuery }"
            @click="querySpecData"
          >
            查询规格数据
          </view>
        </view>

        <!-- 规格数据列表 -->
        <view v-if="loadingData" class="spec-panel__loading">查询中...</view>
        <view v-else-if="specDataList.length" class="spec-data-list">
          <view v-for="spec in specDataList" :key="spec.id" class="spec-data-item">
            <view class="spec-data-row">
              <text class="spec-data-label">型号</text>
              <text class="spec-data-value">{{ spec.modelName }}</text>
            </view>
            <view class="spec-data-row">
              <text class="spec-data-label">金料总重</text>
              <text class="spec-data-value">{{ spec.goldTotalWeight }}g</text>
            </view>
            <view class="spec-data-row">
              <text class="spec-data-label">金值</text>
              <text class="spec-data-value">¥{{ spec.goldValue }}</text>
            </view>
            <view class="spec-data-row">
              <text class="spec-data-label">主石金额</text>
              <text class="spec-data-value">¥{{ spec.mainStoneAmount }}</text>
            </view>
            <view class="spec-data-row">
              <text class="spec-data-label">副石金额</text>
              <text class="spec-data-value">¥{{ spec.sideStoneAmount }}</text>
            </view>
            <view class="spec-data-row">
              <text class="spec-data-label">总工费</text>
              <text class="spec-data-value">¥{{ spec.totalLaborCost }}</text>
            </view>
            <view class="spec-data-row spec-data-row--total">
              <text class="spec-data-label">总价</text>
              <text class="spec-data-value spec-data-value--price">¥{{ spec.totalPrice }}</text>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import type { DetailParameterConfig, SpecData } from '../types'
import { getProductSpecs, getSpecDataList } from '../api/product'

const props = defineProps<{
  productId: number
}>()

defineEmits<{
  close: []
}>()

const config = ref<DetailParameterConfig | null>(null)
const loadingConfig = ref(false)
const loadingData = ref(false)
const specDataList = ref<SpecData[]>([])

const selected = reactive({
  fineness: '',
  mainStone: '',
  ringSize: '',
})

const canQuery = computed(() =>
  selected.fineness && selected.mainStone && selected.ringSize
)

onMounted(async () => {
  loadingConfig.value = true
  try {
    config.value = await getProductSpecs(props.productId)
  } catch {
    // 错误已在 request 中统一处理
  } finally {
    loadingConfig.value = false
  }
})

async function querySpecData() {
  if (!canQuery.value) return
  loadingData.value = true
  try {
    specDataList.value = await getSpecDataList(props.productId, {
      fineness: selected.fineness,
      mainStone: selected.mainStone,
      ringSize: selected.ringSize,
    })
  } catch {
    // 错误已在 request 中统一处理
  } finally {
    loadingData.value = false
  }
}
</script>

<style scoped>
.spec-panel-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}
.spec-panel {
  background: #fff;
  width: 100%;
  max-height: 80vh;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx 24rpx;
  overflow-y: auto;
}
.spec-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.spec-panel__title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.spec-panel__close {
  font-size: 36rpx;
  color: #999;
  padding: 8rpx;
}
.spec-panel__loading {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}
.spec-group {
  margin-bottom: 24rpx;
}
.spec-group__label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}
.spec-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.spec-option {
  padding: 12rpx 28rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;
  border-radius: 8rpx;
  border: 2rpx solid transparent;
}
.spec-option--active {
  color: #e4393c;
  background: #fff1f0;
  border-color: #e4393c;
}
.spec-panel__action {
  margin: 24rpx 0;
}
.spec-panel__btn {
  background: #e4393c;
  color: #fff;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 44rpx;
  font-size: 28rpx;
}
.spec-panel__btn--disabled {
  background: #ccc;
}
.spec-data-list {
  margin-top: 16rpx;
}
.spec-data-item {
  background: #fafafa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
}
.spec-data-row {
  display: flex;
  justify-content: space-between;
  padding: 6rpx 0;
}
.spec-data-row--total {
  border-top: 1rpx solid #eee;
  margin-top: 8rpx;
  padding-top: 12rpx;
}
.spec-data-label {
  font-size: 26rpx;
  color: #999;
}
.spec-data-value {
  font-size: 26rpx;
  color: #333;
}
.spec-data-value--price {
  color: #e4393c;
  font-weight: bold;
}
</style>
