<template>
    <div class="ibiz-group-select">
        <div class="ibiz-group-content">
            <span v-if="!multiple">
                {{ selectName }}
            </span>
            <template v-else v-for="(select, index) of selects">
                <div :key="index" class="ibiz-group-item">
                    {{ select.label }}
                    <i class="el-icon-close" @click="remove(select)"></i>
                </div>
            </template>
        </div>
        <div class="ibiz-group-open">
            <i class="el-icon-search" @click="openView"></i>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';

@Component({})
export default class IBizGroupSelect extends Vue {
    /**
     * 名称标识
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop() name!: string;

    /**
     * 数据接口地址
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop() url?: string;

    /**
     * 多选
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop({default: false}) multiple?: boolean;

    /**
     * 数据对象
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop() data: any;

    /**
     * 过滤属性标识
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop({default: 'orgid'}) filter?: string;

    /**
     * 是否启用
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop() disabled?: boolean;

    /**
     * 值
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop() value: any;

    /**
     * 上下文参数
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop() context: any;

    /**
     * 关联属性
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Prop() valueitem: any;

    /**
     * 选中项集合
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    protected selects: any[] = [];

    /**
     * 值变化
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    @Watch('value')
    onValueChange(newVal: any) {
        this.selects = [];
        if (newVal) {
            let vals: any[] = newVal.split(',');
            let vals2: any[] = [];
            if(this.valueitem) {
                vals2 = this.data[this.valueitem].split(',');
            }
            vals.forEach((val: string, index: number) => {
                this.selects.push({
                    label: val,
                    id: vals2.length > 0 ? vals2[index] : null
                })
            })
        }
    }

    /**
     * 单选时选中名称
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    get selectName() {
        if(this.selects.length > 0) {
            return this.selects[0].label;
        }
    }

    /**
     * 打开选择视图
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    public openView() {
        const view: any = {
            viewname: 'ibiz-group-picker',
            title: '分组选择'
        };
        let sels: any = this.selects.map((select: any) => {
            return select.id;
        })
        const context: any = JSON.parse(JSON.stringify(this.context));
        const param: any = {};
        let orgid: any = this.filter;
        Object.assign(param, {
            orgid: this.data[orgid],
            multiple: this.multiple,
            selects: sels
        });
        let container: Subject<any> = this.$appmodal.openModal(view, context, param);
        container.subscribe((result: any) => {
            if (!result || !Object.is(result.ret, 'OK')) {
                return;
            }
            this.openViewClose(result);
        });
    }

    /**
     * 选择视图关闭
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    public openViewClose(result: any) {
        console.log(result)
        this.selects = [];
        if (result.datas && result.datas.length > 0) {
            result.datas.forEach((data: any) => {
                this.selects.push({
                    id: data.id,
                    label: data.label
                })
            });
        }
        this.setValue()
    }

    /**
     * 数据删除
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    public remove(item: any) {
        this.selects.splice(this.selects.indexOf(item), 1);
        this.setValue()
    }

    /**
     * 设置值
     *
     * @type {*}
     * @memberof IBizGroupSelect
     */  
    public setValue() {
        let item: any = {};
        if(this.multiple) {
            let label = '';
            let value = '';
            this.selects.forEach((select: any) => {
                label += ',' + select.label;
                value += ',' + select.id;
            });
            Object.assign(item, {
                label: label ? label.substring(1) : null,
                id: value ? value.substring(1) : null
            })

        } else {
            item = this.selects.length > 0 ? this.selects[0] : {};
        }
        if(this.name) {
            this.$emit('formitemvaluechange', { name: this.name, value: item.label });
        }
        if(this.valueitem) {
            this.$emit('formitemvaluechange', { name: this.valueitem, value: item.id });
        }
    } 
}
</script>

<style lang="less">
.ibiz-group-select {
    width: 100%;
    display: flex;
    border: 1px solid #DCDFE6;
    min-height: 32px;
    border-radius: 4px;
    .ibiz-group-content {
        flex-grow: 1;
        padding: 0 16px;
        .ibiz-group-item {
            display: inline-block;
            border: 1px solid #bbb;
            line-height: 24px;
            border-radius: 5px;
            margin-right: 5px;
            padding: 0 5px;
        }
    }
    .ibiz-group-open {
        width: 20px;
        display: flex;
        text-align: center;
        align-items: center;
    }
}
.ibiz-group-select:hover {
    border-color: #108cee;
}
</style>