<template>
    <textarea class="input-textarea" :value="currentValue" @input="handleInput" ref="textarea" v-bind="$props" :style="textareaStyle"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
              :aria-label="label">
    </textarea>

    <!--<div class="el-textarea">-->

    <!--</div>-->
</template>
<script>
    import emitter from 'element-ui-focus/src/mixins/emitter';
    import Focus from 'element-ui-focus/src/mixins/focus';
    import Migrating from 'element-ui-focus/src/mixins/migrating';
    import calcTextareaHeight from './calcTextareaHeight';
    import merge from 'element-ui-focus/src/utils/merge';

    export default {
        name: 'focusTextarea',

        componentName: 'focusTextarea',

        mixins: [emitter, Focus('input'), Migrating],

        inject: {
            focusForm: {
                default: ''
            },
            focusFormItem: {
                default: ''
            }
        },

        data() {
            return {
                currentValue: this.value,
                textareaCalcStyle: {}
            };
        },

        props: {
            value: [String, Number],
            placeholder: String,
            size: String,
            resize: String,
            name: String,
            form: String,
            id: String,
            maxlength: Number,
            minlength: Number,
            readonly: Boolean,
            autofocus: Boolean,
            disabled: Boolean,
            autosize: {
                type: [Boolean, Object],
                default: false
            },
            rows: {
                type: Number,
                default: 2
            },
            autoComplete: {
                type: String,
                default: 'off'
            },
            max: {},
            min: {},
            step: {},
            validateEvent: {
                type: Boolean,
                default: true
            },
            label: String
        },

        computed: {
            _elFormItemSize() {
                return (this.focusFormItem || {}).elFormItemSize;
            },
            validateState() {
                return this.focusFormItem ? this.focusFormItem.validateState : '';
            },
            needStatusIcon() {
                return this.focusForm ? this.focusForm.statusIcon : false;
            },
            validateIcon() {
                return {
                    validating: 'el-icon-loading',
                    success: 'el-icon-circle-check',
                    error: 'el-icon-circle-close'
                }[this.validateState];
            },
            textareaStyle() {
                return merge({}, this.textareaCalcStyle, {resize: this.resize});
            },
        },

        watch: {
            'value'(val, oldValue) {
                this.setCurrentValue(val);
            }
        },

        methods: {
            handleBlur(event) {
                this.$emit('blur', event);
                if (this.validateEvent) {
                    this.dispatch('focusFormItem', 'el.form.blur', [this.currentValue]);
                }
            },
            resizeTextarea() {
                if (this.$isServer) return;
                var {autosize} = this;
                if (!autosize) {
                    this.textareaCalcStyle = {
                        minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
                    };
                    return;
                }
                const minRows = autosize.minRows;
                const maxRows = autosize.maxRows;

                this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
            },
            handleFocus(event) {
                this.$emit('focus', event);
            },
            handleInput(event) {
                const value = event.target.value;
                this.$emit('input', value);
                this.setCurrentValue(value);
            },
            handleChange(event) {
                this.$emit('change', event.target.value);
            },
            setCurrentValue(value) {
                if (value === this.currentValue) return;
                this.$nextTick(_ => {
                    this.resizeTextarea();
                });
                this.currentValue = value;
                if (this.validateEvent) {
                    this.dispatch('focusFormItem', 'el.form.change', [value]);
                }
            }
        },

        mounted() {
            this.resizeTextarea();
        }
    };
</script>
