/**
* author: Louie Butch
* date: 2/3/2021
* email: 844089357@qq.com
* desc:
*/
<template>
    <el-input-number v-if="isFocus"
                     class="hd-input-number"
                     ref="hdInputNumber"
                     :controls="false"
                     v-model="val"
                     :size="size"
                     :placeholder="placeholder"
                     @change="valChange"
                     style="width: 100%"
                     :style="textStyle"
                     @blur="inputBlur"
    />
    <div class="hd-input-number" v-else @click="setFocus" style="min-height: 30px;width: 100%">{{showVal}}</div>
</template>

<script>
    export default {
        name: 'hd-input-number',
        props: {
            value: {
                type: Number,
                default: null
            },
            placeholder: {
                type: String,
                default: ''
            },
            size: {
                type: String,
                default: 'small'
            },
            // 精度
            precision: {
                type: Number,
                default: 4
            },
            removeZero: {
                type: Boolean,
                default: true
            },
            align: {
                type: String,
                default: 'left'
            }
        },
        data(){
            return {
                val: null,
                isFocus: true,
                showVal: null
            }
        },
        watch: {
            value: {
                handler(val) {
                    this.val = val;
                },
                deep: true,
                immediate: true
            }
        },
        computed: {
            textStyle(){
                return {
                    'textAlign': this.align
                }
            }
        },
        methods: {
            valChange(val){
                this.val = val === '' || val === 'undefined' ? null : val;

                this.$emit('input', this.val);
                this.$emit('change', this.val);
            },
            setFocus(){
                this.isFocus = true;
                this.$nextTick(() => {
                    this.$refs.hdInputNumber.focus();
                });
            },
            inputBlur(){
                this.isFocus = false;
                this.setVal();
            },

            setVal(){
                if (this.val == null || this.val === '') {
                    this.showVal = null;
                } else {
                    if (!isNaN(this.val)) {
                        this.showVal = this.removeZero ? this.val.toFixed(this.precision) * 1 : this.val.toFixed(this.precision);
                    } else {
                        this.showVal = null;
                    }
                }
            },
        }

    };
</script>
<style lang="scss" scoped>
    .hd-input-number {
        text-align: var(textAlign);

        & /deep/ {
            .el-input__inner {
                padding: 0;
                text-align: var(textAlign);
            }
        }
    }
</style>