<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-specification-breakdown">
    <view class="spec-data">
      <view class="spec-item">
        <view class="status">
          <view class="sku-data">
            <view
              v-for="(itemN, indexN) in specList"
              :key="indexN"
              class="sku-item line"
            >
              <view
                class="sku-name"
                @tap="changeCollapse(indexN, !(specTeamSel == indexN))"
              >
                <view class="sku-name-con">
                  {{ itemN.name }}
                </view>
                <uni-icons
                  :type="specTeamSel == indexN ? 'top' : 'bottom'"
                  class="sku-name-icon"
                />
              </view>
              <view
                class="sku-list"
                :style="{ 'display': specTeamSel == indexN ? 'block' : 'none' }"
              >
                <view
                  :class="['sku-list-item', collSelect[indexN] === '' ? 'spec-active' : '']"
                  @tap="clickSkuName('', indexN)"
                >
                  {{ $t('quanBuGuiGe') }}
                </view>
                <view
                  v-for="(itemV, indexV) in itemN.prodPropValues"
                  :key="indexV"
                  :class="['sku-list-item', collSelect[indexN] === itemV.name ? 'spec-active' : '']"
                  @tap="clickSkuName(itemV.name, indexN)"
                >
                  {{ itemV.name }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          v-show="isMask"
          class="mask"
          @click="closeVal"
        />
      </view>
    </view>
    <!--input列表 -->
    <view class="box">
      <view
        v-for="(item, index) in dataForm"
        :key="index"
        class="input-box"
      >
        <view v-show="item.isShow">
          <view class="label-data-box">
            <view class="label-data">
              <radio
                v-if="isbatch"
                class="item-radio"
                :checked="item.isSelect"
                color="#082ba6"
                @tap="clickSpec(index)"
              />
              <view
                v-for="(specItem, specIndex) in item.name"
                :key="specIndex"
                class="data-item"
              >
                <view class="data-name">
                  {{ specItem }}
                </view>
              </view>
            </view>
            <!-- <switch :checked="item.status" @change="changeStatus(index)" /> -->
            <text
              v-if="!showProd"
              :class="['sku-status', 'sku-status1']"
              @tap.stop="changeStatus(index)"
            >
              {{ item.status ? $t('jinYong') : $t('qiYong') }}
            </text>
          </view>

          <view class="section">
            <text>
              {{ $t('xiaoShouJiaYuan') }} <text class="red">
                *
              </text>
            </text>
            <input
              v-if="item.status"
              v-model="item.price"
              :placeholder="$t('qingTianXie-0')"
              type="digit"
              maxlength="15"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              @blur="changeNum(index, 'price')"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.price }}
            </view>
          </view>
          <view
            class="section"
            @click="toChangeStock(index,'warehouse')"
          >
            <text>
              {{ $t('kuCun') }}<text class="red">
                *
              </text>
            </text>
            <input
              v-if="prodStore.dataForm.mold == 1||dataForm.mold==3"
              v-model="item.stocks"
              :placeholder="$t('qingTianXie-0')"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              type="number"
              maxlength="15"
              @blur="changeInventory(index,'stocks')"
            >
            <input
              v-else-if="item.status && prodStore.dataForm.mold !== 2"
              v-model="item.warehouseStock"
              :placeholder="$t('qingTianXie-0')"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              type="number"
              maxlength="15"
              @blur="changeInventory(index,'warehouseStock')"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.warehouseStock }}
            </view>
          </view>
          <view
            v-if="prodStore.stockPointInfo.stationSize > 0 && prodStore.dataForm.mold !== 3&& prodStore.dataForm.mold !== 1"
            class="section"
            @click="toChangeStock(index,'station')"
          >
            <text>
              {{ $t('menDianKuCun') }}<text class="red">
                *
              </text>
            </text>
            <input
              v-if="
                (item.status && prodStore.dataForm.mold !== 2 && prodStore.dataForm.mold !== 3)
                  ||
                  (prodStore.dataForm.mold === 3 && prodStore.dataForm.isBindVoucher !== 1)
              "
              v-model="item.stationStock"
              :placeholder="$t('qingTianXie-0')"
              type="number"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              maxlength="15"
              @blur="changeInventory(index,'stationStock')"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.stationStock }}
            </view>
          </view>
          <view class="section">
            <text>{{ $t('shiChangJiaYuan') }}</text>
            <input
              v-if="item.status"
              v-model="item.oriPrice"
              :placeholder="$t('huaXianJiaXuanTian')"
              type="digit"
              maxlength="15"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              @blur="changeNum(index, 'oriPrice')"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.oriPrice }}
            </view>
          </view>
          <view
            v-if="prodStore.dataForm.mold !== 1&&prodStore.dataForm.mold !== 3"
            class="section"
          >
            <text>{{ $t('shangPinTiJiM') }}</text>
            <input
              v-if="item.status"
              v-model="item.volume"
              :placeholder="$t('qingTianXieXuanTian')"
              type="digit"
              maxlength="15"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              @blur="changeNum(index, 'volume')"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.volume }}
            </view>
          </view>
          <view
            v-if="prodStore.dataForm.mold !== 1 && prodStore.dataForm.mold !== 3"
            class="section"
          >
            <text>{{ $t('shangPinZhongLiangKg') }}</text>
            <input
              v-if="item.status"
              v-model="item.weight"
              :placeholder="$t('qingTianXieXuanTian-0')"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              type="digit"
              maxlength="15"
              @blur="changeNum(index, 'weight')"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.weight }}
            </view>
          </view>
          <view
            v-if="prodStore.dataForm.mold !== 2"
            class="section"
          >
            <text>{{ $t('kuCunYuJing') }}</text>
            <input
              v-if="item.status"
              v-model="item.stockWarning"
              :placeholder="$t('qingTianXieXuanTian-1')"
              type="digit"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              maxlength="15"
              @blur="changeNum(index, 'stockWarning')"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.stockWarning }}
            </view>
          </view>
          <view class="section">
            <text>{{ $t('shangPinBianMa') }}</text>
            <input
              v-if="item.status"
              v-model="item.partyCode"
              :placeholder="$t('ruWuBianMaJiangZiDongShengCheng')"
              type="text"
              maxlength="30"
              :disabled="showProd"
              :class="[showProd?'disabled-text':'']"
              @blur="changeCode(index)"
            >
            <view
              v-else
              class="disabled-text"
            >
              {{ item.partyCode || $t('ruWuBianMaJiangZiDongShengCheng') }}
            </view>
          </view>
          <view
            v-if="prodStore.dataForm.mold === 3 && prodStore.dataForm.isBindVoucher === 1"
            class="section"
            @tap="toCouponPage(index)"
          >
            <text>
              {{ $t('guanLianKaQuan-0') }}<text class="red">
                *
              </text>
            </text>
            <view
              v-if="item.voucherName"
              class="input-text"
            >
              {{ item.voucherName }}
            </view>
            <view
              v-else
              class="disabled-text"
            >
              {{ $t('quGuanLian') }}
            </view>
            <view
              class="right"
            >
              <view class="icon" />
            </view>
          </view>
          <view
            v-if="prodStore.dataForm.mold === 2"
            class="section"
            @tap="toAssociationGoods(index)"
          >
            <text>{{ $t('guanLianShangPin') }}<span class="red">*</span></text>
            <view
              v-if="item.skuComboList && item.skuComboList.length > 0"
              class="input-text"
            >
              {{ $t('yiGuanLianSkucombolistJian').replace('[skuComboList]', item.skuComboList.length) }}
            </view>
            <view
              v-else
              class="disabled-text"
            >
              {{ $t('quGuanLian') }}
            </view>
            <view
              class="right"
            >
              <view class="icon" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- end input列表 -->

    <!-- 功能按钮 -->
    <common-btn
      v-if="!isbatch"
      :btn-config="prodManaBtnConfig1"
      class="common-btn"
      @handle-click-more-btn="MoreBtnOne"
    />
    <common-btn
      v-else
      :btn-config="prodManaBtnConfig2"
      class="common-btn"
      @select-all-btn="selectAllBtn"
      @handle-click-more-btn="MoreBtnTwo"
    />
    <!-- end 功能按钮 -->

    <!-- 批量设置规格值 -->
    <batch-specification
      v-if="isSetting"
      :is-bind-voucher="prodStore.dataForm.isBindVoucher"
      :mlod="prodStore.dataForm.mold"
      @cancal="closeBatch"
      @handle-click-btn="handleClickBtn"
    />
  </view>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import BatchSpecification from '../../components/batch-specification/batch-specification.vue'

