<template>
    <div
        :class="bem({
            resize,
        })">
        <label :class="bem('label')" :for="id || __id" v-if="label">{{label}}</label>
        <textarea
            :id="id || __id"
            :class="bem('inner', {focus: focused, tip: maxWordCount})"
            :placeholder="placeholder"
            :value="privateValue"
            @input="handleInput"
            @change="handleChange"
            @focus="handleFocus"
            @blur="handleBlur"
            rows="4"
            v-bind="$attrs"
            @keypress.enter="handleEnter"
        />
        <div
            :class="bem('word-count', { error: privateValue.length > maxWordCount })"
            v-if="maxWordCount"
        >
            {{privateValue.length}}/{{maxWordCount}}
        </div>
    </div>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';

let id = 0;

export default {
    name: createComponentName('textarea'),
    mixins: [componentMixin],
    model: {
        name: 'value',
        event: 'input',
    },
    props: {
        resize: {
            type: Boolean,
            default: false,
        },
        value: {
            type: String,
            default: '',
        },
        id: {
            type: String,
        },
        maxWordCount: {
            type: [Number, Boolean],
            default: false,
        },
        placeholder: {
            type: String,
            default: ''
        },
        label: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            privateValue: this.$hasProp('value') ? this.value : this.$hasProp('defaultValue') ? this.defaultValue : '',
            textareaCalcStyle: {},
            prefixOffset: null,
            suffixOffset: null,
            hovering: false,
            focused: false,
            isError: false,
        };
    },
    watch: {
        value(v) {
            this.privateValue = v;
        }
    },
    created() {
        if (!this.$hasProp('id')) {
            this.__id = 'gd-textarea-id-' + id++;
        }
    },
    methods: {
        handleInput(event) {
            const value = event.target.value;
            this.privateValue = value;
            this.$emit('input', value, event);
        },
        handleBlur(event) {
            this.focused = false;
            this.$emit('blur', event);
        },
        handleFocus(event) {
            this.focused = true;
            this.$emit('focus', event);
        },
        handleChange(event) {
            const value = event.target.value;
            this.privateValue = value;
            this.$emit('change', value, event);
        },
        handleEnter(event) {
            this.$emit('enter', event);
        },
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';

@textarea: ~'@{prefix}-textarea';

.@{textarea} {
    position: relative;

    * {
        box-sizing: border-box;
    }


    &--resize {
        textarea {
            resize: auto;
        }
    }


    & > * {
        flex-shrink: 0;
    }

    &__inner {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
        flex-shrink: 1;
        width: 100%;
        outline:none;
        resize: none;
        font-size: 14px;
        padding: @margin-sm @margin-base;
        position: relative;
        line-height: 1.2;
        .scrollbar();

        &--focus {
            border-color: #6C788C;
        }

        &--tip {
            padding-bottom: @margin-xxlg;
        }
    }

    &__label {
        color: #424242;
        font-weight: 500;
        flex: 0 0 auto;
        min-width: 36px;
    }

    textarea:focus {
        box-shadow: 0 0 0 1000px white inset;
    }

    &__word-count {
        background: white;
        padding: 0 6px;
        position: absolute;
        right: @margin-base - 8;
        bottom: 12px;
        text-align: right;
        font-size:11px;
        line-height:15px;

        &--error {
            color:rgba(238,68,68,1);
        }
    }
}

</style>
