<template>
    <div class="row  go-form-row" v-show="inputItem.display == null ? true : inputItem.display">
        <!--        常规label-->
        <go-label :labelAlign="labelAlign" :item="inputItem"></go-label>
        <div  :class="'go-content ' + getInputWid()" :style="getInputWidStyle()">
            <div class="go-content-body">
                <div  class="go-com-img-div" v-if="type==='img'" :style="extendStyle">
                    <img name="imgIcon"    :src="imgScr" :width="imgWidth" :height="imgHeight">
                </div>
                <div  class="go-com-icon-div" v-else :style="extendStyle">
                    <i :class="iconClass" :style="iconStyle"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import GoLabel from "./commponents/go-label";
    import {AssertUtils} from 'goingutils';
    import formMixin from "../../mixins/formMixins";


    export default {
        name: "go-common-img",
        mixins: [formMixin],
        data() {
            return {
                clearIconRight:5,
                hoverFlag: false,
            };
        },
        props: {
            type:{
                type: String,
                default: 'img'
            },
            imgWidth: {
                type: Number,
                default: 220
            },
            imgHeight: {
                type: Number,
                default: 160
            },
            iconSize:{
                type: Number,
                default: 24
            },
            bgColor: {
                type: String,
                default: ''
            },
            btnStyle: {
                type: Object,
                default: null
            }
        },
        computed: {
            iconClass() {
                return this.value;
            },
            imgScr() {
                if(AssertUtils.isNotEmpty(this.value)){
                    //如果图片id不为空 则展示图片
                    return this.showImage(this.value);
                }else{
                    return "";
                }
            },
            _inputStyle() {
                if (this.btnStyle) {
                    return {...this.btnStyle};
                } else {
                    return {};
                }
            },
            iconStyle(){
                let backJson={};
                backJson['fontSize']=this.iconSize+"px";
                return backJson;
            },
            extendStyle(){
                let backJson={};
                backJson['width']=this.imgWidth+"px";
                backJson['height']=this.imgHeight+"px";
                backJson['lineHeight']=this.imgHeight+"px";
                //设置背景颜色
                if(AssertUtils.isNotEmpty(this.bgColor)){
                    backJson['backgroundColor']=this.bgColor;
                }
                //设置图标颜色
                if(AssertUtils.isNotEmpty(this.color)){
                    backJson['color']=this.color;
                }
                return backJson;
            }
        },
        methods: {
            clickBtn(){
                this.$emit('click');
            }
        },
        mounted() {

        },
        watch: {

        },
        components: {
            GoLabel
        }
    };
</script>
