<template>
    <div class="row go-form-row flex-div go-common-drop-ctl" :id="dropCtlId">
        <go-input style="float: left"  v-model="showValue" @blur="blurInput"  :suffix="suffixIcon"
                       @inputClick="inputClick" :width="this.width" :item="this.inputItem"></go-input>
        <div v-if="showIcon" style="float: left;margin-left: 8px;"><i :class="showValue" v-show="showIcon&&showValue!=null&&showValue.length>0"></i></div>

        <go-win
            v-model="showWinFlag"
            title="请选择图标"
            :width="winWidth"
            :height="winHeight"
            @ok="confirmOk"
        >
            <iconSelCtl :showWinFlag="showWinFlag" ref="iconSelCtl"></iconSelCtl>
        </go-win>

    </div>
</template>

<script>
    import iconSelCtl from "./icon-sel-ctl";
    import formMixin from "../../../mixins/formMixins";
    import {AssertUtils, GoingUtils} from "goingutils";

    export default {
        name: "go-icon-sel",
        mixins: [formMixin],
        data: function () {
            return {
                showWinFlag:false,//窗口控制状态
                winHeight:600,//窗口高度
                winWidth:1100,//窗口宽度
                clearFlag: false,
                dropCtlId: GoingUtils.getUUid(12),
                inputId: GoingUtils.getUUid(12)
            };
        },
        props: {
            showIcon:{
                type:Boolean,
                default:false,
            }
        },
        computed: {},
        mounted() {
        },
        methods: {
            //选择图标数据
            selIconItem(){
                //获取图标展示组件
                let iconSelCtlObj=this.$refs.iconSelCtl.getCtlObj();
                let ids = iconSelCtlObj.getSelectedRowIds();
                //回调填写相应的字体图标信息
                if (AssertUtils.isNotEmpty(ids)) {
                    let text = iconSelCtlObj.getIconUrl(ids);
                    this.$emit("input", text);
                    this.showValue=text;
                    this.showWinFlag=false;
                    this.clearErrorState();
                } else {
                    GoingUtils.showErrorMessage("请选择相应的图标后再确定");
                }
            },
            //点击窗口确定按钮
            confirmOk(){
                this.selIconItem();
                this.$emit("selRecord", this.showValue);
            },
            blurInput(){
                this.$emit("input", this.showValue);
            },
            //弹出窗口
            inputClick() {
                let item = this.item;
                if (this.disabled||(item&&item.disabled)) {
                    return void 0;
                }
                this.showWinFlag=true;
            }
        },
        watch: {
            value: function (newVal) {
                this.showValue = newVal;
            }
        },
        components: {
            iconSelCtl: iconSelCtl
        }
    };
</script>
