<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" :class="{'hasdownload': startDownload}">
                <div class="confirm-btn btn" v-if="!startDownload && !isForceUpdate" :style="{'margin-right': ifDownloadAgain ? '10px': 0}">
                    <van-button class="close-btn" round block  type="default" size="normal" @click="handleClose">
                        明天再说
                    </van-button>
                </div>
                <template v-if="ifIOS">
                    <div class="confirm-btn btn">
                        <van-button class="check-btn" round block type="primary" size="normal" @click="handleConfirm">
                            <i solt="icon" class="iconfont icon-Arrow-Right_light" style="font-size: 14px"></i>
                            App Store
                        </van-button>
                    </div>
                </template>
                <template v-else>
                    <div class="version-confirm" :class="{'hasdownload': startDownload}">
                        <div class="btn flex_shrink-0">
                            <transition name="slidecheck">
                                <van-button v-show="ifDownloadAgain" round size="normal" @click="handleDownloadAgain">
                                    <i solt="icon" class="iconfont icon-ic_loop" style="font-size: 14px"></i>
                                </van-button>
                            </transition>
                        </div>
                        <div class="confirm-btn btn">
                            <transition name="slidecheck">
                                <van-button v-show="!startDownload" :loading="confirmLoading" class="check-btn" round block :type="isBtnType" size="normal" @click="handleConfirm">
                                    <i solt="icon" class="iconfont" :class="isBtnIcon" style="font-size: 14px"></i>
                                    <template v-if="isForceUpdate || !ifDownloadAgain">
                                        {{ isBtnTitle }}
                                    </template>
                                </van-button>
                            </transition>
                            <van-progress v-if="startDownload" class="progress-btn" :percentage="progress | numberFilter" stroke-width="8" :color="isProgressColor" />
                        </div>
                    </div>
                </template>
            </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: ""
        },
        // 是否完成下载
        installStatus: {
            type: Boolean,
            default: false
        },
        // 是否开始下载
        startDownload: {
            type: Boolean,
            default: false
        },
        // 下载进度
        progress: {
            type: Number/String,
            default: 0
        },
        isForceUpdate: {
            type: Boolean,
            default: false
        },
        changeLog: {
            type: String,
            default: ""
        },
        // 显示重新下载按钮
        ifDownloadAgain: {
            type: Boolean,
            default: false
        }
    },

    computed: {
        isBtnTitle() {
            return this.installStatus ? "安装" : "下载"
        },
        isBtnIcon() {
            return this.installStatus ? "icon-financial_install" : "icon-download"
        },
        isBtnType() {
            return this.installStatus ? "primary" : "info"
        },
        isProgressColor() {
            return this.progress >= 100 ? "#07c160" : "#1989fa"
        },
        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");
            if (!this.installStatus) {
                this.confirmLoading = true;
            }
        },
        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;
            }
            .progress-btn {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                height: 44px;
            }
            .confirm-btn {
                flex: 1;
                transition: all 0.2s ease-in-out;
                transform-origin: 100% 50%;
                height: 44px;

                .van-progress__portion, .van-progress__pivot {
                    transition: all 0.2s ease-in-out;
                }
            }

            .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>