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

  https://www.mall4j.com/

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

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

<template>
  <view class="Mall4j page-unify-fieight">
    <view class="body">
      <view>
        <view class="money">
          <text>{{ $t('jineYuan') }}</text>
          <input
            v-model="deliveryIndex.pic"
            type="number"
            :placeholder="$t('qingShuRuJinE')"
            @blur="handleInputValue(deliveryIndex.pic, 'pic', 0.01, 9999)"
          >
        </view>
        <view class="reminder">
          {{ $t('sheZhiGaiShangPinDeGuoNeiTongYiYunFeiJiaGe') }}
        </view>
      </view>
    </view>

    <view class="footer">
      <button
        class="button"
        type="primary"
        @tap="toTableRate"
      >
        {{ $t('queDing') }}
      </button>
    </view>
  </view>
</template>

<script setup>
const prodStore = useProdStore()
const deliveryIndex = computed(() => prodStore.deliveryIndex)

onShow(() => {
  uni.setNavigationBarTitle({
    title: $t('tongYiYunFei')
  })
})

const toTableRate = () => {
  uni.redirectTo({
    url: '/package-prod/pages/post-prod/table-rate'
  })
}

/**
 * 处理输入框数据
 * @param data
 * @param dataFields
 * @param min 最小值
 * @param max 最大值
 */
const handleInputValue = (data, dataFields, min, max) => {
  prodStore.deliveryIndex[dataFields] = checkInput(data)
  if (data || data === 0) {
    // 保留两位小数
    if (data > max) {
      prodStore.deliveryIndex[dataFields] = max
    }
    if (data < min) {
      prodStore.deliveryIndex[dataFields] = min
    }
  }
}

/**
 * 只允许输入正数和小数(保留小数点后两位)
 */
const checkInput = (num) => {
  if (num) {
    let tmpVal = String(num).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 ''
  }
}
</script>

<style lang="scss" scoped>
.page-unify-fieight {
  width: 750rpx;
  background-color: #F2F3F7;
  min-height: 100vh;
  font-size: 28rpx;
  color: #333;
  font-family: PingFang SC;
  padding-top: 20rpx;

  .body {
    background-color: #F2F3F7;

    .money {
      padding: 0 30rpx;
      background-color: #fff;
      height: 92rpx;
      line-height: 92rpx;
      display: flex;
      justify-content: space-between;

      input {
        font-size: 28rpx;
        text-align: right;
        margin-top: 25rpx;
      }
    }
  }

  .reminder {
    padding: 0 30rpx;
    margin: 20rpx 0 40rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .footer {
    padding: 0 30rpx;

    button {
      background-color: #082BA6;
    }
  }
}
</style>
