<template>
    <view class="im-bottom-tip c-gap-inner-left-large c-gap-inner-right-large">
        <view class="im-bottom-tip-inner c-color-333 c-line-clamp1 c-tac c-gap-inner-left-large c-gap-inner-right-large" @tap="onTap(data)">
            <block v-for="item in data.content">
                <image v-if="item.type==='img'" mode="aspectFill" :src="item.src" class="im-bottom-tip-inner-img"/>
                <text v-if="item.type==='text'">{{item.text}}</text>
            </block>
        </view>
    </view>
</template>

<script>
/**
 * @file im底部tip提示条
 * @author zhangeryi
 * @categories 业务组件
 * @tags [component]
 */
/* global getCurrentPages */
import * as core from '../../utils/core';
import {navigate} from '../../utils/navigate';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 组件的数据
         */
        data: {
            type: Object,
            default() {
                return {
                    icon: '',
                    content: []
                };
            }
        }
    },
    methods: {
        onTap: core.throttle(function (data) {
            if (data.url) {
                navigate({
                    url: data.url
                });
            }
            else if (!data.url && data.popupCallbackUrl){
                // 调出就诊人信息卡片
                this.$emit('bottomTipPopup', {
                    callbackUrl: data.popupCallbackUrl,
                });
            }
            else if (data.msgReply) {// 用户主动回复固定话术
                const value = data.msgReply.value;
                const callbackUrl = data.msgReply.callbackUrl;
                /**
                 * 主动回复消息
                 * @property {Event} e a event params
                 */
                this.$emit('questionReply', {
                    callbackUrl,
                    value,
                    params: value
                });
            }
        }, 1 * 5000)
    }
};
</script>

<style lang="less" scoped>
.im-bottom-tip {
    margin-bottom: 10px;
    &-inner {
        background: #fff;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        font-size: 12px;
        line-height: 30px;
        &-icon {
            margin: 0 8px;
        }
        &-img {
            margin: 0 8px;
            width: 17px;
            height: 17px;
            display: inline-block;
            vertical-align: middle;
            &:first-child {
                margin-left: 0;
            }
        }
    }
}
</style>