<template>
    <div class="row  go-form-row" :class="heightClass" v-show="inputItem.display == null ? true : inputItem.display">
        <!--        带radio的label-->
        <go-label-radio v-if="inputItem.radioBox"
                        ref="radioLabel"
                        @radioBoxClick="radioBoxClick"
                        :radioVal="radioVal" labelAlign="right" :item="inputItem"></go-label-radio>
        <!--        常规label-->
        <go-label v-else :item="inputItem"></go-label>
        <div :id="inputItem.inputId" @mousemove="mouseover" @mouseleave="mouseleave" class="go-content"
             :class="getInputWid()" :style="getInputWidStyle()">

            <div class="go-content-body"  :style="exStyle">
                <span><slot name="prefixLabel"></slot></span>
                <!--后缀图标-->
                <span class="go-input-suffix" style="cursor: pointer;" @click.stop="suffixClick" v-if="inputItem.suffix">
                      <Tooltip v-if="suffixTip"  :placement="placement">
                           <i :class="inputItem.suffix"></i>
                            <div slot="content">
                                  <slot name="suffixLabel"></slot>
                            </div>
                        </Tooltip>
                        <i v-else :class="inputItem.suffix"></i>
                </span>
                <!--前缀按钮-->
                <div class="go-input-group-prepend go-input-search" :class="prefixDisVal" @mousedown="suffixDown"
                     @mouseup="suffixUp"
                     v-if="inputItem.prefixBtn" @click="prefixClick"
                     :style="prefixBtnStyle">
                    <i :class="inputItem.prefixBtnIcon"></i>
                    {{inputItem.prefixBtnLabel}}
                </div>
                <input
                    AUTOCOMPLETE="off"
                    :itemId="inputItem.id"
                    :maxlength="getMaxLength(inputItem)"
                    :readonly="inputItem.readOnly||inputItem.disabled"
                    :placeholder="inputItem.placeholder"
                    :style="_inputStyle"
                    ref="input"
                    @input="inputMethods($event)"
                    @click.stop="inputClick"
                    @blur="$emit('blur', $event.target.value);blurValid($event.target.value)"
                    :value="value"
                    :type="elType"
                    class="form-control padding-l-bs"
                    :class="_getExtendClass"
                />
                <span class="max_info" v-if="!(errorFlag||inputItem.hasError)&&elType!=='number'&&showMaxLength&&inputItem.maxLength!=null && inputItem.maxLength > 0" :style="maxInfoStyle">{{count}}/{{getMaxLength(inputItem)}}</span>
                <!--前缀图标-->
                <span class="go-input-prefix" v-if="inputItem.prefix" @click="prefixClick">
                    <i :class="inputItem.prefix"></i>
                </span>
                <!--后缀按钮-->
                <div class="go-input-group-append go-input-search" :class="suffixDisVal"  @mousedown="prefixDown"
                     @mouseup="prefixUp"
                     v-if="inputItem.suffixBtn" @click.stop="suffixClick"
                     :style="suffixBtnStyle">
                    <i :class="inputItem.suffixBtnIcon"></i>
                    {{inputItem.suffixBtnLabel}}
                </div>
                <!--清空值 图标组件-->
                <go-clear-input-icon @clickClearIcon="clearInputValue" v-model="value" v-show="clearValue&&hoverFlag"
                                     :disabled="inputItem.disabled"
                                     :rightSlot="inputItem.rightSlot"
                                     :width="inputItem.width"
                                     :right="clearIconRight"></go-clear-input-icon>
                <!--校验提醒图标-->
                <go-error-icon v-model="value" :rightSlot="rightSlot" :right="clearIconRight||inputItem.clearIconRight" :validMsg="validMsg||inputItem.validMsg" :errorFlag="errorFlag||inputItem.hasError"></go-error-icon>
                <div class="right_append_div">
                    <slot name="rightAppend"></slot>
                </div>
            </div>

            <!--右侧图标方式-->
            <span slot="rightIcon" v-if="rightSlot" class="rightIcon">
                <Tooltip  :placement="placement">
                    <slot name="rightIcon"></slot>
                    <div slot="content">
                        <slot name="rightIconRemark"></slot>
                    </div>
                </Tooltip>
            </span>
        </div>
        <span v-show="hasRemark" class="remark_info" :style="remarkStyle">
            <Tooltip  :placement="placement">
                <i class="ivu-icon ivu-icon-ios-help-circle-outline"></i>
                <div slot="content">
                      <slot name="remark"></slot>
                </div>
            </Tooltip>
        </span>
    </div>
