<template>
    <view class="strategy-info">
        <!-- tab区域 -->
        <view class="tab-container c-gap-top-large">
            <view class="tab-item-scroller">
                <template v-if="tabList && tabList.length > 0">
                    <text
                        v-for="(tab, index) in tabList"
                        :key="index"
                        :class="{
                            'active': index === 0,
                        }"
                        class="tab-item c-gap-inner-left-xmiddle c-gap-inner-right-xmiddle c-gap-right-middle"
                        @tap.stop="navigateTo(tab.link + '&tab=' + tab.text, 0, 'tab', '')"
                    >
                        {{ tab.text }}
                    </text>
                </template>
            </view>
        </view>
        <!-- 卡片区域 -->
        <view class="card-container">
            <template v-if="cardList && cardList.length > 0">
                <view
                    v-for="(card, index) in cardList"
                    :key="index"
                    class="card-item c-gap-top-large"
                    @tap.stop="navigateTo(card.url, 2, 'content',card.tracedata)"
                >
                    <!-- 多媒体 -->
                    <view class="media-box">
                        <view v-if="card.type === 'video'">
                            <view
                                :style="{
                                    'background-image': 'url(' + card.image + ')',
                                } | imgCompress('background-image', {column: 5})"
                                class="video"
                            />
                            <view class="video-backdrop">
                                <c-icon
                                    :font-size="iconSize"
                                    name="play"
                                    class="play-icon"
                                />
                            </view>
                        </view>
                        <view
                            v-if="card.type === 'image' && card.image"
                            class="imageText"
                        >
                            <view
                                :style="{
                                    backgroundImage: 'url(' + card.image + ')',
                                }"
                                class="image"
                            />
                        </view>
                        <view
                            v-if="card.type === 'text' && card.abstract"
                            class="text-box c-color-title c-font-normal"
                        >
                            <view class="text-content">
                                {{ card.abstract }}
                            </view>
                        </view>
                        <view class="card-info c-line-clamp1">
                            <view
                                v-if="card.labels && card.labels.length"
                                class="c-font-normal c-line-clamp1"
                                :class="{
                                    'c-color-gray': card.type === 'text',
                                }"
                            >
                                <text
                                    v-for="(item,tagIndex) in card.labels"
                                    :key="tagIndex"
                                    class="tags"
                                >{{ item }}</text>
                            </view>
                            <text
                                v-if="card.source"
                                class="bold c-line-clamp1"
                                :class="{
                                    'c-color': card.type === 'text',
                                }"
                            >{{ card.source }}</text>
                        </view>
                    </view>
                    <!-- 卡片描述 -->
                    <view
                        v-if="card.description"
                        class="description c-line-clamp2 c-gap-inner-right-small"
                    >{{ card.description }}</view>
                    <!-- 作者和点赞 -->
                    <view class="author-info c-line-clamp1">
                        <view class="author-name">
                            <c-image
                                v-if="card.authorPic"
                                has-compress
                                class="c-inline-block c-gap-right-small avatar"
                                :src="card.authorPic"
                                :extra="{column: 1}"
                                width="0.16rem"
                                height="0.16rem"
                                mode="widthFix"
                                :hack-white-stroke="false"
                            />
                            <text
                                v-if="card.authorName"
                                class="c-color-gray c-font-normal c-line-clamp1"
                            >{{ card.authorName }}</text>
                        </view>
                        <!-- 保留还没有定数据类型 -->
                        <!-- <view v-if="card.favoriteCount" class="c-color-gray c-font-normal">
                            {{ card.favoriteCount }}
                        </view> -->
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
/**
 * @file 医院主页第二版/就诊攻略
 * @author chenyang28
 * @categories 医院主页
 * @tags [sub-component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';
import * as Log from '../../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * tab列表
         */
        tabList: {
            type: Array,
            default: () => []
        },
        /**
         * 卡片列表
         */
        cardList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            iconSize: '30px'
        };
    },
    methods: {
        navigateTo(link, type = 0, flag = '', tracedata = '') {
            if (!link) {
                return;
            }
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: flag,
                    tracedata: tracedata
                }
            });
            navigate({
                url: link,
                urlType: type,
                log: {
                    ext: {
                        name: flag,
                        tracedata: tracedata
                    },
                    value: 'strategy',
                    type: 'click'
                }
            });
        }
    },
    components: {
        'c-icon': CIcon,
        CImage
    }
};
</script>

<style lang="less" scoped>
.strategy-info {
    .tab-container {
        height: 33px;
        overflow: hidden;

        .tab-item-scroller {
            display: flex;
            flex-direction: row;
            margin-top: -30px;
            transform: translateY(30px);
            padding-bottom: 30px;
            overflow-y: hidden;
            overflow-x: auto;

            .tab-item {
                display: inline-block;
                height: 33px;
                line-height: 33px;
                color: #1f1f1f;
                background: #f5f5f5;
                text-align: center;
                border-radius: 9px;
                flex: 0 0 auto;

                &.active {
                    font-family: PingFang-SC-Medium !important;
                    font-weight: 700;
                    color: #00c8c8;
                }
            }
        }
    }

    .card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: hidden;

        .card-item {
            box-sizing: border-box;
            width: 49%;
            flex: 0 0 49%;

            .media-box {
                position: relative;
                width: 100%;
                // height: 100px;
                // height: 24vw; /* 有些hack的写法, 如果不支持vw, 就使用默认120px值 */
                height: calc((100vw - 53px) / 1.5);
                border-radius: 9px;
                overflow: hidden;
            }

            .image,
            .video,
            .video-backdrop {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                border-radius: 9px;
            }

            .imageText {
                width: 100%;
                height: 100%;
            }

            .text-box {
                width: 100%;
                height: 100%;
                background: #f5f5f5;
                padding: 12px 8px;
                box-sizing: border-box;
            }

            .text-content {
                display: -webkit-box;
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                -webkit-line-clamp: 7;
                -webkit-box-orient: vertical;
                word-break: break-all;
            }

            .image,
            .video {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
            }

            .video-backdrop {
                .play-icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: #fff;
                }

                .play-time {
                    position: absolute;
                    bottom: 8px;
                    right: 8px;
                    color: #fff;
                    font-size: 12px;
                    line-height: 12px;
                }
            }

            .description {
                margin-top: 9px;
                line-height: 22px;
            }

            .author-info {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .author-name {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    overflow: hidden;
                }

                .avatar {
                    flex-shrink: 0;
                }
            }

            .card-info {
                position: absolute;
                bottom: 5px;
                padding: 0 8px;
                color: #fff;
                display: flex;
                align-items: center;
                width: 100%;
                justify-content: space-between;
                box-sizing: border-box;

                .tags {
                    flex-shrink: 0;
                    position: relative;
                    padding-right: 8px;
                    margin-right: 6px;

                    &::after {
                        content: "";
                        display: block;
                        width: 1px;
                        height: 14px;
                        background: #eee;
                        position: absolute;
                        right: 0px;
                        top: 50%;
                        transform: translateY(-50%);
                    }

                    &:last-child::after {
                        width: 0px;
                    }
                }

                .bold {
                    font-weight: bold;
                }
            }
        }

        .video-backdrop {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .17) 79%, rgba(0, 0, 0, .4) 99%);
        }

        .card-item:nth-child(odd) {
            margin-right: 1%;
        }

        .card-item:nth-child(even) {
            margin-left: 1%;
        }
    }
}
</style>

