<template>
    <view v-show="isShow">
        <!-- 弹层样式 -->
        <view
            class="cr__mask"
            v-show="type==='popup'">
            <view v-if="isExcuteAutoClose"></view>
            <view
                class="cr__pop c-gap-inner-top"
                :class="!item.btn || item.btn.length === 0 ? 'c-gap-inner-bottom' : ''">
                <c-icon
                    v-if="!item.btn || item.btn.length === 0"
                    name="close"
                    font-size="16px"
                    class="c-color cr__close"
                    @tap.stop="onSwitchType"/>
                <image
                    src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2666215013,2658882851&fm=179&app=35&f=GIF?w=300&h=150&s=A3518B6AD5E7BB510C40D41B0000E0C2"
                    class="cr__loading c-tac"></image>
                <rich-text
                    v-if="title"
                    :nodes="title"
                    class="c-color-green c-tac c-font-medium c-gap-top-small c-blocka"/>
                <view
                    v-if="item.btn && item.btn.length > 0"
                    class="cr__bg c-font-medium c-gap-top c-gap-inner-top c-gap-inner-bottom-large c-gap-inner-left-large c-gap-inner-right-large">
                    <!-- tip -->
                    <view
                        v-if="item.tip"
                        class="c-color-gray c-tac">
                        <text class="c-gap-right cr__divider">——</text>
                        <text>{{ item.tip }}</text>
                        <text class="c-gap-left cr__divider">——</text>
                    </view>
                    <!-- list -->
                    <view class="cr__list">
                        <view>
                            <view
                                v-for="(o, i) in item.list"
                                :key="i"
                                class="c-gap-top c-gap-inner-left"
                                :class="i === item.list.length - 1 ? 'c-gap-bottom' : ''">
                                <image :src="o.icon" class="cr__img c-inline-block" />
                                <text class="c-color c-gap-inner-left-boundary c-inline-block">{{ o.text }}</text>
                            </view>
                        </view>
                    </view>
                    <!-- price -->
                    <view class="c-color-orange c-tac">
                        <text>￥</text>
                        <text class="cr__price">{{ item.price }}</text>
                        <text
                            v-if="item.orgPrice"
                            class="cr__orgprice c-color-gray c-font-12 c-gap-left-large">{{ item.orgPrice }}</text>
                    </view>
                    <!-- button -->
                    <view
                        v-if="item.btn && item.btn.length > 0"
                        class="cr__btns c-gap-top">
                        <c-button
                            v-for="(b, i) in item.btn"
                            :key="i"
                            :type="b.type"
                            :primary-color="b.primary"
                            :background="b.bg"
                            :font-size="16"
                            font-weight="700"
                            shadow
                            border-radius="20px"
                            class="cr__btn"
                            @tap="onTap(b)">{{ b.text }}</c-button>
                    </view>
                </view>
            </view>
        </view>
        <!-- 标签样式 -->
        <view
            class="cr-tip__wrap c-gap-inner-top-small c-gap-inner-bottom"
            v-show="type==='tip'"
            @tap="onSwitchType">
            <view class="c-font-medium cr-tip">
                <view class="cr-tip__inner"></view>
                <view class="cr-tip__text">
                    <rich-text
                        v-if="title"
                        :nodes="title"
                        class="c-color-green c-tac c-font-medium"/>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 问诊-匹配提示+免费推荐三甲
 * @author haoyan
 * @categories 业务组件
 * @tags [component]
 */
