<template>
    <div class="row  go-form-row  margin-t-5">
        <go-label :labelWidth="labelWidth" :labelAlign="labelAlign" :item="inputItem"></go-label>
        <div :class="'go-content ' + getInputWid()" :style="getInputWidStyle()">

            <div class="go-content-body">
                      <textarea
                          :style="textareaStyle"
                          :itemId="inputItem.id"
                          :maxlength="getMaxLength(inputItem)"
                          ref="textArea"
                          :value="value"
                          @blur="$emit('blur', $event.target.value)"
                          @input="$emit('input', $event.target.value);clearErrorState();"
                          type="text"
                          class="form-control padding-l-bs"
                          :class="_getExtendClass"
                      ></textarea>
                <!--清空按钮图标-->
                <go-clear-input-icon
                    @clickClearIcon="clearInputValue"
                    v-model="value"
                    :right="5"
                ></go-clear-input-icon>
                <!--最大长度限制-->
                <go-max-length-label
                    v-if="inputItem.maxLength != null"
                    v-model="value"
                    :height="height"
                    :maxLength="inputItem.maxLength"
                ></go-max-length-label>

                <!--校验提醒图标-->
                <go-error-icon v-model="value"  :right="clearIconRight||inputItem.clearIconRight" :validMsg="validMsg||inputItem.validMsg" :errorFlag="errorFlag||inputItem.hasError"></go-error-icon>

            </div>

        </div>
    </div>
</template>

<script>
    import GoLabel from "./commponents/go-label";
    import GoErrorIcon from "./commponents/go-error-icon";
    import GoClearInputIcon from "./commponents/go-clear-input-icon";
    import GoMaxLengthLabel from "./commponents/go-max-length-label";
    import formMixin from "../../mixins/formMixins";
    import {AssertUtils} from "goingutils";

    export default {
        name: "go-com-textarea",
        mixins: [formMixin],
        props: {
            value: {},
            height: {
                type: Number,
                default: 80
            }
        },
        computed: {
            //获取额外的样式
            _getExtendClass() {
                let inputItemObj = this.inputItem;
                //是否显示校验样式 和disabled的样式
                let classes = [this.inputItem.hasError ? 'error-input' : '', inputItemObj.disabled ? 'input-disabled' : ''];
                //判断是否用户传入了errorFlag
                if (this.errorFlag) {
                    classes.push("error-input");
                }
                return classes;
            },
            textareaStyle() {
                var backJson = {height: this.height + "px", minHeight: this.height + "px"};
                return backJson;
            }
        },
        methods: {

            //获取输入最大值
            getMaxLength(item) {
                if (AssertUtils.isNotEmpty(item.maxLength) && item.maxLength > 0) {
                    return item.maxLength;
                }
            }
        },
        mounted(){
            //如果不可以编辑 则设置不可以编辑状态
            if(this.inputItem.disabled){
                $(this.$refs.textArea).attr("disabled","disabled");
            }
        },
        watch:{
            disabled(newVal){
                if(newVal){
                    $(this.$refs.textArea).attr("disabled","disabled");
                }else{
                    $(this.$refs.textArea).removeAttr("disabled");
                }
            }
        },
        components: {
            GoErrorIcon,
            GoLabel,
            GoMaxLengthLabel,
            GoClearInputIcon: GoClearInputIcon
        }
    };
</script>
