<template>
    <modal
        ref="curmodal"
        class-name="app-modal"
        v-model="isShow"
        :fullscreen="isfullscreen"
        :title="title"
        :footerHide="true"
        :maskClosable="false"
        :width="width"
        :styles="style"
        :zIndex="zIndex"
        @on-visible-change="onVisibleChange($event)"
    >
        <component
            :is="viewname"
            class="viewcontainer2"
            :dynamicProps="{
                viewdata: JSON.stringify(viewdata),
                viewparam: JSON.stringify(viewparams),
                navdatas: navdatas,
            }"
            :staticProps="{ viewDefaultUsage: false, viewModelData: view.viewModelData, noViewCaption: true }"
            @viewdataschange="dataChange($event)"
            @viewdatasactivated="viewDatasActivated($event)"
            @close="close($event)"
            :ref="viewname"
        ></component>
    </modal>
</template>
<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
@Component({
    components: {},
})
export default class AppModalCompponent extends Vue {
    /**
     * 视图UI参数
     *
     * @type {any}
     * @memberof AppModal
     */
    @Prop() view!: any;

    /**
     * 视图上下文参数
     *
     * @type {any}
     * @memberof AppModal
     */
    @Prop({ default: {} }) viewdata?: any;

    /**
     * 视图参数
     *
     * @type {any}
     * @memberof AppModal
     */
    @Prop({ default: {} }) viewparams?: any;

    /**
     * 导航数据
     *
     * @type {*}
     * @memberof AppModal
     */
    @Prop({ default: [] }) navdatas?: any;

    /**
     * 数据传递对象
     *
     * @type {any}
     * @memberof AppModal
     */
    subject: null | Subject<any> = new Subject<any>();

    /**
     * 是否显示
     *
     * @type {boolean}
     * @memberof AppModal
     */
    isShow: boolean = false;

    /**
     * 是否满屏
     *
     * @type {boolean}
     * @memberof AppModal
     */
    isfullscreen: boolean = false;

    /**
     * 零时结果
     *
     * @type {any}
     * @memberof AppModal
     */
    tempResult: any = { ret: '' };

    /**
     * 视图名称
     *
     * @type {string}
     * @memberof AppModal
     */
    viewname: string = '';

    /**
     * 视图标题
     *
     * @type {string}
     * @memberof AppModal
     */
    title: string = '';

    /**
     * 视图宽度
     *
     * @type {number}
     * @memberof AppModal
     */
    width: number = 0;

    /**
     * 视图层级
     *
     * @type {any}
     * @memberof AppModal
     */
    zIndex: any = null;

    /**
     * 视图样式
     *
     * @type {any}
     * @memberof AppModal
     */
    style: any = {};

    /**
     * 获取数据传递对象
     *
     * @memberof AppModal
     */
    getSubject() {
        return this.subject;
    }

    /**
     * 监控模态展示状态变更
     *
     * @memberof AppModal
     */
    @Watch('isShow')
    isShowWatch(newVal: boolean, oldVal: boolean): void {
        if (newVal !== oldVal && newVal === false) {
            this.$store.commit('downZIndex');
        }
    }

    /**
     * Vue生命周期created
     *
     * @memberof AppModal
     */
    created() {
        this.viewname = this.view.viewname;
        this.title = this.view.title;
        this.isfullscreen = this.view.isfullscreen ? this.view.isfullscreen : false;
        if (this.isfullscreen) {
            this.isfullscreen = true;
            Object.assign(this.style, { height: 'auto' });
        } else {
            if (!this.view.width || this.view.width === 0 || Object.is(this.view.width, '0px')) {
                let width = 600;
                if (window && window.innerWidth > 100) {
                    if (window.innerWidth > 100) {
                        width = window.innerWidth - 100;
                    } else {
                        width = window.innerWidth;
                    }
                }
                this.width = width;
            } else {
                this.width = this.view.width;
            }
            if (this.view.height && !Object.is(this.view.height, '0px')) {
                Object.assign(this.style, { height: this.view.height + 'px' });
            }
        }
    }

    /**
     * Vue生命周期mounted
     *
     * @memberof AppModal
     */
    mounted() {
        const curmodal: any = this.$refs.curmodal;
        curmodal.handleGetModalIndex = () => {
            return 0;
        };
        this.$store.commit('upZIndex');
        this.zIndex = this.$store.getters.getZIndex();
        this.isShow = true;
    }

    /**
     * 视图关闭
     *
     * @memberof AppModal
     */
    close(result: any) {
        if (result && Array.isArray(result) && result.length > 0) {
            Object.assign(this.tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
        }
        this.isShow = false;
    }

    /**
     * 视图数据变化
     *
     * @memberof AppModal
     */
    dataChange(result: any) {
        this.tempResult = { ret: '' };
        if (result && Array.isArray(result) && result.length > 0) {
            Object.assign(this.tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
        }
    }

    /**
     * 视图数据激活
     *
     * @memberof AppModal
     */
    viewDatasActivated(result: any) {
        if (result && Array.isArray(result) && result.length > 0) {
            this.close(result);
        }
    }

    /**
     * 模态显示隐藏切换回调
     *
     * @memberof AppModal
     */
    onVisibleChange($event: any) {
        const component: any = this.$refs[this.viewname];
        if (component) {
            // todo viewDataChange确认提示
            // if (this.viewdatachange) {
            //     this.isShow = true;
            //     const title: any = this.$t('app.tabpage.sureclosetip.title');
            //     const contant: any = this.$t('app.tabpage.sureclosetip.content');
            //     this.$Modal.confirm({
            //         title: title,
            //         content: contant,
            //         onOk: () => {
            //             this.isShow = false;
            //         },
            //         onCancel: () => {
            //             this.isShow = true;
            //         }
            //     });
            // } else {
            this.handleShowState($event);
            // }
        }
    }

    /**
     * 处理数据，向外抛值
     *
     * @memberof AppModal
     */
    handleShowState($event: any) {
        if ($event) {
            return;
        }
        if (this.subject && this.tempResult) {
            this.subject.next(this.tempResult);
        }
        setTimeout(() => {
            document.body.removeChild(this.$el);
            this.$destroy();
            this.subject = null;
        }, 500);
    }

    destroyed() {
      this.subject?.complete();
    }
}
</script>
<style lang="less" scoped>
@import './app-modal.less';
</style>