<template>
    <div class="ht-base-input-combination-demo">
        <h4>复合型输入框</h4>
        <ht-base-input placeholder="请输入">
            <span slot="prepend">http://</span>
            <span slot="append">.com</span>
        </ht-base-input>

        <ht-base-input placeholder="请输入">
            <ht-base-select v-model="select1" slot="prepend" style="width: 80px">
                <ht-base-option value="http">http://</ht-base-option>
                <ht-base-option value="https">https://</ht-base-option>
            </ht-base-select>
            <ht-base-select v-model="select2" slot="append" style="width: 70px">
                <ht-base-option value="com">.com</ht-base-option>
                <ht-base-option value="org">.org</ht-base-option>
                <ht-base-option value="io">.io</ht-base-option>
            </ht-base-select>
        </ht-base-input>

        <h4>输入时格式化</h4>
        <ht-base-row>
            <ht-base-col span="4">
                <ht-base-input placeholder="￥" @on-blur="inputBlur15" @on-focus="inputFocus15" v-model="value15"/>
            </ht-base-col>
            <ht-base-col span="1" style="height: 32px;line-height: 32px;text-align: center;"><span>-</span></ht-base-col>
            <ht-base-col span="4">
                <ht-base-input placeholder="￥" @on-blur="inputBlur16" @on-focus="inputFocus16" v-model="value16"/>
            </ht-base-col>
        </ht-base-row>


    </div>
</template>

<script>
    export default {
        name: 'HtBaseInputCombinationDemo',
        data() {
            return {
                value11: '',
                value12: '',
                value13: '',
                value15: '',
                value16: '',
                select1: 'http',
                select2: 'com',
                select3: 'day',
                cacheValue15: '',
                cacheValue16: ''
            }
        },
        methods: {
            inputFocus15() {
                this.cacheValue15 = this.value15
                this.value15 = ''
            },
            inputBlur15(e) {
                let val = e.target.value
                if (val === '') {
                    this.value15 = this.cacheValue15
                    return
                }
                this.value15 = formatMoney(val);
            },
            inputFocus16() {
                this.cacheValue16 = this.value16
                this.value16= ''
            },
            inputBlur16(e) {
                let val = e.target.value
                if (val === '') {
                    this.value16 = this.cacheValue16
                    return
                }
                this.value16 = formatMoney(val);
            }
        }
    }

    function formatMoney(number, places, symbol, thousand, decimal) {
        number = number || 0;
        places = !isNaN(places = Math.abs(places)) ? places : 2;
        symbol = symbol !== undefined ? symbol : "";
        thousand = thousand || ",";
        decimal = decimal || ".";
        var negative = number < 0 ? "-" : "",
            i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "",
            j = (j = i.length) > 3 ? j % 3 : 0;
        return symbol + negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : "");
    }
</script>
<style lang="less">
    .ht-base-input-combination-demo {
        .ht-base-input{
            margin-bottom: 20px;
        }
    }
</style>

