<template>
    <div  class="app-mob-picker" >
        <ion-input :disabled="disabled" class="app-mob-picker__input" :value="refvalue"  readonly @click="openView" @ionFocus="enter" @ionBlur="leave"></ion-input>
        <app-mob-icon  v-show="refvalue" class="delete-value right-common-icon" name="close-circle-outline" @onClick="onClear"></app-mob-icon>
        <app-mob-icon  v-show="refvalue == '' || refvalue == null" class="open-picker right-common-icon" name="search-outline" @onClick="openView"></app-mob-icon>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { ViewOpenService } from 'ibiz-vue';
import { Http, ViewTool } from 'ibiz-core';
// import { DataServiceHelp } from 'ibiz-core';
@Component({
    i18n: {
        messages: {
            'ZH-CN': {
                missingParameters: '缺少参数！',
                requestException: '请求异常!',
                formDataIsAbnormal: '表单数据异常!',
                valueItemIsAbnormal: '值项异常!',
                systemIsAbnormal: '系统异常!'
            },
            'EN-US': {
                missingParameters: 'Missing parameters！',
                requestException: 'Request exception！',
                formDataIsAbnormal: 'Form data is abnormal！',
                valueItemIsAbnormal: 'Value item is abnormal！',
                systemIsAbnormal: 'The system is abnormal!'
            }
        }
    }
})
export default class AppPicker extends Vue {

    /**
     * 视图上下文
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public viewparams!: any;

    /**
     * AC参数
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop({ default: () => { } }) public acParams?: any;

    /**
     * 表单服务
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public service?: any;

    /**
     * 应用实体主信息属性名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop({ default: 'srfmajortext' }) public deMajorField!: string;

    /**
     * 应用实体主键属性名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop({ default: 'srfkey' }) public deKeyField!: string;

    /**
     * 表单数据
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public data!: any;

    /**
     * 属性项名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public name!: string;

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

    /**
     * 类型
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public editortype?: string;

    /**
     * 视图参数（如：视图name，title，width，height）
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public pickupView?: any;

    /**
     * 数据链接参数
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public linkview?: any;

    /**
     * 值项名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public valueitem?: string;

    /**
     * 值
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Model('change') public value!: any;

    /**
     * 导航参数
     *
     * @type {*}
     * @memberof AppSelect
     */
    @Prop() protected navigateParam?: any;

    /**
     * 导航上下文
     *
     * @type {*}
     * @memberof AppSelect
     */
    @Prop() protected navigateContext?: any;

    /**
     * 当前值
     *
     * @type {string}
     * @memberof AppPicker
     */
    public curvalue: string = '';

    /**
     * 下拉数组
     * @type {any[]}
     * @memberof AppPicker
     */
    public items: any[] = [];

    /** 
     * 下拉图标指向状态管理
     * @type {boolean}
     * @memberof AppPicker 
     */
    public open: boolean = false;

    /**
     * 输入状态
     *
     * @type {boolean}
     * @memberof AppPicker
     */
    public inputState: boolean = false;

    /**
     * 视图打开服务
     *
     * @type {ViewOpenService}
     * @memberof AppPicker
     */
    public openService: ViewOpenService = ViewOpenService.getInstance();

    /**
     * 获取关联数据项值
     *
     * @readonly
     * @memberof AppPicker
     */
    get refvalue() {
        return this.curvalue;
    }

    /**
     * 值变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppPicker
     */
    @Watch('value',{immediate:true})
    public onValueChange(newVal: any, oldVal: any) {
        this.curvalue = newVal;
        if (Object.is(this.editortype, 'dropdown') && this.valueitem) {
            const value = this.data[this.valueitem];
            const index = this.items.findIndex((item: any) => Object.is(item.value, value));
            if (index !== -1) {
                return;
            }
            this.items = [];
            if (value) {
                this.items.push({ text: newVal, value: value });
            }
            this.onSearch(newVal, null, false);
        }
    }
    /**
     * 文本输入防抖
     *
     * @private
     * @type {Subject<any>}
     * @memberof IBizFormField
     */
    private inputImageStabilization: Subject<any> = new Subject();

    /**
     * 文本输入防抖订阅对象
     *
     * @private
     * @type {(Subscription | undefined)}
     * @memberof AppPicker
     */
    private inputImageStabilizationEvent: Subscription | undefined;