const prodStore = useProdStore()

const Data = reactive({
  dataForm: [], // 明细数据
  collSelect: [], // 规格值筛选值
  specTeamSel: -1, // 展开下拉框index

  isbatch: false, // 是否批量选择
  isSetting: false, // 批量设置显示
  selectSpecList: [], // 批量设置选中数据列表
  isMask: false, // 遮罩层
  specList: [], // 规格数据

  // 按钮tip
  prodManaBtnConfig1: {
    isPlain: true,
    btnList: [
      {
        btnText: $t('piLiangCaoZuo'),
        isPlain: false
      },
      {
        btnText: $t('queDing'),
        isPlain: false
      }
    ]
  },
  prodManaBtnConfig2: {
    isPlain: true,
    isChecked: false,
    isSelect: true,
    btnList: [
      {
        btnText: $t('tuiChuPiLiang'),
        isPlain: false
      },
      {
        btnText: $t('piLiangSheZhi'),
        isPlain: false
      }
    ]
  }
})

const { dataForm, collSelect, specTeamSel, isbatch, isSetting, isMask, specList, prodManaBtnConfig1, prodManaBtnConfig2 } = toRefs(Data)
const showProd = ref(false)
onLoad((options) => {
  showProd.value = options.showProd === 'true'
})
onMounted(() => {
  // 页面滚到顶部
  nextTick(() => {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 1
    })
  })

  const specData = prodStore.dataForm.skuList
  dealSpecData(specData)
})

