<template>
    <view class="aut">
        <c-popup :show="isOpen">
            <swiper class="c-gap-top-large" :current="viewIdx" :style="{height: '235px'}" @change="onChange">
                <!-- swiper1 -->
                <swiper-item>
                    <view class="c-font-normal c-color">
                        <text>{{ item.source }}</text>
                        <text class="c-gap-left">{{ item.text }}</text>
                        <c-icon name="exclamation-circle" class="icon-info" @tap="onTapTip" />
                    </view>
                    <view class="c-color-link c-font-17 c-gap-top">{{ item.title }}</view>
                    <view
                        class="c-line-top c-line-bottom c-gap-inner-top-small c-gap-inner-bottom-small c-gap-top-large"
                    >
                        <text class="c-color-link c-font-17 c-inline-block">{{ item.phone }}</text>
                        <text class="c-color-gray c-font-small c-inline-block c-gap-left">{{ item.tip }}</text>
                    </view>
                    <view class="c-row c-gap-inner-top-large c-gap-inner-bottom-large">
                        <view v-for="(btn, i) in item.btns" class="c-span12">
                            <c-btn type="primary" :primary-color="btn.backColor" @tap="onTapBtn(btn)">
                                <text>
                                    <text :style="{color: btn.color}">{{ btn.txt }}</text>
                                    <!-- 倒计时 -->
                                    <text v-if="btn.countdown > 0" class="c-color-link">
                                        <text>（</text>
                                        <text :style="{color: btn.color}">{{ second || btn.countdown }}秒</text>
                                        <text>）</text>
                                    </text>
                                </text>
                            </c-btn>
                        </view>
                    </view>
                </swiper-item>
                <!-- swiper2 -->
                <swiper-item>
                    <view class="c-row c-font-17 c-color-link">
                        <view class="c-span2 icon-back">
                            <c-icon name="left" @tap="onTapBack" />
                        </view>
                        <view class="c-span8 info-title">{{ item.info.title }}</view>
                        <view class="c-span2"></view>
                    </view>
                    <view class="c-color c-font-normal c-gap-top-large">{{ item.info.txt }}</view>
                </swiper-item>
            </swiper>
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 手机授权组件-好大夫非定向专用
 * @author haoyan
 */
import Button from '@baidu/med-ui/components/Button/Button';
import Popup from '@baidu/med-ui/components/Popup/Popup';
import Icon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        item: {
            type: Object,
            default() {
                return {};
            }
        },
        isLast: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isOpen: false,
            viewIdx: 0,
            second: 0,
            timeid: null
        };
    },
    components: {
        'c-btn': Button,
        'c-popup': Popup,
        'c-icon': Icon
    },
    lifetimes: {
        attached() {
            // 弹起
            if (this.isLast) {
                setTimeout(() => {
                    this.isOpen = true;
                    this.initCountdown();
                }, 500);
            }
        }
    },
    methods: {
        // 初始化倒计时
        initCountdown() {
            let cdBtn = null;
            // 倒计时
            (this.item.btns || []).map(b => {
                if (b.countdown > 0) {
                    this.second = b.countdown;
                    cdBtn = b;
                }
            });
            if (this.second > 0) {
                this.timeid = setInterval(() => {
                    this.second = this.second - 1;
                    if (this.second <= 0) {
                        clearInterval(this.timeid);
                        // 计时结束
                        this.onTapBtn(cdBtn);
                    }
                }, 1000);
            }
        },
        // 点击右上角提示信息
        onTapTip() {
            this.viewIdx = 1;
        },
        // 点击弹层按钮
        onTapBtn(btn) {
            this.$emit('questionReply', {
                callbackUrl: btn.callbackUrl,
                value: btn.txt === '拒绝' ? btn.txt : this.item.phone
            });
            this.isOpen = false;
            if (this.timeid) {
                clearInterval(this.timeid);
            }
        },
        // 点击后退
        onTapBack() {
            this.viewIdx = 0;
        },
        // swiper变化
        onChange(info) {
            const current = info.detail.current;
            this.viewIdx = current;
        }
    }
};
</script>
<style lang="less" scoped>
.aut {
    .icon-info {
        float: right;
    }
    .icon-back {
        text-align: left;
    }
    .info-title {
        text-align: center;
    }
}
</style>
