<template>
    <van-popup v-model="value" round get-container="body" :close-on-click-overlay="false">
        <main class="check_body">
            <div class="header">
                版本云修复
                <span class="version" v-if="version">{{version}}</span>
            </div>
            <div class="middle" :class="isMiddleCls">
                <div class="content" id="checkapp_middle" @scroll="handleScroll" v-html="updateDescription"></div>
            </div>
            <div class="footer">
                <div class="confirm-btn btn">
                    <van-button class="close-btn" round block  type="default" size="normal" @click="handleClose">
                        稍后再说
                    </van-button>
                </div>
                <div class="confirm-btn btn">
                    <transition name="slidecheck">
                        <van-button :loading="confirmLoading" class="check-btn" round block type="primary" size="normal" @click="handleConfirm">
                            <i solt="icon" class="iconfont icon-reset_light" style="font-size: 14px"></i>
                            重启应用
                        </van-button>
                    </transition>
                </div>
            </div>
        </main>
    </van-popup>
</template>

<script>

export default {
    name: 'LjCheckApp',

    data() {
        return {
            timer: null,
            confirmLoading: false,
            contentStatus: -2, // 滚动状态： -2:不滚动，-1：到顶，0：中间，1：到底
            ifIOS: false,
        };
    },

    props: {
        value: {
            type: Boolean,
            default: false
        },
        version: {
            type: String,
            default: ""
        },
        isForceUpdate: {
            type: Boolean,
            default: false
        },
        changeLog: {
            type: String,
            default: ""
        },
    },

    computed: {
        updateDescription() {
            if (this.changeLog && this.changeLog != '') {
                let changeLog = '', i = 0;
                changeLog = this.changeLog.replace(/[0-9]*[0-9][.|、]/g, function(captured) { 
                    if (i++) { 
                        return "<br/>" + captured; 
                    } 
                    return captured; 
                })
                return changeLog;
            }
            return this.isForceUpdate ? `我们解决了一些大霸鸽<br>你必须更新才能继续使用` : `优化业务流程，邀请你来体验一下`;
        },
        isMiddleCls() {
            if (this.contentStatus == -2) {
                return '';
            }
            let clsName = [];
            if (this.contentStatus != -1) {
                clsName.push('not-in-top');
            }
            if (this.contentStatus != 1) {
                clsName.push('not-in-bottom');
            }
            return clsName.join(" ");
        }
    },
    
    watch: {
        updateDescription() {
            this.$nextTick(() =>{
                // 获取日志后，初始化，是否需要滚动
                let el = document.getElementById('checkapp_middle');
                if (el) {
                    if (el.offsetHeight < 200) {
                        this.contentStatus = -2;
                    } else {
                        this.contentStatus = -1;
                    }
                }
            });
        }
    },

    mounted() {
        if (api.systemType === "ios") {
            this.ifIOS = true;
        } 
    },

    methods: {
        handleDownloadAgain() {
            this.$emit("fnDownloadAgain")
        },
        handleClose() {
            this.$emit("close")
        },
        handleConfirm() {
            if (this.confirmLoading) return false;
            this.$emit("confirm");
            setTimeout(() => {
                this.confirmLoading = true;
            }, 500);
        },
        clearState() {
            this.confirmLoading = false;
        },
        handleScroll() {
            const el = document.querySelector('#checkapp_middle');
            let offsetHeight = el.offsetHeight;
            let scrollTop = el.scrollTop;
            let scrollHeight = el.scrollHeight;
            if (scrollTop == 0) {
                // 到顶
                this.contentStatus = -1;
            } else if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
                // 到底
                this.contentStatus = 1;
            } else {
                this.contentStatus = 0;
            }
        }
    },

    filters: {
        numberFilter(num) {
            let sum = Math.floor((num) * Math.pow(10, 1)) / Math.pow(10, 1);
            sum = parseFloat(sum).toFixed(1);
            return sum;
        }
    }
};
</script>

<style lang="less">
    .van-overlay {
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    .check_body {
        display: flex;
        flex-direction: column;
        width: 70vw;
        max-width: 320px;
        padding: 15px;
        
        > div + div {
            margin-top: 15px;
        }

        .header {
            text-align: center;
            font-size: 16px;
            font-weight: 700;

            .version {
                display: block;
                font-size: 12px;
                color: #888888;
                text-align: center;
            }
        }
        
        .middle {
            position: relative;

            &.not-in-top::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 30px;
                background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
                transition: all 0.2s ease-in-out;
            }
            &.not-in-bottom::after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 30px;
                background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
                transition: all 0.2s ease-in-out;
            }
            .content {
                max-height: 200px;
                overflow: auto;
                font-size: 12px;
            }
        }

        .footer {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 44px;
            width: 100%;

            .check-btn {
                flex: 1;
            }
            .btn + .btn {
                margin-left: 10px;
            }
            &.hasdownload .confirm-btn {
                margin-left: 0;
                width: 100%;
            }
            &.hasdownload .close-btn {
                margin-right: 0;
                width: 0;
                opacity: 0;
            }
        }
    }
    .slidecheck-enter-active {
        transition: all .2s ease-in-out;
    }
    .slidecheck-leave-active {
        transition: all .2s ease-in-out;
    }
    .slidecheck-enter-active,.slidecheck-leave{
        opacity: 1;
        height: 44px;
    }
    .slidecheck-enter,.slidecheck-leave-active {
        opacity: 0;
        height: 8px;
    }
    .van-overlay {
        background-color: rgba(0, 0, 0, 0.3);
    }
</style>