<template>
    <view class="add-desktop" v-if="show" :style="{bottom: bottom + 'px'}">
        <image src="https://med-fe.cdn.bcebos.com/brand/add-desk-top-icon.png" class="add-desktop__icon" />
        <view class="add-desktop__text c-gap-left c-line-clamp1 c-font-13">添加到主屏幕，下次使用更方便</view>
        <view>
            <c-button
                auto
                type="primary" 
                :height="28" 
                :font-size="12" 
                font-weight="bold"
                border-radius="14px"
                @tap="onAddDeskTop"
                class="add-desktop__btn"
            >一键添加</c-button>
            <c-icon 
                class="c-gap-left add-desktop__close" 
                name="close" fontSize="12px"
                @tap="onClose"
            />
        </view>
    </view>
</template>
<script>
/**
 * @file 添加到桌面引导
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
/* global swan */
import CButton from '@baidu/med-ui/components/Button/Button';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import {compareVersion} from '@baidu/med-utils/lib/base';
export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        CButton
    },
    options: {
        addGlobalClass: true
    },
    props: {
        // 距离底部间距
        bottom: {
            type: Number,
            default: 17
        }
    },
    data() {
        return {
            show: false,
            showID: null
        };
    },
    created() {
        // 没有此API直接不展示
        if (!this.$api.canIUse('addToDesktop')) {
            return;
        }
        // 判断系统版本是否小于 ios 9
        const systemInfo = getSystemInfo();
        const systemFlag = systemInfo.platform === 'ios';
        if (systemFlag) {
            let systemVersion = systemInfo.system.match(/\d+(\.\d+)+/g);
            systemVersion = systemVersion && systemVersion[0];
            if (systemVersion && compareVersion('10.0.0', systemVersion) === 1) {
                return;
            }
        }
        this.init();
    },
    destroyed() {
        clearTimeout(this.showID);
    },
    watch: {
        show(val) {
            if (val) {
                this.$api.reportAnalytics('add_desktop_show');
            }
        }
    },
    methods: {
        onClose() {
            this.$api.reportAnalytics('add_desktop_close');
            this.show = false;
        },
        onAddDeskTop() {
            this.$api.reportAnalytics('add_desktop_btn');
            swan.addToDesktop({
                success: res => {
                    this.show = false;
                    this.saveAddFlag(true);
                }
            });
        },
        init() {
            const addDesktopObj = this.$api.getStorageSync('addDesktop') || {};
             // 得到当前0点的时间戳
            const now = new Date().setHours(0, 0, 0, 0);
            if (!addDesktopObj.date) { // 无访问
                this.show = true;
                this.saveAddFlag(false);
            } else if (!addDesktopObj.isAdd && now > addDesktopObj.date) { // 未添加且上次访问时间超过1天
                this.show = true;
                this.saveAddFlag(false);
            }
            this.showID = setTimeout(() => {
                this.show = false;
            }, 30 * 1000);
        },
        saveAddFlag(isAdd) {
            // 得到当前0点的时间戳
            const now = new Date().setHours(0, 0, 0, 0);
            this.$api.setStorage({
                key: 'addDesktop',
                data: {isAdd, date: now}
            });
        }
    }
};
</script>
<style lang="less" scoped>
.add-desktop {
    position: fixed;
    z-index: 10;
    width: calc(100% - 34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    left:50%;
    transform:translateX(-50%);
    background: rgba(0,0,0,0.8);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    &__btn {
        font-weight: bold;
    }
    &__icon {
        width: 30px;
        height: 30px;
    }
    &__text {
        flex: 1;
    }
    &__close {
        font-weight: bold;
    }
}
</style>
