<template>
    <view class="s-number-box">
        <view
            class="s-number-box__slot"
            @tap.stop="clickHandler('minus')"
            @touchstart="onTouchStart('minus')"
            @touchend.stop="clearTimeout"
            v-if="showMinus && $slots.minus"
        >
            <slot name="minus" />
        </view>
        <view
            v-else-if="showMinus"
            class="s-number-box__minus"
            @tap.stop="clickHandler('minus')"
            @touchstart="onTouchStart('minus')"
            @touchend.stop="clearTimeout"
            hover-class="s-number-box__minus--hover"
            hover-stay-time="150"
            :class="{ 's-number-box__minus--disabled': isDisabled('minus')}"
            :style="[buttonStyle('minus')]"
        >
            <s-icon
                name="minus"
                :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
                size="15"
                bold
                :customStyle="iconStyle"
            ></s-icon>
        </view>
        <slot name="input">
            <input
                :disabled="disabledInput || disabled"
                :cursor-spacing="getCursorSpacing"
                :class="{ 's-number-box__input--disabled': disabled || disabledInput }"
                v-model="currentValue"
                class="s-number-box__input"
                @blur="onBlur"
                @focus="onFocus"
                @input="onInput"
                type="number"
                :style="[inputStyle]"
            />
        </slot>
        <view
            class="s-number-box__slot"
            @tap.stop="clickHandler('plus')"
            @touchstart="onTouchStart('plus')"
            @touchend.stop="clearTimeout"
            v-if="showPlus && $slots.plus"
        >
            <slot name="plus" />
        </view>
        <view
            v-else-if="showPlus"
            class="s-number-box__plus"
            @tap.stop="clickHandler('plus')"
            @touchstart="onTouchStart('plus')"
            @touchend.stop="clearTimeout"
            hover-class="s-number-box__plus--hover"
            hover-stay-time="150"
            :class="{ 's-number-box__minus--disabled': isDisabled('plus') }"
            :style="[buttonStyle('plus')]"
        >
            <s-icon
                name="plus"
                :color="isDisabled('plus') ? '#DADBDE' : '#666666'"
                size="15"
                bold
                :customStyle="iconStyle"
            ></s-icon>
        </view>
    </view>
</template>

<script>
import props from './props.js'
/**
 * numberBox 步进器
 * @description 该组件一般用于商城购物选择物品数量的场景。
 * @tutorial https://uviewui.com/components/numberBox.html
 * @property {String | Number}	name			步进器标识符，在change回调返回
 * @property {String | Number}	value			用于双向绑定的值，初始化时设置设为默认min值(最小值)  （默认 0 ）
 * @property {String | Number}	min				最小值 （默认 1 ）
 * @property {String | Number}	max				最大值 （默认 Number.MAX_SAFE_INTEGER ）
 * @property {String | Number}	step			加减的步长，可为小数 （默认 1 ）
 * @property {Boolean}			integer			是否只允许输入整数 （默认 false ）
 * @property {Boolean}			disabled		是否禁用，包括输入框，加减按钮 （默认 false ）
 * @property {Boolean}			disabledInput	是否禁用输入框 （默认 false ）
 * @property {Boolean}			asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
 * @property {String | Number}	inputWidth		输入框宽度，单位为px （默认 35 ）
 * @property {Boolean}			showMinus		是否显示减少按钮 （默认 true ）
 * @property {Boolean}			showPlus		是否显示增加按钮 （默认 true ）
 * @property {String | Number}	decimalLength	显示的小数位数
 * @property {Boolean}			longPress		是否开启长按加减手势 （默认 true ）
 * @property {String}			color			输入框文字和加减按钮图标的颜色 （默认 '#323233' ）
 * @property {String | Number}	buttonSize		按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致 （默认 30 ）
 * @property {String | Number}	buttonWidth		按钮宽度，单位px，输入框宽度和此值保持一致 （默认 30 ）
 * @property {String | Number}	buttonHeight	按钮高度，单位px，输入框高度和此值保持一致 （默认 30 ）
 * @property {String}			bgColor			输入框和按钮的背景颜色 （默认 '#EBECEE' ）
 * @property {String | Number}	cursorSpacing	指定光标于键盘的距离，避免键盘遮挡输入框，单位px （默认 100 ）
 * @property {Boolean}			disablePlus		是否禁用增加按钮 （默认 false ）
 * @property {Boolean}			disableMinus	是否禁用减少按钮 （默认 false ）
 * @property {Object ｜ String}	iconStyle		加减按钮图标的样式
 *
 * @event {Function}	onFocus	输入框活动焦点
 * @event {Function}	onBlur	输入框失去焦点
 * @event {Function}	onInput	输入框值发生变化
 * @event {Function}	onChange
 * @example <s-number-box v-model="value" @change="valChange"></s-number-box>
 */
