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

  https://www.mall4j.com/

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

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

<template>
  <view class="Mall4j add-specifications">
    <view
      class="mask"
      @tap="cancal"
    />
    <view class="content-box">
      <view class="title">
        <text>{{ header }}</text>
        <view
          class="close"
          @tap="cancal"
        />
      </view>
      <view class="sku-list">
        <empty-tips
          v-if="0"
          :tips-list="tipsList"
        />
        <view class="section">
          <text>
            {{ $t('xiaoShouJiaYuan') }}<text class="red">
              *
            </text>
          </text>
          <input
            v-model="price"
            :placeholder="$t('qingTianXie-0')"
            type="digit"
            maxlength="15"
            @blur="changeNum('price')"
          >
        </view>
        <view class="section">
          <text>
            {{ $t('kuCun') }} <text
              v-if="mlod!==2"
              class="red"
            >
              *
            </text>
          </text>
          <text
            v-if="mlod===3&&isBindVoucher===1"
            @tap="ejectTips"
          >
            0
          </text>
          <input
            v-else
            v-model="stocks"
            :placeholder="mlod===2 ? $t('zuHeShangPinBuNengBianJiKuCun') : $t('qingTianXie')"
            type="number"
            maxlength="15"
            :disabled="mlod===2"
            @blur="changeInventory"
          >
        </view>
        <view class="section">
          <text>{{ $t('shiChangJiaYuan') }}</text>
          <input
            v-model="oriPrice"
            :placeholder="$t('huaXianJiaXuanTian')"
            type="digit"
            maxlength="15"
            @blur="changeNum('oriPrice')"
          >
        </view>
        <view
          v-if="mlod!==1 && mlod!==3"
          class="section"
        >
          <text>{{ $t('shangPinTiJiM') }}</text>
          <input
            v-model="volume"
            :placeholder="$t('qingTianXieXuanTian-1')"
            type="digit"
            maxlength="15"
            @blur="changeNum('volume')"
          >
        </view>
        <view
          v-if="mlod!==1 && mlod!==3"
          class="section"
        >
          <text>{{ $t('shangPinZhongLiangKg') }}</text>
          <input
            v-model="weight"
            :placeholder="$t('qingTianXieXuanTian-1')"
            type="digit"
            maxlength="15"
            @blur="changeNum('weight')"
          >
        </view>
        <view
          v-if="mlod!==1 && mlod!==2"
          class="section"
        >
          <text>{{ $t('kuCunYuJing') }}</text>
          <input
            v-model="stockWarning"
            :placeholder="$t('qingTianXieXuanTian-1')"
            type="digit"
            maxlength="15"
            @blur="changeNum('stockWarning')"
          >
        </view>
      </view>
      <view class="add-specifications-footer">
        <common-btn
          :btn-config="prodManaBtnConfig"
          @handle-click-btn="AddSpecificationValue"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const emit = defineEmits(['cancal', 'handleClickBtn'])
defineProps({
  title: {
    type: String,
    default: 'name'
  },
  mlod: { // 1虚拟商品 虚拟商品不显示体积重量
    type: Number,
    default: 0
  },
  isBindVoucher: {
    type: Number,
    default: 0
  }
})
const tipsList = [$t('ninHuanMeiYouTianJiaGuiGe')]

const Data = reactive({
  price: '',
  stocks: '',
  oriPrice: '',
  volume: '',
  weight: 0.01,
  stockWarning: '',
  prodManaBtnConfig: {
    btnText: $t('queDing'),
    isPlain: false
  },

  header: $t('piLiangSheZhi')
})

const { price, stocks, oriPrice, volume, weight, stockWarning, prodManaBtnConfig, header } = toRefs(Data)

const cancal = () => {
  emit('cancal')
}

const AddSpecificationValue = () => {
  const obj = {
    price: Data.price,
    stocks: Data.stocks,
    oriPrice: Data.oriPrice,
    volume: Data.volume,
    weight: Data.weight,
    stockWarning: Data.stockWarning
  }
  emit('handleClickBtn', obj)
}

const changeInventory = () => {
  let num = Data.stocks
  num = Number(num).toFixed(0)
  num = Number(num.toString().replace(/[^\d]/g, ''))
  if (num > 9999999) {
    num = 9999999
  }
  Data.stocks = Number(num)
}

// 输入金额校验
const changeNum = (type) => {
  const num = Data[type]
  Data[type] = checkInput(num)
  if ((type === 'price' || type === 'oriPrice') && Data[type] > 10000000) {
    Data[type] = 10000000
  }
  if (type === 'weight' && Data[type] < 0.01) {
    Data[type] = 0.01
  }
}

/**
 * input输入框只允许输入正数和小数(保留小数点后两位)
 */
const checkInput = (num) => {
  if (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 ejectTips = () => {
  uni.showToast({
    title: $t('kuCunYouGaiKaQuanWeiFaFangShuLiangJueDingBuNengDanDuBianJi'),
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.add-specifications {
  @keyframes window-open {
    0% {
      bottom: -900rpx;
    }
    100% {
      bottom: 0;
    }
  }
  .content-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-sizing: border-box;
    padding: 30rpx;
    border-radius: 20rpx 20rpx 0 0;
    animation: window-open 0.3s 1;
    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      font-family: PingFang SC;
      // display: flex;
      // justify-content: center;
      text-align: center;
      margin-bottom: 28rpx;
      .close {
        content: '';
        width: 36rpx;
        height: 36rpx;
        background: #f5f5f5;
        border-radius: 50%;
        float: right;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .close::after {
        content: '';
        display: block;
        width: 14rpx;
        height: 14rpx;
        background: url(~@/static/images/close.png) no-repeat;
        background-size: 14rpx 14rpx;
      }
    }
    .sku-list {
      // height: 600rpx;
      margin-top: 20rpx;
      overflow-y: auto;
      margin-bottom:114rpx ;
    }
  }
  .add-specifications-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    // background: #ffffff;
    height: 114rpx;
  }
}

 .section {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 30rpx;
  padding: 30rpx 0;
  box-sizing: border-box;
}
 .section:not(:last-child) {
  border-bottom: 2rpx solid #e5e5e5;
}

 .section text {
  width: 25%;
  color: #333;
  font-size: 28rpx;
}

 .section text .red {
  color: #FD4171 ;
}

 .section input {
  width: 70%;
  padding: 0 20rpx;
}
</style>