onShow(() => {
  // 加载导航标题
  uni.setNavigationBarTitle({
    title: $t('guiGeMingXi')
  })
  const storageData = uni.getStorageSync('bbcMsSpecificationInfo')
  if (storageData) {
    Data.specList = []
    const specData = storageData.dataForm
    dealSpecData(specData)
    uni.removeStorageSync('bbcMsSpecificationInfo')
  }
})

onUnload(() => {
  uni.removeStorageSync('bbcMsSpecificationInfo')
})

// 处理显示数据
const dealSpecData = (data) => {
  if (data.length > 0) {
    const valueObj = {}
    const nameList = data[0].properties.split(';').map((item) => {
      const name = item.slice(0, item.indexOf(':'))
      valueObj[name] = []
      return name
    })
    const skuList = []
    data.forEach((item) => {
      item.isSelect = false
      item.changeStock = parseInt(item.stocks)
      item.name = item.properties.split(';').map((item) => {
        return item.substring(item.indexOf(':') + 1)
      })
      item.isShow = true

      const list = item.properties.split(';')
      for (let i = 0; i < nameList.length; i++) {
        const index = list[i].indexOf(':')
        const sku = [list[i].slice(0, index), list[i].substring(index + 1)]
        if (skuList.indexOf(sku[0] + '-' + sku[1]) < 0) {
          skuList.push(sku[0] + '-' + sku[1])
          valueObj[sku[0]].push({
            isSelect: true,
            name: sku[1],
            pic: (i === 0 ? item.pic : ''),
            propId: item.prodId,
            propValue: sku[1],
            propValueEn: sku[1],
            valueId: ''
          })
        }
      }
    })
    Data.dataForm = data
    nameList.forEach((item) => {
      Data.specList.push({
        name: item,
        prodPropValues: valueObj[item]
      })
    })
    Data.collSelect = new Array(Data.specList.length).fill('')
  }
}

