<template>
    <!-- htmlcs-disable -->
    <view
        class="c-blocka"
        @tap.stop="onTap(item)"
    >
        <text
            v-if="item.icon"
            style="font-size: 14px;"
            class="m-icon c-gap-right-middle"
            :class="'m-icon-' + item.icon"
        />
        <!--
        <rich-text :nodes="item.text" :style="item.style" selectable></rich-text>
        -->
        <!-- 单行，一半有颜色 -->
        <view v-if="item.textlist" class="c-inline">
            <view
                v-for="(textitem, i) in item.textlist"
                :key="i"
                class="c-inline"
                :style="{color: textitem.color ? textitem.color : ''}"
                @tap.stop="onTextLineTap(textitem)"
            >
                {{ textitem.text }}<image
                    v-if="textitem.type && textitem.type === 'popup'"
                    src="https://med-fe.cdn.bcebos.com/wz/search-icon1.png"
                    class="icon-popup"
                />
            </view>
        </view>
        <!-- 单行，一半图标一半文字 -->
        <view v-else-if="item.iconAndText">
            <!-- eslint-disable-next-line -->
            <block v-for="textitem in item.iconAndText">
                <image
                    v-if="textitem.type === 'icon'"
                    :src="textitem.icon"
                    mode="widthFix"
                    class="c-inline-block"
                    :style="{width: textitem.width
                        ? textitem.width : '20px', 'margin': textitem.margin
                        ? textitem.margin : '0 5px'}"
                    @tap="onTextLineTap(textitem)"
                />
                <!-- rd传margin值来控制icon位置，如'0 3px 10px'-->
                <view
                    v-if="textitem.type === 'text'"
                    class="c-inline"
                    :style="{color: textitem.color
                        ? textitem.color : '', 'font-size': textitem.fontSize
                        ? textitem.fontSize : '16px'}"
                    @tap="onTextLineTap(textitem)"
                >
                    {{ textitem.text }}
                </view>
                <!--- 带链接-->
                <view
                    v-if="textitem.type === 'link'"
                    class="c-inline"
                    :style="{color: textitem.color, 'font-size': textitem.fontSize}"
                    @tap="onNavigate(textitem)"
                >{{ textitem.text }}</view>

            </block>
        </view>
        <!-- 3行截断 -->
        <view v-else-if="item.lineClamp" class="line-clamp-wrap">
            {{ item.text }}
        </view>
        <!-- 普通单行 -->
        <view v-else :style="item.style || ''">{{ item.text }}</view>
    </view>
</template>

<script>
/**
 * @file components/im/im-text-line
 * @author wangying51
 */
import {navigate} from '../../utils/navigate';
import {request} from '../../utils/request';
import {getDetailLocation} from '../../utils/location';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        item: {
            'type': Object,
            'default': {}
        }
    },
    components: {
    },
    data() {
        return {
            list: []
        };
    },
    methods: {
        onTap(item) {
            item.callbackUrl && this.$emit('questionReply', item);
        },
        onTextLineTap(item) {
            if (item.msUrl) {
                navigate({
                    url: item.msUrl
                });
            }
            else if (item.callbackUrl) {
                // 药品推荐需要经纬度，才能实现o2o购药
                getDetailLocation().then(res => {
                    request({
                        url: item.callbackUrl,
                        data: res
                    }).then(resp => {
                        this.$emit('popup', resp.data);
                    });
                });
            }
        },
        onNavigate(item) {
            if (item.url) {
                navigate({
                    url: item.url
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.flex {
    display: -webkit-flex;
    display:         flex;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
}
.icon-and-text-wrap {
    display: flex;
    align-items: center;
}
.line-clamp-wrap {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.icon-popup {
    width: 7px;
    height: 7px;
    vertical-align: text-top;
    padding-top: 0.04rem;
}
</style>
