import unit from "$utils/unit/unit";

import globalEvent from '$utils/tool/globalEvent';
import popup from "$utils/tool/popup";
import {PopupExportComponent} from "$popup/popup-export/const";
import {InstructionsCacheType} from "$utils/request";

export default <LibMixins>{

    data(){
        return {
            vValue:false,
            useItem:{},
            vParams:{},
            width: unit.unitPx(300),
            height:unit.unitPx(300),
            vX:0,
            vY:0,
            diff:10,
            loadingStatus:false
        }
    },

    watch:{
        value:{
            handler:function (){
                return this.setValue(this.value);
            },
            immediate:true
        },
        x:{
            handler:function () {
                this.setTargetValue(this.x,'vX');
            },
            immediate:true
        },
        y:{
            handler:function () {
                this.setTargetValue(this.y,'vY');
            },
            immediate:true
        },
        params:{
            handler:function () {
                this.fetchUseParams(this.params);
            },
            immediate:true
        },
        item:{
            handler:function () {
                this.setItem(this.item,'storageItem');
            },
            immediate:true
        },
        el:{
            handler:function () {
                this.inferOffset(this.el);
            },
            immediate:true
        }
    },

    computed:{
      vItem(){
          return this.useItem || this.storageItem || {};
      }
    },

    methods:{

        setTargetValue(number,key){
            if (this.value === false) return null;
            let diff = Math.abs(this[key] - number);
            if (diff >= this.diff) {
                this.setItem(number,key);
            }
        },

        setItem(item,key){

            if (this.value === false) return null;
            if (this[key] !== item ) {
                this[key]= item;
            }

        },

        fetchUseParams(){

            if (JSON.stringify(this.params) !== JSON.stringify(this.vParams)) {
                this.vParams = this.params;
                this.unique  = +new Date()+'-'+Math.ceil(Math.random() * 10000);
                let unique = this.unique;
                this.useItem = {};
                this.$request({
                    url:'room/get_room_user_info',
                    data:this.vParams,
                    token:true,
                    cache:{
                        type: InstructionsCacheType.memory,
                        id:'get_room_user_info-'+this.vParams.uid+'-'+this.vParams.rid
                    },
                    next:({status})=> this.loadingStatus = status
                }).then((data)=>{
                    if (unique === this.unique) {
                        this.useItem = data.data || {};
                        this.setFollow(this.useItem);
                    }
                })
            }

        },

        setValue(value){

            clearTimeout(this.closeEventTime);
            globalEvent.off('popup-user');
            if (this.vValue !== value) {

                this.vValue = value;

                if (this.value !== value) {
                    this.$emit('update:value',value);
                }

                if (this.value && this.vValue) {
                    globalEvent.on('popup-user',()=> {
                        if (this.value && this.vValue && globalEvent.isHas('popup-user')) {
                            popup.$popup.open(PopupExportComponent.user,{
                                value:false
                            });
                            globalEvent.off('popup-user')
                        }
                    });
                }
            }
        },

        inferOffset(el:Record<string, any>){

            if (el && this.value) {

                let offsetWidth = (el.target && el.target.offsetWidth || 0);
                let x = el.clientX - el.offsetX + offsetWidth;
                let y = el.clientY - el.offsetY;
                if (y + this.height >= window.innerHeight) {
                    y = window.innerHeight - this.height;
                }

                if (x + this.width >= window.innerWidth) {
                    x -=  this.width + offsetWidth;
                }

                this.setTargetValue(x,'vX');
                this.setTargetValue(y,'vY');

            }

        }

    },


    beforeUnmount() {
        globalEvent.off('popup-user');
    }

}
