<template>
    <view class="b-enc-i" @tap.stop="onTap(card.url, card.title)">
        <view class="b-enc-i_top">
            <c-image
                has-compress
                :src="card.img"
                width="100%"
                height="auto"
                mode="widthFix"
                :hack-white-stroke="false"
                :is-round="false"
            />
            <!-- 无视频，暂时去掉
            <c-icon
                class="b-enc-i_play"
                name="play"
                font-size="36px"
            />
            -->
        </view>
        <view class="b-enc-i_cont">
            <view
                class="
                    c-font-medium
                    c-color-333
                    c-font-wb
                    c-gap-inner-top-small
                    c-gap-c-gap-inner-bottom-small
                    c-line-clamp1
                "
            >{{ card.title }}</view>
            <view class="b-enc-i_text c-font-normal c-color-333 c-gap-inner-top-small c-gap-inner-bottom">
                <view class="b-enc-i_photo c-gap-right">
                    <c-image
                        v-if="card.expertIcon"
                        has-compress
                        :src="card.expertIcon"
                        width="0.17rem"
                        height="0.17rem"
                        mode="aspectFit"
                        :extra="{column: 1}"
                        :hack-white-stroke="false"
                    />
                </view>
                <text v-if="card.experName" class="c-gap-right">{{ card.experName }}</text>
                <text v-if="card.expertPosition">{{ card.expertPosition }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
import {ubcSend} from '@utils/log';
/**
 * @file 体检百科card
 * @author zhanngqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
 */

/* global Page swan  getApp */

import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    components: {
        CImage
    },
    props: {
        /**
         * 信息
         */
        card: {
            type: Object,
            default: () => {}
        },
        // ubc打点必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onTap(url, title) {
            // !!!体检埋点
            ubcSend({
                page: this.page,
                type: 'clk',
                value: 'expert',
                ext: {
                    pd: 'tj',
                    'value_type': 'expert_id',
                    'value_id': title
                }
            });
            navigate({url});
        }
    }
};
</script>
<style lang="less" scoped>
.b-enc-i {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;

    &_cont {
        min-width: 2.66rem;
        padding: 0 13px;
        background: #fafafa;
    }

    &_img {
        display: block;
        width: 100%;
        height: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    &_photo {
        width: 17px;
        height: 17px;
        border-radius: 17px;
        border: 1px solid #f5f5f5;
        overflow: hidden;
    }

    &_text {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    &_top {
        position: relative;
    }

    &_play {
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
        text-shadow: 0 0 5px rgba(0, 0, 0, 20%);
    }
}
</style>
