<template>
    <view v-if="isShowFab" class="daka-task-view">
        <view class="daka-task-view__icon">
            <view v-if="second > 0" class="daka-task-view__number">{{ second }}</view>
            <view
                v-else
                class="daka-task-view__done"
                @tap="onJumpPage"
            >
                <view>任务</view>
                <view>已完成</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 打卡倒计时浮层
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */

import {navigate} from '../../../utils/navigate';
import {request} from '../../../utils/request';
import * as conf from '../../../utils/conf';
import {send} from '../../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 倒计时时间
         */
        time: {
            type: [Number, String],
            default: 15
        },
        /**
         * 任务Id
         */
        taskId: {
            type: String,
            default: ''
        },
        /**
         * 是否开启跳转
         */
        isOpenJump: {
            type: Boolean,
            default: true
        }
    },
    watch: {},
    data() {
        return {
            api: {
                taskDone: '/api/healthcenter/taskdone'
            },
            // 开始时间
            taskBeginTime: 0,
            // 倒计时显示
            second: 15,
            // 倒计时ID
            intervalId: null,
            // 隐藏浮层ID
            showFabIntervalId: null,
            // 隐藏浮层
            isShowFab: true,
            // 任务浮层点击跳转按钮
            fabBtnUrl: ''
        };
    },
    created() {
        let time = parseInt(this.time, 0);
        // 任务倒计时初始化
        this.taskBeginTime = Date.now() + time * 1000 + 500;
        this.clear();
        let isOpenInterval = this.countDownCallback();
        isOpenInterval && (this.intervalId = setInterval(this.countDownCallback, 1000));
    },
    destroyed() {
        this.clear();
    },
    methods: {
        // 倒计时回调函数
        countDownCallback() {
            let timeDiff = (this.taskBeginTime - Date.now()) / 1000;
            if (timeDiff < 0) {
                this.second = 0;
                clearTimeout(this.intervalId);
                this.removeFab();
                this.isShowFab && this.getTaskSuccess();
                return false;
            }
            this.second = Number.parseInt(timeDiff, 0);
            return true;
        },
        // 任务完成请求
        getTaskSuccess() {
            request({
                url: conf.operateApihost + this.api.taskDone,
                data: {id: this.taskId}
            }).then(res => {
                if (!res.data.modal_type) {
                    return;
                }
                send({
                    type: 'b',
                    action: 'task-success',
                    extra: {
                        taskId: this.taskId
                    }
                });
                this.fabBtnUrl = res.data.btnUrl;
                /**
                 * 打开对话框
                 */
                this.$emit('openDakaModal', res.data);
            });
        },
        // 删除浮层
        removeFab() {
            this.showFabIntervalId = setTimeout(() => {
                this.isShowFab = false;
            }, 3000);
        },
        // 跳转
        onJumpPage() {
            if (!this.fabBtnUrl) {
                return;
            }
            navigate({url: this.fabBtnUrl});
        },
        // 清空倒计时
        clear() {
            clearTimeout(this.intervalId);
            clearTimeout(this.showFabIntervalId);
        }
    },
    pageLifetimes: {
        show() {
            this.clear();
            let isOpenInterval = this.countDownCallback();
            isOpenInterval && (this.intervalId = setInterval(this.countDownCallback, 1000));
        },
        hide() {
            this.clear();
        }
    }
};
</script>
<style lang="less" scoped>
.daka-task-view {
    position: fixed;
    right: 0;
    bottom: 15%;
    z-index: 150;
    &__icon {
        width: 80px;
        height: 80px;
        box-sizing: border-box;
        text-align: center;
        font-size: 19px;
        font-weight: 500;
        color: #49c5b3;
        background: url('https://medactivity.cdn.bcebos.com/center/alarm-clock.png') no-repeat;
        background-size: 100% auto;
    }
    &__done {
        font-size: 13px;
        line-height: 17px;
        padding-top: 26px;
    }
    &__number {
        padding-top: 35px;
    }
}
</style>