export default {
    name: 's-number-box',
    mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
    data() {
        return {
            // 输入框实际操作的值
            currentValue: '',
            // 定时器
            longPressTimer: null,
        }
    },
    watch: {
        // 多个值之间，只要一个值发生变化，都要重新检查check()函数
        watchChange(n) {
            this.check()
        },
        // 监听v-mode的变化，重新初始化内部的值
        value(n) {
            if (n !== this.currentValue) {
                this.currentValue = this.format(this.value)
            }
        },
    },
    computed: {
        getCursorSpacing() {
            // 判断传入的单位，如果为px单位，需要转成px
            return uni.$s.getPx(this.cursorSpacing)
        },
        // 按钮的样式
        buttonStyle() {
            return (type) => {
                const style = {
                    backgroundColor: this.bgColor,
                    height: uni.$s.addUnit(this.buttonHeight),
                    width: uni.$s.addUnit(this.buttonWidth),
                    color: this.color,
                }
                if (this.isDisabled(type)) {
                    style.backgroundColor = this.disabledBgColor
                }
                if (this.shape === 'circle') {
                    style.width = uni.$s.addUnit(this.buttonWidth)
                    style.borderRadius = '50%'
                }
                return style
            }
        },
        // 输入框的样式
        inputStyle() {
            const disabled = this.disabled || this.disabledInput
            const style = {
                color: this.color,
                backgroundColor: this.bgColor,
                height: uni.$s.addUnit(this.buttonHeight),
                width: uni.$s.addUnit(this.inputWidth),
                marginLeft: this.marginDistance + 'rpx',
                marginRight: this.marginDistance + 'rpx',
            }
            return style
        },
        // 用于监听多个值发生变化
        watchChange() {
            return [
                this.integer,
                this.decimalLength,
                parseFloat(this.min),
                parseFloat(this.max),
            ]
        },
        isDisabled() {
            return (type) => {
                if (type === 'plus') {
                    // 在点击增加按钮情况下，判断整体的disabled，是否单独禁用增加按钮，以及当前值是否大于最大的允许值
                    return (
                        this.disabled ||
                        this.disablePlus ||
                        this.currentValue >= parseFloat(this.max)
                    )
                }
                // 点击减少按钮同理
                return (
                    this.disabled ||
                    this.disableMinus ||
                    this.currentValue <= parseFloat(this.min)
                )
            }
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.currentValue = this.format(this.value)
        },
        // 格式化整理数据，限制范围
        format(value) {
            value = this.filter(value)
            // 如果为空字符串，那么设置为0，同时将值转为Number类型
            value = value === '' ? 0 : +value
            // 对比最大最小值，取在min和max之间的值
            value = Math.max(
                Math.min(parseFloat(this.max), value),
                parseFloat(this.min)
            )
            // 如果设定了最大的小数位数，使用toFixed去进行格式化
            if (this.decimalLength !== null) {
                value = value.toFixed(this.decimalLength)
            }
            return value
        },
        // 过滤非法的字符
        filter(value) {
            // 只允许0-9之间的数字，"."为小数点，"-"为负数时候使用
            value = String(value).replace(/[^0-9.-]/g, '')
            // 如果只允许输入整数，则过滤掉小数点后的部分
            if (this.integer && value.indexOf('.') !== -1) {
                value = value.split('.')[0]
            }
            return value
        },
        check() {
            // 格式化了之后，如果前后的值不相等，那么设置为格式化后的值
            const val = this.format(this.currentValue)
            if (val !== this.currentValue) {
                this.currentValue = val
            }
        },
        // 判断是否出于禁止操作状态
        // isDisabled(type) {
        // 	if (type === 'plus') {
        // 		// 在点击增加按钮情况下，判断整体的disabled，是否单独禁用增加按钮，以及当前值是否大于最大的允许值
        // 		return (
        // 			this.disabled ||
        // 			this.disablePlus ||
        // 			this.currentValue >= parseFloat(this.max)
        // 		)
        // 	}
        // 	// 点击减少按钮同理
        // 	return (
        // 		this.disabled ||
        // 		this.disableMinus ||
        // 		this.currentValue <= parseFloat(this.min)
        // 	)
        // },
        // 输入框活动焦点
        onFocus(event) {
            this.$emit('focus', {
                ...event.detail,
                name: this.name,
            })
        },
        // 输入框失去焦点
        onBlur(event) {
            // 对输入值进行格式化
            const value = this.format(event.detail.value)
            // 发出blur事件
            this.$emit('blur', {
                ...event.detail,
                name: this.name,
            })
        },
        // 输入框值发生变化
        onInput(e) {
            const { value = '' } = e.detail || {}
            // 为空返回
            if (value === '') {
                this.emitChange('')
                return
            }
            let formatted = this.filter(value)
            // 最大允许的小数长度
            if (this.decimalLength !== null && formatted.indexOf('.') !== -1) {
                const pair = formatted.split('.')
                formatted = `${pair[0]}.${pair[1].slice(0, this.decimalLength)}`
            }
            formatted = this.format(formatted)
            this.emitChange(formatted)
        },
        // 发出change事件
        emitChange(value) {
            // 如果开启了异步变更值，则不修改内部的值，需要用户手动在外部通过v-model变更
            if (!this.asyncChange) {
                this.$nextTick(() => {
                    this.$emit('input', value)
                    this.currentValue = value
                    this.$forceUpdate()
                })
            }
            this.$emit('change', {
                value,
                name: this.name,
            })
        },
        onChange() {
            const { type } = this
            if (this.isDisabled(type)) {
                return this.$emit('overlimit', type)
            }
            const diff = type === 'minus' ? -this.step : +this.step
            const value = this.format(this.add(+this.currentValue, diff))
            this.emitChange(value)
            this.$emit(type)
        },
        // 对值扩大后进行四舍五入，再除以扩大因子，避免出现浮点数操作的精度问题
        add(num1, num2) {
            const cardinal = Math.pow(10, 10)
            return Math.round((num1 + num2) * cardinal) / cardinal
        },
        // 点击加减按钮
        clickHandler(type) {
            this.type = type
            this.onChange()
        },
        longPressStep() {
            // 每隔一段时间，重新调用longPressStep方法，实现长按加减
            this.clearTimeout()
            this.longPressTimer = setTimeout(() => {
                this.onChange()
                this.longPressStep()
            }, 250)
        },
        onTouchStart(type) {
            if (!this.longPress) return
            this.clearTimeout()
            this.type = type
            // 一定时间后，默认达到长按状态
            this.longPressTimer = setTimeout(() => {
                this.onChange()
                this.longPressStep()
            }, 600)
        },
        // 触摸结束，清除定时器，停止长按加减
        onTouchEnd() {
            if (!this.longPress) return
            this.clearTimeout()
        },
        // 清除定时器
        clearTimeout() {
            clearTimeout(this.longPressTimer)
            this.longPressTimer = null
        },
    },
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

$s-numberBox-hover-bgColor: #e6e6e6 !default;
$s-numberBox-disabled-color: #c8c9cc !default;
$s-numberBox-disabled-bgColor: #f5f6f7 !default;
$s-numberBox-plus-radius: 4px !default;
$s-numberBox-minus-radius: 4px !default;
$s-numberBox-input-text-align: center !default;
$s-numberBox-input-font-size: 15px !default;
$s-numberBox-input-padding: 0 !default;
$s-numberBox-input-margin: 0 2px !default;
$s-numberBox-input-disabled-color: #c8c9cc !default;
$s-numberBox-input-disabled-bgColor: #f2f3f5 !default;

.s-number-box {
    @include flex(row);
    align-items: center;

    &__slot {
        /* #ifndef APP-NVUE */
        touch-action: none;
        /* #endif */
    }

    &__plus,
    &__minus {
        width: 35px;
        @include flex;
        justify-content: center;
        align-items: center;
        /* #ifndef APP-NVUE */
        touch-action: none;
        /* #endif */

        &--hover {
            background-color: $s-numberBox-hover-bgColor !important;
        }

        &--disabled {
            color: $s-numberBox-disabled-color;
            background-color: $s-numberBox-disabled-bgColor;
        }
    }
    &__circle {
        width: 30px;
        border-radius: 50%;
    }

    &__plus {
        border-top-right-radius: $s-numberBox-plus-radius;
        border-bottom-right-radius: $s-numberBox-plus-radius;
    }

    &__minus {
        border-top-left-radius: $s-numberBox-minus-radius;
        border-bottom-left-radius: $s-numberBox-minus-radius;
    }

    &__input {
        position: relative;
        text-align: $s-numberBox-input-text-align;
        font-size: $s-numberBox-input-font-size;
        padding: $s-numberBox-input-padding;
        margin: $s-numberBox-input-margin;
        @include flex;
        align-items: center;
        justify-content: center;

        &--disabled {
            color: $s-numberBox-input-disabled-color;
            background-color: $s-numberBox-input-disabled-bgColor;
        }
    }
}
</style>
