<template>
    <div class="error-icon-div error-info" :style="getClearIconStyle">
        <span style="top:0;right:0;visibility: hidden;display:none;" class="_labelTemp"></span>
        <!--必填校验-->
        <Tooltip  :placement="placement">
            <i style="font-size: 23px;"
               v-show="errorFlag"
               class="ivu-icon ivu-icon-md-warning"
            ></i>
            <div slot="content">
                {{valiMessage}}
            </div>
        </Tooltip>
    </div>
</template>

<script>

    export default {
        name: "go-error-icon",
        data: function () {
            return {
                placement:'left',
                rightPx:this.right,
                valiMessage: this.validMsg
            };
        },
        props: {
            rightSlot:{},
            right: {
                type: Number,
                default: 5
            },
            validMsg: {
                type: String,
                default: ""
            },
            errorFlag: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
        },
        watch: {
            //右边图标的位置
            right: function (newVal) {
                this.rightPx = newVal;
            },
            validMsg: function (newVal) {
                this.valiMessage = newVal;
            }
        },
        computed:{
            getClearIconStyle() {
                if(this.rightSlot){
                    this.rightPx=28;
                }
                return {
                    display: "block",
                    right: (this.rightPx) + "px",
                    top: "-2px"
                };
            },
        },
        methods: {

        }
    };
</script>