    /**
     * vue 生命周期
     *
     * @memberof AppPicker
     */
    public created() {
        if (this.acParams && this.service) {
            this.onSearch("", null, true);
        }
        this.inputImageStabilizationEvent = this.inputImageStabilization.pipe(
            debounceTime(200),
            distinctUntilChanged()
        ).subscribe(
            (query: any) => {
                const _query = query;
                if (this.name) {
                    this.$emit('formitemvaluechange', { name: this.name, value: _query ? _query : null, event:{} });
                }
                this.onSearch(_query, null, false);
            }
        );
    }

    /**
     * 组件销毁
     *
     * @memberof AppPicker
     */
    public destroyed(): void {
        if (this.inputImageStabilizationEvent) {
            this.inputImageStabilizationEvent.unsubscribe();
        }
    }

    /**
     * 执行搜索数据
     * @param query 
     * @param callback 
     */
    public async onSearch(query: any, callback: any, other: boolean): Promise<any> {
        // 公共参数处理
        let data: any = {};
        const bcancel: boolean = this.handlePublicParams(data);
        if (!bcancel) {
            return;
        }
        // 处理搜索参数
        let _context = data.context;
        let _param = data.param;
        query = !query ? '' : query;
        if (!this.inputState && other && Object.is(query, this.value)) {
            query = '';
        }
        this.inputState = false;
        Object.assign(_param, { query: query });
        if (this.service.serviceName && this.service.interfaceName) {
            let { serviceName: _serviceName, interfaceName: _interfaceName }: { serviceName: string, interfaceName: string } = this.acParams;
            // TODO DataServiceHelp
            // const entityService: any = await new DataServiceHelp().getService(_serviceName);
            // if (entityService && entityService[_interfaceName] && entityService[_interfaceName] instanceof Function) {
            //     entityService[_interfaceName](_context, _param).then((response: any) => {
            //         if (!response) {
            //             this.$Notice.error(`${this.$t("requestException")}`)
            //         } else {
            //             this.items = [...response.data];
            //         }
            //         if (this.acParams && this.linkview) {
            //             this.items.push({ isNew: true });
            //         }
            //         if (callback) {
            //             callback(this.items);
            //         }
            //         this.parseValue();
            //     }).catch((response: any) => {
            //         if (callback) {
            //             callback([]);
            //         }
            //     });
            // }
        }
    }

    /**
     * 解析回填文本
     */
    public parseValue(){
        let index = this.items.findIndex((item)=>{return Object.is(item[this.deKeyField],this.refvalue)});
        if(index > -1){
            this.curvalue = this.items[index][this.deMajorField];
        }
    }