// 提交
const submitBtn = () => {
  let isNullLen = 0
  // 防止 skuComboList 为 null
  Data.dataForm = Data.dataForm.map(item => {
    if (!item.skuComboList) item.skuComboList = []
    return item
  })
  if (prodStore.dataForm.mold === 2 && Data.dataForm.some(item => (item.skuComboList?.length === 0 && item.status !== 0))) {
    uni.showToast({
      title: $t('zuHeShangPinGuiGeZhiShaoXuYaoGuanLianYiGeShangPin'),
      icon: 'none'
    })
    return
  }
  Data.dataForm.forEach((item) => {
    item.changeStock = item.stocks - item.changeStock
    if (item.stocks === 0) {
      isNullLen++
    }
  })
  if (isNullLen === Data.dataForm.length) {
    uni.showModal({
      content: $t('gaiShangPinKuCunWei_0QueRenBaoCun'),
      icon: 'none',
      cancelText: $t('quXiao-0'),
      confirmText: $t('queDing'),
      success: (res) => {
        if (res.confirm) {
          prodStore.dataForm.skuList = Data.dataForm
          uni.navigateTo({
            url: '/package-prod/pages/post-prod/post-prod' + '?showProd=' + showProd.value
          })
        }
      }
    })
  } else {
    prodStore.dataForm.skuList = Data.dataForm
    uni.navigateTo({
      url: '/package-prod/pages/post-prod/post-prod' + '?showProd=' + showProd.value
    })
  }
}

const { proxy } = getCurrentInstance()
// 选择批量操作规格
const clickSpec = (index) => {
  Data.dataForm[index].isSelect = !Data.dataForm[index].isSelect
  const allData = Data.dataForm.filter((item) => item.isShow)
  if (Data.dataForm[index].isSelect) {
    Data.selectSpecList.push(index)
  } else {
    Data.selectSpecList.splice(Data.selectSpecList.indexOf(index), 1)
  }
  if (Data.selectSpecList.length === allData.length) {
    Data.prodManaBtnConfig2.isChecked = true
  } else {
    Data.prodManaBtnConfig2.isChecked = false
  }
  proxy.$forceUpdate()
}

const changeStatus = (index) => {
  const obj = Data.dataForm[index]
  obj.status = obj.status ? 0 : 1
  Data.dataForm[index] = obj
}

// 点击按钮组件回调（批量，确定）
const MoreBtnOne = (index) => {
  if (showProd.value && index !== 2) return
  switch (index) {
    case 1:
      batchEdit()
      break
    case 2:
      submitBtn()
  }
}

// 点击按钮组件回调2（退出批量，批量）
const MoreBtnTwo = (index) => {
  switch (index) {
    case 1:
      escBatch()
      break
    case 2:
      batchSubmit()
  }
}

// 库存校验
const changeInventory = (index, field) => {
  let num = Data.dataForm[index][field]
  num = Number(num).toFixed(0)
  num = Number(num.toString().replace(/[^\d]/g, ''))
  if (num > 9999999) {
    num = 9999999
  }
  Data.dataForm[index][field] = Number(num)
  const stockPoint = Data.dataForm[index].stockPointList[0]
  const changeStock = stockPoint.skuId ? Number(num) - stockPoint.stock + (stockPoint.changeStock || 0) : undefined
  // 仅有一个仓库（默认仓库）时，直接修改库存时同步修改库存点列表
  Data.dataForm[index].stockPointList = [{
    ...stockPoint,
    changeStock,
    stock: Number(num)
  }]
}

// 输入金额校验
const changeNum = (index, type) => {
  const obj = Data.dataForm[index]
  obj[type] = checkInput(obj[type])
  if (!obj[type] && type !== 'price') {
    obj[type] = 0
  } else if (!obj[type]) {
    obj[type] = 0.01
  }

  if ((type === 'price' || type === 'oriPrice') && obj[type] > 10000000) {
    obj[type] = 10000000
  }
  Data.dataForm[index] = obj
}

