<template>
    <div class="go-common-drop" style="max-height: 300px;overflow: auto;display: block;" :style="getStyles"
         v-show="showFlag">
        <!--       查询区域-->
        <go-search-bar style="line-height: 26px;" :search="search" @inputSearchVal="inputSearchVal"></go-search-bar>
        <!--        选择项-->
        <div :id="searchId + '_body'" class="search-body">
            <div :key="item.textField"
                 @click="selItem(item, $event)"
                 class="go-drop-item"
                 :class="getItemActiveState(item)"
                 style="text-align: left"
                 v-for="item of dataOptions"
            >
                <span>{{ item[textField] }}</span>
                <span v-show="showRightValue" class="right_span">{{item[valueField]}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {GoingUtils} from "goingutils";
    import goSearchBar from './commponents/go-search-bar';

    export default {
        name: "go-drop-items",
        data: function () {
            return {
                styleObjs: {},
                searchId: GoingUtils.getUUid(12),
                showFlag: false,
            };
        },
        props: {
            showRightValue: {
                type: Boolean,
                default: false
            },
            showValue: {},
            selByText: {
                type: Boolean,
                default: false
            },
            textField: {
                type: String,
                default: "na"
            },
            valueField: {
                type: String,
                default: ""
            },
            search: {
                type: Boolean,
                default: false
            },
            dataOptions: {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        computed: {
            getStyles() {
                return {...this.styleObjs};
            }
        },
        methods: {
            getItemActiveState(item) {
                let flag = item.active ? 'active' : '';
                if (!flag && item[this.textField] === this.showValue) {
                    flag = 'active';
                }
                return flag;
            },
            //查询输入操作
            inputSearchVal(val) {
                this.$emit('searchFun', val);
            },
            _initDropSearch() {
                if (this.search) {
                    $("#" + this.searchId).val("");
                    //显示下拉选择值
                    $("#" + this.searchId + "_body")
                        .find(".go-drop-item")
                        .show();
                }
            },
            //获取选中的值
            _getSelValue(__item) {
                if (this.selByText) {
                    return __item[this.textField];
                } else {
                    return __item[this.valueField];
                }
            },
            //设置下拉的样式信息
            setDropStyles(width, top, left) {
                this.styleObjs = {width: width + "px", top: top + 'px', left: left + "px"};
            },
            toggleShowFlag() {
                this.showFlag = !this.showFlag;
            },
            hideDropItems() {
                this.showFlag = false;
            },
            //选择相应记录
            selItem(__item) {
                this.toggleShowFlag();
                //初始化下拉查询
                this._initDropSearch();
                //回填下拉值
                this.$emit("selValue", this._getSelValue(__item));
                $(this.$refs.searInput).val("");
            }
        },
        mounted() {
            let vueObj = this;
            //只有存在search的时候 才需要注册搜索框的相关方法
            if (this.search) {
                //过滤功能的操作
                $("#" + this.searchId).bind("input propertychange", function () {
                    var value = $(this).val();
                    $("#" + vueObj.searchId + "_body")
                        .find(".go-drop-item")
                        .each(function () {
                            ($(this).text() + "").includes(value + "")
                                ? $(this).show()
                                : $(this).hide();
                        });
                });
            }
        },
        components: {
            goSearchBar,
        }
    };
</script>
