<script setup lang="ts">
const props = defineProps<{ detailInfoSpu: any }>();
onMounted(() => {
  setTimeout(() => {
    if (
      props.detailInfoSpu.categoryAttributeValueJson &&
      props.detailInfoSpu.categoryAttributeDefJson
    ) {
      props.detailInfoSpu.categoryAttributeValue = JSON.parse(
        props.detailInfoSpu.categoryAttributeValueJson
      );
      props.detailInfoSpu.categoryAttributeLabel = JSON.parse(
        props.detailInfoSpu.categoryAttributeDefJson
      );
      const result = props.detailInfoSpu.categoryAttributeLabel
        .map((item: any) => {
          const { code, name, valueType, valueOptions, required } = item;
          const value = props.detailInfoSpu.categoryAttributeValue[code];

          // 根据 valueType 处理不同类型的值
          if (
            valueType === "checkbox" &&
            Array.isArray(value) &&
            value.length > 0
          ) {
            const selectedNames = valueOptions
              .filter((option: any) => value.includes(option.code))
              .map((option: any) => option.name);
            return { code, name, value: selectedNames };
          } else if (valueType === "radio" && value) {
            const selectedOption = valueOptions.find(
              (option: any) => option.code === value
            );
            return {
              code,
              name,
              value: selectedOption ? [selectedOption.name] : [],
            };
          } else if (valueType === "text" && value) {
            return { code, name, value: [value] };
          }

          // 过滤掉非必填项且无值的字段
          if (required === "no" && !value) {
            return null;
          }

          return { code, name, value: [] };
        })
        .filter((item: any) => item !== null && item.value.length > 0); // 移除空值项
      props.detailInfoSpu.categoryAttribute = result;
    }
  }, 200);
});
</script>
<template>
  <div class="warehouse-info">
    <div class="warehouse-address">
      <p class="title">
        Package Size
      </p>
      <p><span>Length（cm）：</span>{{ props.detailInfoSpu.lengthCm }}</p>
      <p><span>Width（cm）：</span>{{ props.detailInfoSpu.widthCm }}</p>
      <p><span>Height（cm）：</span>{{ props.detailInfoSpu.heightCm }}</p>
      <p><span>Weight（kg）：</span>{{ props.detailInfoSpu.weightKg }}</p>
    </div>
    <div class="return-address" v-if="props.detailInfoSpu.productAttrs">
      <p class="title">
        Attributes
      </p>
      <p v-for="(val,key,idx) in props.detailInfoSpu.productAttrs" :key="idx">
        <template v-if="typeof(val) == 'object'">
          <span>{{key}}：</span>
          <!-- <template v-if="Array.isArray(val)"> -->
          <template v-for="(i,d) in val" :key="d">
            {{ i }}&nbsp;&nbsp;&nbsp;
          </template>
          <!-- </template> -->
        </template>
        <template v-else>
          <span>{{key}}：</span>{{ val }}
        </template>
      </p>
    </div>
    <div class="return-address" v-if="props.detailInfoSpu?.categoryAttribute?.length>0">
      <p class="title">
        Attributes
      </p>
      <p v-for="(item,idx) in props.detailInfoSpu.categoryAttribute" :key="idx">
        <span>{{item.name}}&nbsp;：</span>
        <template v-for="(i,d) in item.value" :key="d">
          {{ i }}{{d!=(item.value.length-1)?'，':''}}
        </template>
      </p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.warehouse-info {
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #303133;
  }
  p {
    font-size: 14px;
    line-height: 24px;
    color: #606060;
    span {
      color: #303133;
      font-weight: bold;
    }
  }
  .return-address {
    margin-top: 20px;
  }
}
</style>
  