// 校验商品编码
const changeCode = (index) => {
  const obj = Data.dataForm[index]
  if (obj.partyCode === '') return
  const codeList = Data.dataForm.map(x => {
    return x.partyCode
  }).sort()
  const num = codeList.lastIndexOf(obj.partyCode) - codeList.indexOf(obj.partyCode) + 1
  if (num > 1) {
    uni.showToast({
      title: $t('shangPinBianMaBuNengZhongFu'),
      mask: true,
      icon: 'none',
      duration: 1000
    })
    obj.partyCode = ''
    Data.dataForm[index] = obj
  }
}

/**
     * input输入框只允许输入正数和小数(保留小数点后两位)
     */
const checkInput = (num) => {
  if (num) {
    num = num < 0.01 ? 0.01 : num
    let tmpVal = parseFloat(num.toString().replace(/[^\d^\\.]/g, ''))
    const reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
    if (!reg.test(tmpVal)) {
      tmpVal = tmpVal + ''
      tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
      const n = (tmpVal.split('.')).length - 1
      if (n > 1) {
        tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
      }
    }
    return tmpVal
  } else {
    return ''
  }
}

// 批量操作
const batchEdit = () => {
  Data.isbatch = true
}

// 退出批量
const escBatch = () => {
  Data.isbatch = false
  selectAllBtn(false)
}

// 批量设置
const batchSubmit = () => {
  if (Data.selectSpecList.length > 0) {
    Data.isSetting = true
  } else {
    uni.showToast({
      title: $t('qingXuanZeSheZhiShuXing'),
      mask: true,
      icon: 'none',
      duration: 1000
    })
  }
}

// 退出批量设置
const closeBatch = () => {
  Data.isSetting = false
}

// 批量设置提交
const handleClickBtn = (obj) => {
  Data.isSetting = false
  Data.dataForm.forEach((item, index) => {
    // 保障stockPointList非空
    if (!item.stockPointList) item.stockPointList = []
    if (Data.selectSpecList.indexOf(index) >= 0 && item.status === 1) {
      item.price = (obj.price ? obj.price : item.price)
      item.warehouseStock = (obj.stocks ? obj.stocks : item.stocks)
      item.stocks = (obj.stocks ? obj.stocks : item.stocks)
      item.oriPrice = (obj.oriPrice ? obj.oriPrice : item.oriPrice)
      item.volume = (obj.volume ? obj.volume : item.volume)
      item.weight = (obj.weight ? obj.weight : item.weight)
      item.stockWarning = (obj.stockWarning ? obj.stockWarning : item.stockWarning)
      let isHaveDefaultWarehouse = false // 库存中是否存在默认仓库
      for (let i = 0; i < item.stockPointList.length; i++) {
        if (item.stockPointList[i].skuId) {
          // 存在skuId，则计算changeStock，并将默认仓库库存设置为stockIntVal
          if (item.stockPointList[i].type !== 0) {
            // 非默认仓库，库存改为0
            item.stockPointList[i].changeStock = -(item.stockPointList[i].stock - (item.stockPointList[i].changeStock || 0))
            item.stockPointList[i].stock = 0
          } else {
            item.stockPointList[i].changeStock = item.stocks - item.stockPointList[i].stock + (item.stockPointList[i].changeStock || 0)
            item.stockPointList[i].stock = item.stocks
            isHaveDefaultWarehouse = true
          }
        } else {
          if (item.stockPointList[i].type === 0) {
            isHaveDefaultWarehouse = true
            item.stockPointList[i].stock = item.stocks // 无skuId的默认仓库（此次修改新增的仓库库存，无需传changeStock）
            continue
          }
          item.stockPointList.splice(i, 1) // 不存在skuId，则删除当前项
          i--
        }
      }
      if (!isHaveDefaultWarehouse) {
        // 不存在默认仓库，则存储一条默认仓库信息
        item.stockPointList.push({
          stock: item.stocks,
          stockPointId: prodStore.stockPointInfo.defaultWarehouseId,
          stockPointType: 1,
          type: 0
        })
      }
    }
  })
}

