<template>
    <div :id="dropCtlId" class="row go-form-row flex-div go-multiple-drop-ctl" style="position: relative;">
        <go-label :labelWidth="labelWidth" :labelAlign="labelAlign" :item="item"></go-label>
        <div :id="dropCtlId+'_content'" :class="'go-content ' + getInputWid()" :style="getInputWidStyle()">
            <!--            展示区域-->
            <div class="go-content-body" :class="'input-group ' + getInputWid()" :style="inputGroupStyle"
                 @click="showPageDrop($event,item)">
                <input :itemId="item.id" class="hidden" type="hidden"/>
                <div ref="selItemContainer"
                     :class="['sel-item-container','clearfix',item.validation && item.required && (value != null && (value + '').length === 0)? 'error-input': '',item.disabled ? 'input-disabled' : '']"
                     :style="inputGroupStyle">
                    <span v-if="showItems.length === 0" style="padding: 0 0 0 5px;" class="placeholder">请选择{{ item.label }}</span>

                    <ul class="clearfix" v-else>
                        <li :key="index" class="choice-item" :name="itemObj" v-for="(itemObj, index) of showItems">
                            <span>{{ itemObj }}</span>
                            <i class="choice-close ivu-icon ivu-icon-md-close"
                               @click.stop="removeRecord(itemObj,dropCtlId)"
                               type="md-close"></i>
                        </li>
                    </ul>
                </div>
                <!--向下图标-->
                <go-drop-icon :showFlag="showFlag" :style="iconExtendStyle"></go-drop-icon>
                <!--校验提醒图标-->
                <go-error-icon v-model="showValue" :item="item"></go-error-icon>
            </div>
        </div>


        <!--            下拉区域-->
        <div :id="dropCtlId+'_content_body'" class="go-common-drop  go-tree-ctl" v-show="showFlag"
             style="max-height: 300px;overflow: auto;padding:5px 0 10px 0;display: block">
            <!-- 查询区域-->
            <go-search-bar :search="search" @inputSearchVal="inputSearchVal"
                           style="line-height: 26px;padding: 0 5px"></go-search-bar>
            <!-- 操作区域-->
            <div class="drop-btn-bar clearfix" style="padding:0 8px">
                <div class="drop-btn col-sm-6 pull-left" @click="cancelAll()">
                    <span>{{'取消选择'}}</span>
                </div>
                <div @click="selAll($event) " class="drop-btn col-sm-6 pull-right" style="text-align: right">
                    <span>{{'全选'}}</span>
                </div>
            </div>
            <!--            下拉区域-->
            <div :id="searchId + '_body'" class="search-body">
                <div :key="item.name"
                     @click="selItem(item, $event)"
                     :coding="item.id"
                     :name="item.label"
                     class="go-drop-item multiple-item clearfix"
                     :class="getExtendClass(item)"
                     v-for="item of dataOptions"
                >
                    <div class="label">{{ item.label }}</div>
                    <div class="check-img">
                        <Icon type="md-checkmark"/>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import {GoingUtils, AssertUtils} from "goingutils";
    import GoClearInputIcon from "./commponents/go-clear-input-icon";
    import GoErrorIcon from "./commponents/go-error-icon";
    import GoDropIcon from "./commponents/go-drop-icon";
    import formMixin from "../../mixins/formMixins";
    import dropDownMixin from "./mixins/dropDownMixin";
    import GoLabel from "./commponents/go-label";
    import goSearchBar from './commponents/go-search-bar';

    export default {
        name: "go-multiple-drop",
        mixins: [formMixin,dropDownMixin],
        data: function () {
            return {
                labelMap: {},
                dropCtlId: GoingUtils.getUUid(12),
                searchId: GoingUtils.getUUid(12),
                dataOptions: [],
                iconLineHeight: 28,
            };
        },
        props: {
            value: {},
            options: {},
            search: {
                type: Boolean,
                default: true
            },
            dropWidth: {
                type: String
            }
        },
        created() {
            //通过中文选择默认是通过value进行选择  如果为空 则设置为false
            if (!AssertUtils.isNotNull(this.item["selByText"])) {
                this.item["selByText"] = false;
            }
            //加载数据
            this.getDataOptions();
        },
        computed: {
            inputGroupStyle() {
                if (this.moreSel && this.item && !this.item.disabled) {
                    return {cursor: "pointer", height: "78px"};
                } else if (this.item && !this.item.disabled) {
                    return {cursor: "pointer"};
                }
                return {};
            },
            iconExtendStyle() {
                return {lineHeight: this.iconLineHeight + "px"};
            },
            showItems() {
                if (AssertUtils.isNotEmpty(this.value)) {
                    if (!AssertUtils.isNotNull(this.item["selByText"])) {
                        return (this.value + "").split(GoingUtils.relChart);
                    } else {
                        let idAry = (this.value + "").split(GoingUtils.relChart);
                        return idAry.map((item) => {
                            return this.getItemLabel(item);
                        });
                    }
                } else {
                    return [];
                }
            },
        },
        mounted: function () {
            let vueObj = this;
            //如果点击不是该控件范围只内 则隐藏该控件下拉
            $(document).click(function (e) {
                let target = $(e.target);
                if (!target.is("#" + vueObj.dropCtlId + "_content") && !target.is("#" + vueObj.dropCtlId + "_content *") && !target.is("#" + vueObj.dropCtlId + "_content_body") && !target.is("#" + vueObj.dropCtlId + "_content_body *")) {
                    vueObj.showFlag=false;
                }
            });
            //修改图标的位置
            let inputHeight = $("#" + this.dropCtlId + "_content").css("height");
            this.iconLineHeight = parseFloat(inputHeight);
        },
        methods: {
            //移除相应的值
            removeRecord(_removeText, dropCtlId) {
                //对选中的值进行删除操作
                let selItems = $("#" + dropCtlId).find(".sel-item");
                //循环所有选择的记录
                let selCoding = [];
                let selCodingName = [];
                selItems.each(function () {
                    if ($(this).attr("name") !== _removeText) {
                        selCoding.push($(this).attr("coding"));
                        selCodingName.push($(this).attr("name"));
                    }
                });
                this.setInputValue(selCoding.join(";"), selCodingName.join(";"));
            },
            getItemLabel(itemId) {
                return this.labelMap[itemId] || "";
            },
            //获取是否选中的样式信息
            getExtendClass(item) {
                //如果是选择 根据text
                if (this.item["selByText"]) {
                    if ((this.value + "").includes(item.label + "")) {
                        return "sel-item";
                    }
                } else {
                    //    如果选择 是根据id
                    if ((this.value + "").includes(item.id + "")) {
                        return "sel-item";
                    }
                }
            },
            //输入查询方法
            inputSearchVal(val) {
                $("#" + this.searchId + "_body")
                    .find(".go-drop-item")
                    .each(function () {
                        let text = $(this).text();
                        if ((text + "").includes(val + "")) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
            },
            getDataOptions() {
                let dataOptions = [];
                //如果是传入了下拉集合
                if (AssertUtils.isArray(this.options)) {
                    dataOptions = this.options;
                }

                //    如果没有传入下拉集合 而是传入的item对象
                if (dataOptions.length === 0 && AssertUtils.isNotNull(this.inputItem)) {
                    dataOptions = this.inputItem.items;
                }
                this.dataOptions = dataOptions;
                this.dataOptions.forEach((item) => {
                    this.labelMap[item.id] = item.label;
                });
            },
            //显示或者隐藏下拉框
            toggleDrapShow($event){
                this.showFlag=!this.showFlag;
                //如果已经显示 则点击进行隐藏
                if(this.showFlag){
                    //如果已经隐藏 则点击进行显示
                    let clickEl = $event.target;
                    //获取输入框的宽度 将被设置为下拉框的宽度
                    let parentWid = $(clickEl).closest(".go-content").find(".input-group").css("width");
                    //如果传入的宽度存在 则使用用户定义的宽度，负责用input的宽度
                    if (parseFloat(this.dropWidth)) {
                        parentWid = parseFloat(this.dropWidth);
                    }
                    let labelWid = $(clickEl).closest(".go-multiple-drop-ctl").find(".go-label").css("width");
                    let inputHeight = $(clickEl).closest(".go-content").css("height");
                    //显示下拉区域 并设置其宽度信息
                    $(clickEl).closest(".go-multiple-drop-ctl").find(".go-common-drop").show().css("width", parentWid).css("left", parseFloat(labelWid) + 7).css("top", parseFloat(inputHeight) + 2);
                }
            },
            selItem(item, $event) {
                //选中相应的子项
                let clickEl = $event.target;
                $(clickEl).closest(".multiple-item").toggleClass("sel-item");

                let selItems = $(clickEl).closest(".go-multiple-drop-ctl").find(".sel-item");
                //循环所有选择的记录
                let selCoding = [];
                let selCodingName = [];
                selItems.each(function () {
                    selCoding.push($(this).attr("coding"));
                    selCodingName.push($(this).attr("name"));
                });
                //设置回写值
                this.setInputValue(selCoding.join(";"), selCodingName.join(";"));
            },
            selAll($event) {
                let selItems = $($event.target).closest(".go-multiple-drop-ctl").find(".go-drop-item");
                //循环所有选择的记录
                let selCoding = [];
                let selCodingName = [];
                selItems.each(function () {
                    selCoding.push($(this).attr("coding"));
                    selCodingName.push($(this).attr("name"));
                });
                this.setInputValue(selCoding.join(";"), selCodingName.join(";"));
            },
            //由于选择值多了以后input的高度会增加 这样就导致需要修改下拉框的高度位置
            setDropTopPos() {
                setTimeout(() => {
                    let inputHeight = $("#" + this.dropCtlId + "_content").css("height");
                    $("#" + this.dropCtlId + "_content_body").css("top", parseFloat(inputHeight) + 2);
                    this.iconLineHeight = parseFloat(inputHeight);
                }, 10);
            },
            //回写值
            setInputValue(ids, names) {
                if (this.item["selByText"]) {
                    //设置回写值
                    this.$emit('input', names);
                } else {
                    //设置回写值
                    this.$emit('input', ids);
                }
                this.setDropTopPos();
            },
            //取消选择记录
            cancelAll() {
                //选中相应的子项
                this.setInputValue("", "");
            }
        },
        beforeDestroy() {
            this.labelMap = null;
            this.dataOptions = null;
        },
        components: {
            goSearchBar,
            GoErrorIcon,
            GoLabel,
            GoDropIcon: GoDropIcon,
            GoClearInputIcon: GoClearInputIcon
        }
    };
</script>
