<template>
    <div class="multi-number-editor">
        <div class="multi-selector-editor flex">
            <InputNumber
                class="multi-selector"
                :id="numberId"
                :placeholder="placeholder"
                :size="size"
                :precision="precision"
                v-model="CurrentVal1"
                :disabled="disabled ? true : false"
                :active-change="false"
            ></InputNumber>
            <InputNumber
                class="multi-selector"
                :id="numberId"
                :placeholder="placeholder"
                :size="size"
                :precision="precision"
                v-model="CurrentVal2"
                :disabled="disabled ? true : false"
                :active-change="false"
            ></InputNumber>
            <InputNumber
                class="multi-selector"
                :id="numberId"
                :placeholder="placeholder"
                :size="size"
                :precision="precision"
                v-model="CurrentVal3"
                :disabled="disabled ? true : false"
                :active-change="false"
            ></InputNumber>
            <InputNumber
                class="multi-selector"
                :id="numberId"
                :placeholder="placeholder"
                :size="size"
                :precision="precision"
                v-model="CurrentVal4"
                :disabled="disabled ? true : false"
                :active-change="false"
            ></InputNumber>
        </div>
        <div class="unit-text">{{ unit }}</div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from 'vue-property-decorator';

@Component({})
export default class MultiNumberEditor extends Vue {
    /**
     * 双向绑定值
     * @type {any}
     * @memberof MultiNumberEditor
     */
    @Model('change') readonly itemValue?: any;

    /**
     * 生命周期 （多行文本十行高度问题）
     * @type {any}
     * @memberof MultiNumberEditor
     */
    public mounted() {
        this.addEvent();
        if (this.textareaId) {
            let textarea: any = document.getElementById(this.textareaId);
            if (textarea) {
                textarea.style = this.textareaStyle;
            }
        }
    }

    /**
     * 单位
     * @type {String}
     * @memberof MultiNumberEditor
     */
    @Prop() public unit?: string;

    /**
     * 多行文本十行 特殊参数样式（模型高度自带）
     * @type {String}
     * @memberof MultiNumberEditor
     */
    @Prop() public textareaStyle?: string;

    /**
     * 多行文本十行 特殊参数id（模型高度自带）
     * @type {String}
     * @memberof MultiNumberEditor
     */
    @Prop() public textareaId?: string;
    /**
     * 大小
     * @type {String}
     * @memberof MultiNumberEditor
     */
    @Prop() public size?: string;

    /**
     * 大小
     * @type {String}
     * @memberof MultiNumberEditor
     */
    @Prop() public name?: string;

    /**
     * placeholder值
     * @type {String}
     * @memberof MultiNumberEditor
     */
    @Prop() public placeholder?: string;

    /**
     * 是否禁用
     * @type {boolean}
     * @memberof MultiNumberEditor
     */
    @Prop() public disabled?: boolean;

    /**
     * 属性类型
     *
     * @type {string}
     * @memberof MultiNumberEditor
     */
    @Prop() public type?: string;

    /**
     * 文本行数
     * @type {String}
     * @memberof MultiNumberEditor
     */
    @Prop({ default: 2 }) public rows?: number;

    /**
     * 精度
     *
     * @type {number}
     * @memberof MultiNumberEditor
     */
    @Prop({ default: 0 }) public precision?: number;

    /**
     * 多行文本行数
     *
     * @type {string}
     * @memberof MultiNumberEditor
     */
    @Prop() public autoSize?: any;

    /**
     * 数值框numberId
     */
    public numberId: string = this.$util.createUUID();

    /**
     * 获取编辑器对应值
     *
     * @param {index:number}
     * @memberof MultiNumberEditor
     */
    getCurrentVal(index: number) {
        let res: any = null;
        if (this.itemValue) {
            let arr = this.itemValue.split(',');
            if (arr.length == 4) {
                res = isNaN(parseInt(arr[index - 1])) ? null : parseInt(arr[index - 1]);
            }
        }
        return res;
    }

    /**
     * 上传编辑器值
     *
     * @param {index:number,val:any}
     * @memberof MultiNumberEditor
     */
    setCurrentVal(index: number, val: any) {
        let _data: any = val;
        let res1 = index == 1 ? parseInt(val) : this.CurrentVal1 || 0;
        let res2 = index == 2 ? parseInt(val) : this.CurrentVal2 || 0;
        let res3 = index == 3 ? parseInt(val) : this.CurrentVal3 || 0;
        let res4 = index == 4 ? parseInt(val) : this.CurrentVal4 || 0;
        _data = `${res1},${res2},${res3},${res4}`;
        this.$emit('change', _data);
    }

    /**
     * 当前值1
     *
     * @memberof MultiNumberEditor
     */
    get CurrentVal1() {
        return this.getCurrentVal(1);
    }

    /**
     * 值变化1
     *
     * @memberof MultiNumberEditor
     */
    set CurrentVal1(val: any) {
        this.setCurrentVal(1, val);
    }

    /**
     * 当前值2
     *
     * @memberof MultiNumberEditor
     */
    get CurrentVal2() {
        return this.getCurrentVal(2);
    }

    /**
     * 值变化2
     *
     * @memberof MultiNumberEditor
     */
    set CurrentVal2(val: any) {
        this.setCurrentVal(2, val);
    }

    /**
     * 当前值3
     *
     * @memberof MultiNumberEditor
     */
    get CurrentVal3() {
        return this.getCurrentVal(3);
    }

    /**
     * 值变化3
     *
     * @memberof MultiNumberEditor
     */
    set CurrentVal3(val: any) {
        this.setCurrentVal(3, val);
    }

    /**
     * 当前值4
     *
     * @memberof MultiNumberEditor
     */
    get CurrentVal4() {
        return this.getCurrentVal(4);
    }

    /**
     * 值变化4
     *
     * @memberof MultiNumberEditor
     */
    set CurrentVal4(val: any) {
        this.setCurrentVal(4, val);
    }

    /**
     * 回车事件
     *
     * @param {*} $event
     * @memberof MultiNumberEditor
     */
    @Emit()
    public enter($event: any) {
        if (!$event || $event.keyCode !== 13) {
            return;
        }
        return $event;
    }

    /**
     * 给数值框中的箭头按钮添加事件
     *
     * @memberof MultiNumberEditor
     */
    public addEvent() {
        if (Object.is(this.type, 'number')) {
            // 整个页面渲染完之后再去执行
            this.$nextTick(() => {
                let inputNumber: any = document.getElementById(this.numberId);
                let handlerWrap: any = inputNumber.firstElementChild;
                handlerWrap.onmouseover = () => {
                    inputNumber.style.paddingRight = '15px';
                    inputNumber.style.transition = 'all 0.2s linear';
                };
                handlerWrap.onmouseout = () => {
                    inputNumber.style.paddingRight = '0px';
                };
            });
        }
    }
}
</script>

<style lang="less">
@import './multi-number-editor.less';
</style>
