<template>
    <view class="relate-entries">
        <view v-if="title" class="relate-entries__header c-title">
            <view class="relate-entries__header__text">{{ title }}</view>
            <view class="relate-entries__header__icon"><c-icon name="baidu-logo" font-size="19px"/></view>
        </view>
        <view class="relate-entries__words">
            <view
                v-for="(word, index) in list"
                :key="index"
                class="relate-entries__words__word c-row">
                <view
                    v-if="word[0]"
                    class="relate-entries__words__word--left c-span6 c-line-clamp1"
                    @tap="tap(word[0], index)"
                >
                    <text>{{ word[0].term }}</text>
                </view>
                <view
                    v-if="word[1]"
                    class="relate-entries__words__word--right c-span6 c-line-clamp1"
                    @tap="tap(word[1], index)"
                >
                    <text>{{ word[1].term }}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
/**
 *  @file 大家还在搜
 *  @author yantingxi
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navToBdBoxH5} from './../../../utils/navigate';
import {send} from './../../../utils/log';
export default {
    config: {
        component: true
    },
    props: {
        list: {
            type: Array,
            default: () => {}
        },
        title: {
            type: String,
            default: ''
        }
    },
    components: {
        CIcon
    },
    methods: {
        tap(word, index) {
            navToBdBoxH5(word.url_tcurl, {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });

            send({
                type: 'l',
                action: 'navigate',
                extra: {
                    mod: 'relate-entries-' + index
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.relate-entries {
    padding: 0 17px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    &__header {
        display: flex;
        padding-top: 15px;
        color: #999;
        margin-bottom: 2px;

        &__icon {
            margin: 0 0 -2px 3px;
        }
    }

    &__words {
        &__word {
            height: 35px;
            line-height: 35px;

            &--right {
                &::before {
                    content: '';
                    position: relative;
                    top: 2px;
                    display: inline-block;
                    height: 14px;
                    border-left: 1px solid #dadada;
                    margin-right: 4px;
                }
            }
        }
    }
}
</style>