import {send} from '../../utils/log';
import {throttle} from '../../utils/core';
import {request} from '../../utils/request';
import CButton from '@baidu/med-ui/components/Button/Button';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        /**
        * 数据对象
        */
        item: {
            'type': Object,
            'default': {}
        },
        /**
        * 对话流唯一标识
        */
        qid: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isShow: true,
            type: '',
            title: '',
            second: 0,
            isCountdownFinish: false,
            isExcuteAutoClose: false,
            isTiggerAI: false
        };
    },
    watch: {
        item(v) {

        },
        isShow(v) {
            if (v === false) {
                /**
                * 关闭弹层
                */
                this.$emit('close');
            }
        },
        type(v) {
            if (v === 'tip' && !this.isTiggerAI && this.item.aiUrl) {
                /**
                * 请求智能预诊
                */
                request({
                    url: this.item.aiUrl
                }).then(resp => {
                    this.isTiggerAI = true;
                });
            }
        }
    },
    components: {
        CButton,
        CIcon
    },
    created() {
        // console.log('xxx', this.item.aiUrl);
        this.type = this.item.type;
        this.setData();
        if (this.item.second) {
            this.countdown();
        }
        send({
            type: 'b',
            action: 'show_im_cr_pay_' + this.type,
            extra: {
                qid: this.qid
            }
        });
    },
    methods: {
        countdown() {
            let dur = parseInt((Date.now() - this.item.distributeTime * 1000) / 1000, 10);
            // 10s 后自动关闭
            if (!this.isExcuteAutoClose && this.type === 'popup' && dur >= (this.item.delay || 10)) {
                this.onSwitchType();
                this.isExcuteAutoClose = true;
            }
            if (dur < this.item.second) {
                const sec = this.item.second - dur;
                this.$set(
                    this,
                    'title',
                    this.item.title
                    /* eslint-disable max-len */
                    .replace(
                        /\{\{second\}\}/,
                        `<span style="font-weight: bold;" class="c-color-orange c-gap-left-small c-gap-right-small">${sec}</span>`
                    )
                    /* eslint-enable max-len */
                );
                setTimeout(() => {
                    this.countdown();
                }, 1000);
            }
            else {
                // 倒计时结束，更换文案
                this.isCountdownFinish = true;
                this.title = '正在为您优先连线医生...';
                if (this.item.titleArr){
                    this.titleArrInit();
                }
            }
        },
        setData(text) {
            this.$set(
                this,
                'title',
                (text ? text : this.item.title)
                .replace(
                    /\{\{limit\}\}/,
                    `<span class="c-color-orange c-gap-left-small c-gap-right-small">${this.item.limit}</span>`
                )
            );
        },
        onTap(o) {
            this.isExcuteAutoClose = true;
            const {
                name,
                callbackUrl
            } = o;

            if (name === 'cancel') {
                // 关闭弹层
                this.onSwitchType();
            }
            else if (name === 'pay') {
                this.toPay(callbackUrl);
            }
        },
        toPay: throttle(function (callbackUrl) {
            if (callbackUrl) {
                /**
                * 请求支付
                */
                this.$emit('questionReply', {
                    callbackUrl
                });

            }
            send({
                type: 'b',
                action: 'im_cr_pay',
                extra: {
                    qid: this.qid
                }
            });
        }, 2 * 1000),
        onSwitchType() {
            // send({
            //     type: 'b',
            //     action: 'im_cr_btn_' + this.type,
            //     extra: {
            //         qid: this.qid
            //     }
            // });
            // if (this.type === 'tip') {
            //     // 若倒计时结束且不推荐三甲，则不可展开为弹层
            //     if (!((!this.item.btn || this.item.btn.length === 0) && this.isCountdownFinish)) {
            //         this.type = 'popup';
            //     }
            // }
            // else {
            //     this.type = 'tip';
            // }
        },
        titleArrInit(){
            let i = 0;
            this.setData(this.item.titleArr[i]);
            setInterval(() => {
                if (i < this.item.titleArr.length){
                    this.setData(this.item.titleArr[i]);
                    i++;
                }
                else {
                    i = 0;
                    this.setData(this.item.titleArr[i]);
                    i = 1;
                }
            }, this.autoTabTime * 1 || 4000);
        }
    }
};
</script>

<style lang="less" scoped>
.cr--show {
    animation: show 1s;
}
.cr--hide {
    animation: hide 1s;
}
.cr__mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 921;
    transition: all .5s;
}
.cr__close {
    position: absolute;
    right: 10px;
}
.cr__pop {
    background-color: #fff;
    border-radius: 13px;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}
.cr__bg {
    background-color: #f8f8f8;
}
.cr__loading {
    width: .8rem;
    height: .4rem;
    margin: 0 auto;
    display: block;
}
.cr__divider {
    position: relative;
    top: -2px;
    color: #ddd;
}
.cr__img {
    width: 18px;
    height: 18px;
}
.cr__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cr__price {
    font-size: 30px;
    line-height: 1;
}
.cr__orgprice {
    text-decoration: line-through;
}
.cr__btns {
    display: flex;
   justify-content: space-between;
}
.cr__btn {
    width: calc(50% - 5px);
}
.cr-tip__wrap {
    width: calc(100% - 34px);
    margin: auto;
}
.cr-tip {
    height: .38rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .03);
    position: relative;
    overflow: hidden;
    /* 解决增加animation infinite 后，overflow失效的问题*/
    transform: rotate(0deg);
}
.cr-tip__inner {
    position: absolute;
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, #ddffff 100%);
    animation: loading 2.5s infinite linear;
}
.cr-tip__text {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cr-tip__loading {
    width: .76rem;
    height: .38rem;
    margin: 0 auto;
}
@keyframes loading {
    0% {
        left: -50%;
    }
    100% {
        left: 100%;
    }
}
@keyframes show {
    0% {
        opacity: 0;
        display: none;
    }
    100% {
        opacity: 1;
        display: block;
    }
}
@keyframes hide {
    0% {
        opacity: 1;
        display: block;
    }
    100% {
        opacity: 0;
        display: none;
    }
}
</style>