
<template>
    <div class="as-textarea" :class="{
        'is-required': required
    }">
        <label class="as-textarea-label">
            {{ label }}
            <em>{{computedValueLength}}/{{maxlength}}</em>
        </label>
        <textarea
            class="as-textarea-content"
            :placeholder="placeholder"
            :value="value"
            @input="handleInput"
            @compositionstart="handleCompositionStart"
            @compositionend="handleCompositionEnd"
            :maxlength="maxlength">
        </textarea>
        <i v-if="!!voice" class="iconfont icon-yuyin" @click="handleVoice"></i>
    </div>
</template>

<script>
    import { isEmpty } from '../../../plugins/utils/validator'
    import { filters } from '../../../plugins/filters'
    export default {
        name: 'AsTextarea',
        props: {
            label: { default: '' },
            value: { default: '' },
            placeholder: { default: '' },
            required: { type: Boolean, default: false },
            pattern: { default: 'filterEmoji' },
            maxlength: { default: '100' },
            voice: { type: [Boolean, Function], default: false },
        },
        computed: {
            computedValueLength () {
                const { value } = this
                return isEmpty(value) ? 0 : value.toString().length
            }
        },
        methods: {
            handleCompositionStart (e) {
                e.target.composing = true
            },
            handleCompositionEnd(e){
                e.target.composing = false
                this.handleInput(e)
            },
            handleInput (e) {
                if (e.target.composing) return
                let value = e.target.value
                value = isEmpty(value) ? '' : String(value)
                const { pattern } = this
                if (pattern) {
                    const typeOfPattern = typeof pattern
                    if (typeOfPattern === 'function')
                        value = pattern(value)
                    else if (typeOfPattern === 'object')
                        value = value.replace(typeOfPattern, '')
                    else if (typeOfPattern === 'string' && filters[pattern])
                        value = filters[pattern](value)
                }
                e.target.value = value
                this.$emit('input', value)
            },
            // 处理语音输入
            handleVoice () {
                this.$emit('voice', this.contentCallback.bind(this))
                if (typeof this.voice === 'function') {
                    this.voice().then(this.contentCallback.bind(this)).null()
                }
            },
            contentCallback (content) {
                const { maxlength, value } = this
                content = value + content
                this.$emit('input', content.substring(0, maxlength))
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-textarea{
        @extend %pr;
        @extend %bw05;
        @extend %bwb;
        background-color: #fff;
        padding: j(12) j(16);
        &.is-required{
            .as-textarea-label{
                @extend %pr;
                &:before{
                    @extend %pa;
                    left: j(-8);
                    content: '*';
                    color: $color-danger;
                }
            }
        }
        .iconfont{
            @extend %cp;
            @extend %pa;
            font-size: j(32);
            right: j(16);
            bottom: j(6);
            color: $color-primary;
        }
        &-label{
            @extend %df;
            @extend %pr;
            @extend %c6;
            font-size: j(14);
            em{
                @extend %c9;
                margin-left: j(5);
            }
        }
        &-content{
            @extend %w100;
            @extend %c3;
            @extend %bsb;
            padding: j(10) 0 j(12);
            min-height: j(120);
            border: none;
            font-size: j(14);
            line-height: j(20);
        }
    }
</style>
