<template>
    <view @touchmove.prevent.stop>
        <modal-contianer
            :is-show="isShow && modal.actStatus && isImageLoad"
            :z-index="zIndex"
        >
            <!-- content -->
            <view class="operate-modal__wrap">
                <view class="operate-modal__content" @tap="jumpToPage">
                    <image
                        class="operate-modal__content__img"
                        :src="modal.img"
                        mode="widthFix"
                    />
                </view>
                <!-- close -->
                <view class="operate-modal__icon-wrap">
                    <c-icon
                        class="operate-modal__icon-close"
                        font-size="28px"
                        name="close-circle"
                        @tap="onClose"
                    />
                </view>
            </view>
        </modal-contianer>
        
        <!-- 图片预加载 -->
        <image
            :src="modal.img"
            style="display: none"
            @load="onImageLoad"
        />
    </view>
</template>

<script>
/**
 * @file 运营弹窗
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */

/* global getCurrentPages swan */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../utils/navigate';
import {request} from '../../utils/request';
import * as log from '../../utils/log';
import ModalContianer from '../common/ModalContainer';

const OPERATE_MODAL_TIME = 'operateModalTime';
export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        ModalContianer
    },
    props: {
        /**
         * 显示层级
         */
        zIndex: {
            type: Number,
            default: 921
        },
        /**
         * 弹窗请求地址
         */
        api: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 接口数据
            modal: {},
            // 用户是否登录
            isLogin: 0,
            // 是否显示弹框
            isShow: false,
            // 图片加载完成
            isImageLoad: false,
            // 上一活动ID
            actIndex: 0,
        };
    },
    watch: {
        isShow(n, o) {
            if (n) {
                log.send({
                    type: 'b',
                    action: 'operate-modal-show',
                    extra: {
                        type: this.modal.actType
                    }
                });
            }
        }
    },
    created() {
        const storageObj = this.$api.getStorageSync(OPERATE_MODAL_TIME) || {};
        if (!storageObj.showTime || Date.now() > storageObj.showTime) {
            if (storageObj && storageObj.actIndex && storageObj.actIndex !== 0) {
                this.actIndex = storageObj.actIndex;
            }
            this.initData();
        }
    },
    methods: {
        // 将当天0点和23点59分存入缓存中
        setShowTime() {
            let showTime = Date.now() + this.modal.interval * 1000; // 未来要显示的时间点
            // if (this.modal.interval >= 86400) {
            //     showTime = new Date(showTime).setHours(0, 0, 0, 0);
            // }
            this.$api.setStorage({
                key: OPERATE_MODAL_TIME,
                data: {
                    actId: this.modal.actType,
                    showTime: showTime,
                    actIndex: this.modal.actId,
                }
            });
        },
        initData() {
            if (!this.api) {
                return;
            }
            request({
                url: this.api,
                isNeedLogin: false,
                isFirstScreen: false,
                data: {
                    actId: this.actIndex || ''
                }
            }).then(res => {
                this.modal = res.data;
                if (this.modal.actId === 0) {
                    this.$api.setStorage({
                        key: OPERATE_MODAL_TIME,
                        data: {
                            actId: '',
                            showTime: 0,
                            actIndex: 0,
                        }
                    });
                }
                // TODO: actStatus 0 => 不弹窗， 1 => 弹窗
                if (this.modal.actStatus) {
                    this.setShowTime();
                    let swanFlag = false, h5Flag = false;
                    let actScope = this.modal.actScope;
                    for (let i = 0; i < actScope.length; i++) {
                        if (actScope[i] === 'swan') {
                            swanFlag = true;
                        } else if (actScope[i] === 'h5') {
                            h5Flag = true;
                        }
                    }
                    if (swanFlag && process.env.MARS_ENV === 'swan' && swan.canIUse('showModalPage')) {
                        swan.showModalPage({
                            url: `/pages/brand/popup/index?img=${this.modal.img}&uniqueId=${this.modal.uniqueId}&url=${encodeURIComponent(this.modal.url)}`,
                            success() {
                                console.log('success1');
                            },
                            fail(error) {
                                console.error(error);
                            }
                        });
                    } else if (h5Flag && process.env.MARS_ENV === 'h5') {
                        this.isShow = true;
                    } else if (swanFlag && process.env.MARS_ENV === 'swan') {
                        this.isShow = true;
                    }
                    
                    
                }
            });
        },
        onClose() {
            log.send({
                type: 'b',
                action: 'operate-modal-close',
                extra: {
                    type: this.modal.actType
                }
            });
            this.isShow = false;
        },
        jumpToPage() {
            this.isShow = false;
            log.send({
                type: 'b',
                action: 'operate-modal-btn',
                extra: {
                    type: this.modal.actType
                }
            });
            navigate({
                url: this.modal.url
            });
        },
        onImageLoad() {
            // 图片请求成功后，显示对话框。
            this.isImageLoad = true;
        }
    }
};
</script>

<style lang="less" scoped>
.operate-modal {
    
    &__wrap {
        width: 100vw;
        border-radius: 11px;
        z-index: 1;
    }
    &__content {
        &__img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
    &__icon-wrap {
        position: relative;
        margin-top: 17px;
    }
    &__icon-close {
        color: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
