<template>
    <c-dialog
        :show="show"
        :title-height="60"
        :gap-top="0"
        :width="0.87"
        :btn-opts="[]"
        :gap-slot-bottom="5"
        content-padding="0 15px"
        border-radius="10px"
        class="subscribe-dialog"
        @close="handleClose"
    >
        <view slot="title" class="subscribe-dialog__title c-font-large c-tac c-color-title">{{ data.title }}</view>
        <view class="subscribe-dialog__cont">
            <view class="subscribe-dialog__cont__text c-font-15">
                <c-parse :nodes="richText"/>
            </view>
            <view class="subscribe-dialog__cont__equity c-gap-bottom-small">
                <view class="subscribe-dialog__cont__equity__title c-font-normal c-gap-inner-top-small c-gap-bottom">{{ data.tips }}</view>
                <view class="subscribe-dialog__cont__equity__list">
                    <view
                        v-for="(item, index) in data.label"
                        :key="index"
                        class="subscribe-dialog__cont__equity__list__item c-gap-inner-bottom"
                    >
                        <view class="subscribe-dialog__cont__equity__list__item__icon">
                            <image class="subscribe-dialog__cont__equity__list__item__img" :src="item.icon"/>
                        </view>
                        <view class="subscribe-dialog__cont__equity__list__item__text c-font-normal">{{ item.text }}</view>
                    </view> 
                </view>

            </view>
        </view>
        <view
            v-for="(btn, index) in data.button"
            slot="btn"
            :key="index"
            class="subscribe-dialog__btn c-font-17 c-tac"
            @tap="onDialogBtn"
        >{{ btn.text }}(<text>{{ number }}</text>s)</view>
    </c-dialog>
</template>

<script>
/**
 * @file 预售弹唱
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */

/* global Page swan  getApp */
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import CParse from '@baidu/med-ui/components/Parse/Parse';
// import {navigate, navToH5} from '../../utils/navigate';
// import {request} from '../../utils/request';
// import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
// import * as Conf from '../../utils/conf';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CDialog,
        CParse
        // 'c-icon': Icon,
        // 'c-popup': Popup,
        // 'c-btn': Button
    },
    props: {
        /** 预售弹窗对象 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /** 是否显示 */
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            timer: null,
            number: 0,
            richText: ''
        };
    },
    watch: {
        show(n, o) {
            if (n) {
                this.richText = this.highlightFormat(this.data.dialog || '');
                this.countDown();
            }
        }
    },
    methods: {
        handleClose() {
            this.clearCountDown();
            /** 关闭 */
            this.$emit('onSubscribeDialogBtn', {type: 'close'});
        },
        onDialogBtn() {
            this.clearCountDown();
            /** 支付 */
            this.$emit('onSubscribeDialogBtn', {type: 'pay'});
        },
        // 匹配高亮文本
        highlightFormat(text='', color='#FD503E') {
            return text.replace(new RegExp('<em>', 'g'), '<span style="color: '+ color +';">')
                .replace(new RegExp('</em>', 'g'), '</span>');
        },
        // 倒计时
        countDown() {
            this.clearCountDown();

            this.number = parseInt(this.data.time_wait, 10);
            this.timer = setInterval(() => {
                this.number -= 1;
                if (this.number <= 0) {
                    this.clearCountDown();
                    this.onDialogBtn();
                    return;
                }
            }, 1000);
        },
        // 清空倒计时
        clearCountDown() {
            clearTimeout(this.timer);
            this.timer = null;
        }
        
    }
};
</script>
<style lang="less" scoped>
.subscribe-dialog {
    &__title {
        font-weight: bold;
        margin-top: 18px;
        margin-bottom: 1px;
    }
    &__cont {
        &__text {
            margin-top: 8px;
            color: #1f1f1f;
            font-weight: 400;
            padding: 0 5px;
            margin-bottom: 14px;
        }
        &__equity {
            text-align: center;
            border-radius: 8px;
            background-image: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 100%);
            &__title {
                color: #858585;
            }
            &__list {
                display: flex;
                text-align: center;
                justify-content: space-around;
                &__item {
                    &__icon {

                    }
                    &__img {
                        display: block;
                        width: 33.33px;
                        height: 33.33px;
                        margin: 0 auto;
                    }
                    &__text {
                        color: #FD503E;
                        margin-top: 4px;
                    }
                }
            }
        }
    }
    &__btn {
        border-top: 1px solid #f1f1f1;
        font-weight: 400;
        color: #1f1f1f;
        padding: 9.5px 0;
    }
}
</style>
