<template>
    <view
        class="card-wenda"
        @tap.stop="onJump(wenda)"
    >
        <view class="card-wenda-q">
            <view class="card-wenda-q-tit c-font-small c-gap-right-small c-line-clamp1">问</view>
            <view class="c-font-medium c-color-title card-wenda-textc">{{ wenda.question || wenda.title }}</view>
        </view>
        <view class="card-wenda-a c-gap-top-small">
            <view class="card-wenda-a-tit c-gap-right-small">答</view>
            <view class="c-font-normal c-color-normal card-wenda-text c-line-clamp2">{{ wenda.answer }}</view>
        </view>
        <view class="card-wenda-doctor c-font-normal c-color-gray">
            <c-image
                v-if="wenda.expertPortrait"
                has-compress
                :src="wenda.expertPortrait"
                class="card-wenda-img"
                :is-round="true"
                :extra="{column: 1}"
                width="0.14rem"
                height="0.14rem"
            />
            <view class="c-line-clamp1">
                <text v-if="wenda.expertName" class="c-gap-left-middle">{{ wenda.expertName }}</text>
                <text v-if="wenda.expertDepartment" class="c-gap-left-middle">{{ wenda.expertDepartment }}</text>
                <text v-if="wenda.ctime" class="c-gap-left-middle">{{ wenda.ctime }}</text>
                <text v-if="wenda.expertRank" class="c-gap-left-small">{{ wenda.expertRank }}</text>
                <text v-if="wenda.hospitalName" class="c-gap-left-small">{{ wenda.hospitalName }}</text>
            </view>
            <c-label
                v-if="wenda.hospitalTag"
                :text="wenda.hospitalTag"
                color="gray"
                class="c-gap-left-small"
            />
        </view>
        <view :class="showBorder ? 'c-line-superfine-after c-gap-top' : ''"/>
    </view>
</template>

<script>
/**
 * @file 医典搜索卡片
 * @author chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
import CImage from '@components/common/image';
import {navigate, navToBdBoxH5} from '../../utils/navigate';
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import * as Log from '../../utils/log';

export default {
    config: {
        component: true
    },
    components: {
        CLabel,
        CImage
    },
    props: {
        /* 问答数据 */
        wenda: {
            type: Object,
            default: () => {}
        },
        /* 是否显示边框 */
        showBorder: {
            type: Boolean,
            default: false
        },
        /** 日志相关额外参数 */
        extra: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        onJump(data) {
            if (data.unifiUrl) {
                navigate({url: data.unifiUrl, extra: this.extra});
            }
            else if (data.url) {
                Log.send({
                    type: 'l',
                    action: 'navigate',
                    extra: Object.assign({}, this.extra)
                });
                navToBdBoxH5(data.url);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.card-wenda {
    padding-top: 10px;

    .card-wenda-q,
    .card-wenda-a {
        display: flex;
        justify-content: flex-start;
    }

    .card-wenda-a-tit,
    .card-wenda-q-tit {
        position: relative;
        top: 4px;
        background: #00c8c8;
        color: #fff;
        border-radius: 3px;
        width: 17px;
        min-width: 17px;
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        text-align: center;
    }

    .card-wenda-q-tit {
        background: #ff7061;
    }

    .card-wenda-text {
        width: calc(100% - 22px);
    }

    .card-wenda-doctor {
        display: flex;
        align-items: center;
    }

    .card-wenda-img {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        border-radius: 10px;
    }
}
</style>
