<template>
    <div class="close-icon-div" :style="getClearIconStyle()">
        <Icon
            @click.stop.prevent="clearInputValue($event)"
            v-show="!errorFlag && (value != null && value.length > 0 && !disabled)"
            type="ios-close-circle"
        ></Icon>
    </div>
</template>

<script>
    export default {
        name: "go-clear-input-icon",
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            //如果显示了错误标志 则不显示清空标志
            errorFlag: {
                type: Boolean,
                default: false
            },
            right: {
                type: Number,
                default: 8
            },
            value: {
                type: [String, Number, Array, Boolean],
                default: ""
            },
            //是否存在右边图标按钮
            rightSlot: {
                type: Boolean,
                default: false
            },
            //输入框的宽度
            width: {},
        },
        methods: {
            //点击清空图标的样式
            clearInputValue($event) {
                this.$emit("clickClearIcon", $event);
            },
            getClearIconStyle() {
                let rt=this.right;
                //如果存在右边按钮图标
                if(parseFloat(this.width)>0&&this.rightSlot){
                    rt=rt+20;
                }
                return {
                    right: rt + "px",
                    top: "-1px"
                };
            }
        },
        mounted() {
        }
    };
</script>