    /**
     * 选中数据回调
     * @param item 
     */
    public onACSelect(item: any): void {
        if (this.valueitem) {
            this.$emit('formitemvaluechange', { name: this.valueitem, value: item[this.deKeyField], event:{} });
        }
        if (this.name) {
            this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField], event:{} });
        }
    }

    /**
     * 清除
     */
    public onClear($event: any): void {
        if (this.valueitem) {
            this.curvalue="";
            this.$emit('formitemvaluechange', { name: this.valueitem, value: '', event:$event });
        }
        if (this.name) {
            this.curvalue="";
            this.$emit('formitemvaluechange', { name: this.name, value: '', event:$event });
        }
    }

    /**
     * 打开视图
     */
    public async openView($event: any): Promise<any> {
        if (this.disabled) {
            return;
        }
        // 公共参数处理
        let data: any = {};
        const bcancel: boolean = this.handlePublicParams(data);
        if (!bcancel) {
            return;
        }
        const {param,context} = data;

        // 参数处理
        const view = { ...this.pickupView };
        if(!view.viewModelData?.codeName){
            this.$Notice.error(this.$t('app.commonWords.notFoundPickerView'));
            return;
        }
        // 判断打开方式
        const openMode = view.viewModelData.openMode;
        if(openMode && openMode.indexOf('DRAWER') != -1){
            this.openDrawer(view, context, param);
        } else if(openMode  === 'POPOVER'){
            this.openPopOver(view, context, param);
        }else{
           this.openPopupModal(view, context, param);
        }
    }

    /**
     * 路由模式打开视图
     *
     * @private
     * @param {string} viewpath
     * @param {*} data
     * @memberof AppPicker
     */
    private openIndexViewTab(view: any, context: any, param: any): void {
        const routeStr: any = this.openService.formatRouteParam(this.context, view.deResParameters, view.parameters, [context], param);
        this.$router.push(routeStr);
    }

    /**
     * 模态模式打开视图
     *
     * @private
     * @param {*} view
     * @param {*} data
     * @memberof AppPicker
     */
    private async openPopupModal(view: any, context: any, param: any): Promise<any> {
        let result: any = await this.openService.openModal(view, context, param);
        if (result || Object.is(result.ret, 'OK')) {
            this.openViewClose(result);
        }
    }

    /**
     * 气泡模式打开视图
     *
     * @private
     * @param {*} view
     * @param {*} data
     * @memberof AppPicker
     */
    private async openPopOver(view: any, context: any, param: any,customParam?:any): Promise<any> {
        let result: any = await this.openService.openPopOver(view, context, param,customParam);
        if (result || Object.is(result.ret, 'OK')) {
            this.openViewClose(result);
        }
    }

    /**
     * 抽屉模式打开视图
     *
     * @private
     * @param {*} view
     * @param {*} data
     * @memberof AppPicker
     */
    private async openDrawer(view: any, context: any, param: any) {
        let result: any = await this.openService.openDrawer(view, context, param);
        if (result || Object.is(result.ret, 'OK')) {
            this.openViewClose(result);
        }
    }

    /**
     * 独立里面弹出
     *
     * @private
     * @param {string} url
     * @memberof AppPicker
     */
    private openPopupApp(url: string): void {
        window.open(url, '_blank');
    }

    /**
     * 打开重定向视图
     *
     * @private
     * @param {*} $event
     * @param {*} view
     * @param {*} data
     * @memberof AppPicker
     */
    private openRedirectView($event: any, view: any, data: any): void {
        Http.getInstance().get(view.url, data).then((response: any) => {
            if (!response || response.status !== 200) {
                this.$Notice.error(`${this.$t("requestException")}`);
            }
            if (response.status === 401) {
                return;
            }
            const { data: result } = response;

            if (result.viewparams && !Object.is(result.viewparams.srfkey, '')) {
                Object.assign(data, { srfkey: result.viewparams.srfkey });
            }

            if (Object.is(result.openmode, 'POPUPAPP') && result.url && !Object.is(result.url, '')) {
                this.openPopupApp(result.url);
            } else if (Object.is(result.openmode, 'INDEXVIEWTAB') || Object.is(result.openmode, '')) {
                // 所有数据保持在同一级
                if (data.srfparentdata) {
                    Object.assign(data, data.srfparentdata);
                    delete data.srfparentdata;
                }
                this.openIndexViewTab(view, null, data);
            } else if (Object.is(result.openmode, 'POPUPMODAL')) {
                const viewname = this.$util.srfFilePath2(result.viewname);
                const view: any = {
                    viewname: viewname,
                    title: result.title,
                    width: result.width,
                    height: result.height,
                }
                this.openPopupModal(view, null, data);
            } else if (result.openmode.startsWith('DRAWER')) {
                const viewname = this.$util.srfFilePath2(result.viewname);
                const view: any = {
                    viewname: viewname,
                    title: result.title,
                    width: result.width,
                    height: result.height,
                    placement: result.openmode,
                }
                this.openDrawer(view, null, data);
            }
        }).catch((response: any) => {
            if (!response || !response.status || !response.data) {
                this.$Notice.error(`${this.$t('systemIsAbnormal')}`);
                return;
            }
            if (response.status === 401) {
                return;
            }
        });
    }

    /**
     * 打开页面关闭
     *
     * @param {*} result
     * @memberof AppPicker
     */
    public openViewClose(result: any) {
        let item: any = {};
        if (result.datas && Array.isArray(result.datas)) {
            Object.assign(item, result.datas[0]);
        }

        if (this.data) {
            if (this.valueitem) {
                this.$emit('formitemvaluechange', { name: this.valueitem, value: item[this.deKeyField] ? item[this.deKeyField] : item["srfkey"], event:{} });
            }
            if (this.name) {
                this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField] ? item[this.deMajorField] : item["srfmajortext"], event:{} });
            }
        }
    }

    /**
     * 公共参数处理
     *
     * @param {*} arg
     * @returns
     * @memberof AppPicker
     */
    public handlePublicParams(arg: any): boolean {
        if (!this.data) {
            return false;
        }
        // 导航参数处理
        const {context, param} = ViewTool.formatNavigateParam( this.navigateContext, this.navigateParam, this.context, this.viewparams, this.data );
        arg.context =  context;
        arg.param = param;
        return true;
    }


    /**
     * 有焦点时事件
     *
     * @memberof AppPicker
     */
    public enter(e: any) {
        this.$emit('enter', {name: this.name, value: this.value, event:e});
    }

    /**
     * 失去焦点事件
     *
     * @memberof AppPicker
     */
    public leave(e: any) {
        this.$emit('leave', {name: this.name, value: this.value, event:e});
    }    
}
</script>