<template>
    <view class="tip">
        <view
            v-if="tip.textArr"
            class="c-inline-block"
        >
            <text
                v-for="(item, i) in tip.textArr"
                :key="i"
                :class="item.callbackUrl ? 'c-color-green tip-tap' : ''"
                @tap="onTapCb(item)"
            >{{ item.txt }}</text>
        </view>
        <rich-text
            v-else
            :nodes="text"
            class="c-inline-block"
        />
        <c-icon
            v-if="tip.rightIcon && text"
            name="question-circle"
            class="c-inline-block c-gap-inner-left-small"
            @tap="onTap"
        />
        <view v-if="showBottomLine" class="c-line-superfine-after"/>
    </view>
</template>

<script>
/**
* @file 问诊-顶部banner
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import {navigate} from '../../utils/navigate';
import {formatDate} from '../../utils/core';

import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * tip内容
         */
        tip: {
            'type': Object,
            'default': {
                text: '',
                duration: '',
                turn: '',
                rightIcon: {}
            }
        },
        showBottomLine: {
            'type': Boolean,
            'default': true
        }
    },
    data() {
        return {
            text: ''
        };
    },
    watch: {
        tip(value) {
            this.fmtTip();
        }
    },
    components: {
        CIcon
    },
    lifetimes: {
        attached() {
            this.fmtTip();
        }
    },
    methods: {
        // 点击常见问题
        onTap() {
            navigate({
                url: this.tip.rightIcon.msUrl || this.tip.rightIcon.sfUrl
            });
        },
        // 点击回调一个异步请求
        onTapCb(item) {
            /**
             * 回复问题
             *
             * @event questionReply
             */
            this.$emit('questionReply', {
                callbackUrl: item.callbackUrl
            });
        },
        // 格式化时长
        fmtDuration(duration) {
            let time = '';
            if (duration <= 60 && duration >= 0) {
                time = `${duration}分钟`;
            }
            else if (duration > 60 && duration <= 60 * 24) {
                if (duration % 60 === 0) {
                    time = `${Math.floor(duration / 60)}小时`;
                }
                else {
                    time = `${Math.floor(duration / 60)}时${duration % 60}分`;
                }
            }
            else if (duration > 60 * 24) {
                if (Math.floor(duration % (24 * 60) / 60) === 0) {
                    time = `${Math.floor(duration / 24 / 60)}天`;
                }
                else {
                    time = `${Math.floor(duration / 24 / 60)}天${Math.floor(duration % (24 * 60) / 60)}时`;
                }
            }
            else {
                time = '0分钟';
            }
            return time;
        },
        // 格式化tip显示
        fmtTip() {
            if (this.tip.textArr) {
                return;
            }
            if (this.tip.text.indexOf('{{') > -1) {
                // 替换{{}}
                this.text = this.tip.text
                    .replace(/{{num}}/, `{{${this.tip.num}}}`)
                    .replace(/{{duration}}/, `{{${this.fmtDuration(this.tip.duration)}}}`)
                    .replace(/{{turn}}/, `{{${this.tip.turn}}}`)
                    .replace(/{{time}}/, `{{${formatDate((this.tip.time || 0) * 1000, (this.tip.timeFormat || ''))}}}`)
                    .replace(/{{/g, '<span style="color:#F60;font-weight:bold;">')
                    .replace(/}}/g, '</span>');
            }
            else {
                this.text = this.tip.text;
            }
        }
    }
};
</script>

<style lang="less">
.tip {
    color: #333;
    background-color: #F4F4F4;
    text-align: center;
    line-height: .34rem;
    z-index: 89;
}
.tip-tap:active {
    background-color: #E6E6E6;
}

</style>
