<template>
    <view
        v-if="item"
        class="return-wrap"
    >
        <view @tap="goReturn">
            <view v-for="(o, i) in item" :key="i">
                <view
                    v-if="o.type === 'text' && o.text"
                    class="return-card-text c-font-medium"
                >
                    <c-parse :nodes="init(o.text)"/>
                </view>
                <view
                    v-if="o.type === 'img' && o.imgUrl"
                    class="return-card-img"
                    :style="{
                        'background-image': 'url(' + o.imgUrl + ')'
                    } | imgCompress('background-image', {column: 8})"
                />
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file im布局
 * @author baiyuhang
 * @categories 业务组件
 * @tags [component]
 */
import CParse from '@baidu/med-ui/components/Parse/Parse';
import {navigate} from '@utils/navigate';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    props: {
        item: {
            type: Array,
            default() {
                return [];
            }
        },
        timestamp: {
            type: Number,
            default: 0
        },
        msUrl: {
            type: String,
            default: ''
        },
        isLast: {
            type: Boolean,
            default: false
        },
        /**
        * 对话流唯一标识
        */
        qid: {
            'type': String,
            'default': ''
        }
    },
    components: {
        CParse
    },
    data() {
        return {};
    },
    created() {
        ubcSend({
            type: 'view',
            value: 'im_card_return_visit',
            ext: {
                qid: this.qid
            }
        });
    },
    methods: {
        init(text) {
            const list = text.match(/##(.*)##/);
            if (list) {
                let newText = text.replace(list[0],
                                           `<span class='c-color-green'>${list[1]}</span>`
                );
                return newText;
            }
            return text;
        },
        goReturn() {
            ubcSend({
                type: 'clk',
                value: 'im_card_return_visit',
                ext: {
                    qid: this.qid
                }
            });
            if (this.msUrl) {
                navigate({
                    url: this.msUrl,
                    urlType: 2
                });
            }
        },
    }
};
</script>
<style lang="less" scoped>
.return-wrap {
    background-color: #fff;
    border-radius: 9px;
    padding-top: 0.2rem;
    text-align: center;

    .return-card-text {
        color: rgba(0, 0, 0, 0.85);
        letter-spacing: 0;
        line-height: 16px;
        padding-bottom: 0.09rem;

        * {
            display: inline-block;
        }
    }

    .return-card-img {
        max-width: 243px;
        height: 179px;
        margin: 0.1rem auto 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}
</style>