// 全选事件
const selectAllBtn = (val) => {
  Data.selectSpecList = []
  if (val) {
    Data.dataForm.forEach((item, index) => {
      if (item.isShow) {
        Data.selectSpecList.push(index)
      }
    })
    Data.selectSpecList.forEach((item) => {
      Data.dataForm[item].isSelect = true
    })
    Data.prodManaBtnConfig2.isChecked = true
  } else {
    Data.dataForm.forEach((item) => {
      item.isSelect = false
    })
    Data.prodManaBtnConfig2.isChecked = false
  }
  proxy.$forceUpdate()
}

// 筛选规格值显示
const clickSkuName = (name, index) => {
  const newList = JSON.parse(JSON.stringify(Data.collSelect))
  Data.collSelect[index] = name
  if (newList.toString() === Data.collSelect.toString()) return
  selectAllBtn(false)
  Data.selectSpecList = []
  const collSelect = Data.collSelect.filter((itemc) => {
    return itemc !== ''
  })
  if (collSelect.length === 0) {
    Data.dataForm.forEach((item) => {
      item.isShow = true
    })
    return
  }
  Data.dataForm.forEach((item) => {
    const list = Data.collSelect.filter((x, index) => {
      if (x === '') {
        return ''
      }
      return item.name.indexOf(x) > -1 && item.name[index] === x
    })
    // const list = [...new Set(collSelect)].filter(x => s.has(x))
    if (list.length > 0 && list.length === collSelect.length) {
      item.isShow = true
    } else {
      item.isShow = false
    }
  })
}

// 选中规格值
const changeCollapse = (val, isShow) => {
  if (isShow) {
    Data.specTeamSel = val
    Data.isMask = true
  } else {
    Data.specTeamSel = -1
    Data.isMask = false
  }
}

// 关闭下拉
const closeVal = () => {
  Data.specTeamSel = -1
  Data.isMask = false
}

// 修改库存
const toChangeStock = (index, stockMode) => {
  if (!Data.dataForm[index]?.status) {
    return
  }
  if (prodStore.dataForm.mold === 2) {
    uni.showToast({
      title: $t('zuHeShangPinBuNengBianJiKuCun'),
      icon: 'none'
    })
    return
  }
  if (prodStore.dataForm.mold === 3 && prodStore.dataForm.isBindVoucher === 1) {
    uni.showToast({
      title: $t('kuCunYouGaiKaQuanWeiFaFangShuLiangJueDingBuNengDanDuBianJi'),
      icon: 'none'
    })
    return
  }
  const { warehouseSize, stationSize } = prodStore.stockPointInfo
  if ((stockMode === 'warehouse' && warehouseSize === 1) || (stockMode === 'station' && stationSize === 0) || prodStore.dataForm.mold === 1 || prodStore.dataForm.mold === 3) {
    return
  }
  if (prodStore.dataForm.mold === null) {
    uni.showToast({
      title: $t('qingXianXuanZeShangPinLeiXing-0'),
      icon: 'none'
    })
    return
  }
  uni.setStorageSync('bbcMsSpecificationInfo', {
    dataForm: Data.dataForm
  })
  uni.navigateTo({
    url: `/package-prod/pages/post-prod/stock-update?indexValue=${index}&stockModeStr=${stockMode}&showProd=${showProd.value}`
  })
}

const toAssociationGoods = (index) => {
  if (prodStore.dataForm.mold !== 2) return
  uni.navigateTo({
    url: '/package-prod/pages/association-goods/association-goods?skuIndex=' + index + '&showProd=' + showProd.value
  })
}

const toCouponPage = (index) => {
  uni.navigateTo({
    url: '/package-prod/pages/post-prod/coupon-page?skuIndex=' + index
  })
}
</script>

<style lang="scss" scoped>
@use "specification-breakdown";
</style>
