import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';
import service from "../../assets/service/service";
import environment from "../../assets/environment/environment";

@Component
export default class SlidingVerificationCode extends Vue {
    @Prop({default: () => false}) private show!: any;
    @Prop({default: () => false}) private email!: any;
    @Prop({default: () => false}) private type!: any;
    private status: any = {
        show: false,
        slider: "start",
        errorCount: 0,
    }

    private sign: any = '';
    private bg: any = {};
    private lump: any = "";
    private slider: any = {
        min: 0,
        max: 330,
        step: 1,
        x: -1,
    };

    private sliderBtn: any = {
        min: 26,
        max: 356,
        step: 1,
        x: -1,
    }

    private current: any = {
        left: 0,
        top: 12,
        start: 0,
    };

    private btn: any = {
        left: 26,
        start: 26,
        initLeft: 26,
    }
    public $layer: any;
    private imgPrefix: string = '';

    private mounted() {
    }

    private close() {
        let $parent: any = this.$parent
        $parent.component.code = false
        this.$emit('close')
    }

    @Watch('email', {immediate: true})
    private watchEmail(value: any) {

    }

    @Watch('type', {immediate: true})
    private watchType(value: any) {

    }


    @Watch('show', {immediate: true})
    private getShow(value: any) {
        this.status.show = value;
        if (value) {
            this.init();
            this.imgPrefix = environment.apiPrefix
            this.getImageData();
        }
    }

    private init(){
        this.status.slider = "start";
        this.status.errorCount = 0;
        this.slider = {
            min: 0,
            max: 330,
            step: 1,
            x: -1,
        };
        this.sliderBtn = {
            min: 26,
            max: 356,
            step: 1,
            x: -1,
        }

        this.current = {
            left: 0,
            top: 12,
            start: 0,
        };
        this.btn = {
            left: 26,
            start: 26,
            initLeft: 26,
        }
    }

    private getImageData() {
        this.sign = new Date().getTime();
        let params = {
            sign: this.sign
        }
        service.request('/common/GetAuthenticateJigsaw', params).then((res: any) => {
            this.bg = res.data.bgPic;
            this.lump = res.data.icoPic
            this.current.top = res.data.yPoint
            // this.getImageUrl(res.data.bgPic.url)
        }).catch((error: any) => {

        })
    }

    private getImageUrl(url: any) {
        let params = {
            path: JSON.stringify(url)
        }
        service.request('/common/GetStaticPic', params).then((res: any) => {
        }).catch((error: any) => {

        })
    }

    private dragStart($event: any) {
        if (this.slider.x === -1) {
            this.slider.x = $event.screenX;
        }
        this.current.start = $event.clientX;
        document.onmousemove = (e) => {
            if (e.screenX >= this.slider.x && e.screenX <= this.slider.x + this.slider.max) {
                if (this.current.left + (e.clientX - this.current.start) >= this.slider.max) {
                    this.current.left = this.slider.max;
                    this.current.start = e.clientX;
                } else if (this.current.left + (e.clientX - this.current.start) <= this.slider.min) {
                    this.current.left = this.slider.min;
                    this.current.start = e.clientX;
                } else {
                    if (e.clientX - this.current.start >= this.slider.step) {
                        // 前进
                        this.current.left = this.current.left + (e.clientX - this.current.start);
                        this.current.start = e.clientX;
                    } else if (e.clientX - this.current.start < 0) {
                        // 后退
                        this.current.left = this.slider.step * Math.floor((e.clientX - this.slider.x) / this.slider.step);
                        this.current.start = e.clientX;
                    }
                }
            } else if (e.screenX < this.slider.x) {
                this.current.left = this.slider.min;
            } else if (e.screenX > this.slider.x + this.slider.max) {
                this.current.left = this.slider.max;
            }
            this.btn.left = this.current.left + this.btn.initLeft;

        };
        document.onmouseup = (e3) => {
            this.judgeImageEmail();
            document.onmousemove = null;
            document.onmouseup = null;
        };
    }

    private dragStartBtn($event: any) {
        if (this.sliderBtn.x === -1) {
            this.sliderBtn.x = $event.screenX;
        }
        this.btn.start = $event.clientX;
        document.onmousemove = (e) => {
            if (e.screenX >= this.sliderBtn.x && e.screenX <= this.sliderBtn.x + this.sliderBtn.max) {
                if (this.btn.left + (e.clientX - this.btn.start) >= this.sliderBtn.max) {
                    this.btn.left = this.sliderBtn.max;
                    this.btn.start = e.clientX;
                } else if (this.btn.left + (e.clientX - this.btn.start) <= this.sliderBtn.min) {
                    this.btn.left = this.sliderBtn.min;
                    this.btn.start = e.clientX;
                } else {
                    if (e.clientX - this.btn.start >= this.sliderBtn.step) {
                        // 前进
                        this.btn.left = this.btn.left + (e.clientX - this.btn.start);
                        this.btn.start = e.clientX;
                    } else if (e.clientX - this.btn.start < 0) {
                        // 后退
                        this.btn.left = this.sliderBtn.step * Math.floor((e.clientX - this.sliderBtn.x) / this.sliderBtn.step);
                        this.btn.start = e.clientX;
                    }
                }
            } else if (e.screenX < this.sliderBtn.x) {
                this.btn.left = this.sliderBtn.min;
            } else if (e.screenX > this.sliderBtn.x + this.sliderBtn.max) {
                this.btn.left = this.sliderBtn.max;
            }
            this.current.left = this.btn.left - this.btn.initLeft;
        };
        document.onmouseup = (e3) => {
            this.judgeImageEmail();
            document.onmousemove = null;
            document.onmouseup = null;
        };
    }

    private judgeImageEmail() {
        // this.$layer.load("验证成功，短信验证码已发送", {type: 'success'})
        let params = {
            email: this.email,
            type: this.type,
            sign: this.sign,
            move: this.current.left
        }
        service.request('/common/getEmailAuthCode', params).then((res: any) => {
            if(res.data){
                this.$layer.msg("验证成功，邮箱验证码已发送", {type: 'success'})
                let delay = setTimeout(() => {
                    let $parent: any = this.$parent
                    $parent.component.code = false
                    this.$emit('success')
                    clearTimeout(delay)
                }, 2000)
            } else {
                this.isError();
            }

        }).catch((error: any) => {
            this.isError();
        })
    }

    private isError() {
        this.status.errorCount++;
        this.status.slider = 'error';
        this.current.left = 0;
        this.btn.left = this.btn.initLeft;
        if (this.status.errorCount === 3) {
            this.status.errorCount = 0;
            this.getImageData()
        }
        let delay = setTimeout(() => {
            this.status.slider = "start";
            clearTimeout(delay)
        }, 1000)
    }
}