</template>

<script>
    import GoClearInputIcon from "./commponents/go-clear-input-icon";
    import GoErrorIcon from "./commponents/go-error-icon";
    import GoLabel from "./commponents/go-label";
    import formMixin from "../../mixins/formMixins";
    import {AssertUtils, GoingUtils} from "goingutils";
    import GoLabelRadio from "./commponents/go-label-radio";

    export default {
        name: "go-input",
        mixins: [formMixin],
        data() {
            return {
                count:0,
                hoverFlag: false,
            };
        },
        props: {
            placement: {
                type: String,
                default: "left"
            },
            //是否存在备注信息
            hasRemark: {
                type: Boolean,
                default: false
            },
            //备注左边的间距
            remarkLeft:{
                type: Number,
                default: 0
            },
            prefixDis:{},
            suffixDis:{},
            contentWidth: {},
            hasRightBtn: {
                type: Boolean,
                default: false
            },
            elType: {
                type: String,
                default: "text"
            },
            inputStyle: {
                type: Object,
                default: null
            }
        },
        computed: {
            remarkStyle(){
                var st = {};
                if (this.remarkLeft>0) {
                    st["left"] = this.remarkLeft+"px";
                }
                return st;
            },
            heightClass(){
                if(this.height&&this.height==="sm"){
                    return "small_input_row";
                }
            },
            //输入最大提示值的样式
            maxInfoStyle() {
                var st = {};
                var baseRight = 8;
                if (this.rightSlot) {
                    baseRight = baseRight + 22;
                }
                if (this.elType === "number") {
                    baseRight = baseRight + 10;
                }
                st["right"] = baseRight + "px";
                return st;
            },
            suffixDisVal() {
                return this.suffixDis?'disabled':'';
            },
            prefixDisVal() {
                return this.prefixDis?'disabled':'';
            },
            exStyle() {
                let backJson = {};
                //如果内容的宽度设置了 则使用设置的值
                if (AssertUtils.isNotEmpty(this.contentWidth)) {
                    backJson["width"] = this.contentWidth;
                }
                return backJson;
            },
            _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");
                }
                //判断是否存在前缀图片
                if (inputItemObj.prefix) {
                    classes.push("hasPrefixIcon");
                }
                //判断是否存在后缀图片
                if (inputItemObj.suffix) {
                    classes.push("hasSuffixIcon");
                }
                return classes;
            },
            _inputStyle() {
                var backJson = {};
                var labelWidth = 0;
                //如果存在前缀按钮
                if (this.prefixBtn) {
                    let spanId = GoingUtils.getUUid(10);
                    //存在前缀按钮中文
                    if (AssertUtils.isNotEmpty(this.prefixBtnLabel)) {
                        $(`<span id="${spanId}">${this.prefixBtnLabel}</span>`).appendTo($(document.body));
                        labelWidth = labelWidth + $("#" + spanId).width() + 23;
                        $("#" + spanId).remove();
                    }
                    if (AssertUtils.isNotEmpty(this.prefixBtnIcon)) {
                        labelWidth = labelWidth + 44;
                    }
                    //如果存在前缀按钮 则改变圆角
                    backJson["borderRadius"] = "0 4px 4px 0";
                    backJson["borderLeft"] = "0";
                    backJson["marginLeft"] = (labelWidth) + "px";
                }

                //如果存在后缀按钮
                if (this.suffixBtn) {
                    let rightWidth = 0;
                    let spanId = GoingUtils.getUUid(10);
                    //存在后缀按钮中文
                    if (AssertUtils.isNotEmpty(this.suffixBtnLabel)) {
                        $(`<span id="${spanId}">${this.suffixBtnLabel}</span>`).appendTo($(document.body));
                        rightWidth = $("#" + spanId).width() + 23;
                        $("#" + spanId).remove();
                    }
                    if (AssertUtils.isNotEmpty(this.suffixBtnIcon)) {
                        rightWidth = rightWidth + 44;
                    }
                    if (this.prefixBtn) {
                        //如果存在前后缀按钮 则没有圆角了
                        backJson["borderRadius"] = "0px";
                    } else {
                        //如果存在后缀按钮 则改变圆角
                        backJson["borderRadius"] = "4px 0 0 4px";
                    }
                    backJson["borderRight"] = "0";
                    this.clearIconRight = rightWidth + 8;
                    labelWidth = labelWidth + rightWidth;
                }
                if (labelWidth > 0) {
                    backJson["width"] = `calc(100% - ${labelWidth}px)`;
                }


                if (this.inputStyle) {
                    backJson = {...backJson, ...this.inputStyle};
                }
                return backJson;
            },
            //获取图标按钮的样式信息
            prefixBtnStyle() {
                return AssertUtils.isNotEmpty(this.inputItem["prefixBtnColor"]) ? {
                    backgroundColor: this.inputItem["prefixBtnColor"],
                    color: '#FFF'
                } : {};
            },
            //获取图标按钮的样式信息
            suffixBtnStyle() {
                return AssertUtils.isNotEmpty(this.inputItem["suffixBtnColor"]) ? {
                    backgroundColor: this.inputItem["suffixBtnColor"],
                    color: '#FFF'
                } : {};
            },
        },
        methods: {
            //设置drop的radio状态
            setRadioValue(radioState){
                this.$refs.radioLabel.setRadioValue(radioState);
            },
            //输入操作
            inputMethods($event){
                this.$emit('input', $event.target.value);
                this.$emit('change', $event.target.value);
                this.count=$event.target.value.length;
                //如果不是数字输入 不清空输入错误信息
                if (this.elType !== "number") {
                    this.clearErrorState();
                }
            },
            //后缀按钮点下
            suffixDown() {
                this.$emit('suffixDown', this.$refs.input);
            },
            //后缀按钮弹出
            suffixUp() {
                this.$emit('suffixUp', this.$refs.input);
            },
            //前缀按钮按下
            prefixDown() {
                this.$emit('prefixDown', this.$refs.input);
            },
            //前缀按钮弹出
            prefixUp() {
                this.$emit('prefixUp', this.$refs.input);
            },
            initClearIconPos() {
                if (AssertUtils.isNotEmpty(this.inputItem["suffixBtn"])) {
                    //30为左右间隔 + 字数*字大小
                    this.clearIconRight = 30 + this.inputItem.suffixBtn.length * 13;
                } else if (AssertUtils.isNotEmpty(this.inputItem["suffix"])) {
                    //32为后缀按钮的宽度
                    this.clearIconRight = 26;
                } else {
                    if (this.elType === "number") {
                        this.clearIconRight = 22;
                    }
                    //如果输入框样式不为空 则需要动态计算清空图标的位置
                    if (AssertUtils.isNotNull(this.inputStyle)) {
                        let {x} = GoingUtils.getElementPosition(this.$refs.input);
                        let pPos = GoingUtils.getElementPosition($(this.$refs.input).parent().get(0));
                        this.clearIconRight = pPos.x + $($(this.$refs.input).parent()).width() - x - $(this.$refs.input).width() - 5;
                    }

                }
            },
            //点击radioBox
            radioBoxClick(data) {
                this.inputItem["disabled"] = !this.inputItem["disabled"];
                this.$emit('radioBoxClick', {data});
            },
            inputClick() {
                this.$emit('inputClick', this.$refs.input);
            },
            //鼠标移出
            mouseleave() {
                if (this.ctlType === 'number') {
                    return false;
                }
                this.hoverFlag = false;
            },
            //鼠标移入
            mouseover() {
                if (this.ctlType === 'number') {
                    return false;
                }
                this.initClearIconPos();
                this.hoverFlag = true;
            },
            //前缀图标点击事件
            prefixClick() {
                this.$emit('prefixClick', this.value);
            },
            //后缀图标点击事件
            suffixClick() {
                this.$emit('suffixClick', this.value,this.$refs.input);
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.$emit('initElObj', this.$refs.input);
            });
        },
        watch: {
            //监听label值是否发生来变更
            label(newVal){
                this.inputItem["label"]=newVal;
            },
            //监听是否可以编辑状态
            disabled(newVal){
                this.inputItem["disabled"]=newVal;
            },
            //激活错误标识
            errorFlag: function (newVal) {
                this.inputItem.errorFlag = newVal;
            },
            //激活错误消息
            validMsg: function (newVal) {
                this.inputItem.validMsg = newVal;
            },
            suffix(newVal){
                this.inputItem.suffix=newVal;
            }
        },
        components: {
            GoLabelRadio,
            GoLabel,
            GoErrorIcon: GoErrorIcon,
            GoClearInputIcon: GoClearInputIcon
        }
    };
</script>
