<template>
    <view class="card">
        <view class="card__baseInfo">
            <view class="card__baseInfo__flex">
                <view class="card__baseInfo__flex__left yd-header-name-flex c-font-wb c-color-333">
                    <view class="card__baseInfo__flex__left__name">
                        {{ topCardData.name }}
                    </view>
                    <view v-if="topCardData.drugType * 1 === 3" class="card__baseInfo__flex__left__icon">
                        <image
                            class="card__baseInfo__flex__left__copyright"
                            src="https://med-fe.cdn.bcebos.com/yd/dict_icon_copyright.png"
                        />
                    </view>
                    <view
                        v-if="topCardData.phonetic"
                        class="c-font-small c-color-gray c-gap-left c-gap-bottom-small"
                    >
                        [ {{ topCardData.phonetic }} ]
                    </view>
                </view>
                <view class="card__baseInfo__flex__right">
                    <c-image
                        has-compress
                        :is-round="false"
                        :hack-white-stroke="false"
                        width=".52rem"
                        height=".42rem"
                        src="https://med-fe.cdn.bcebos.com/yd%2Fyd_base_logo.png"
                    />
                </view>

            </view>
            <view
                v-if="topCardData.tagList && topCardData.tagList.length > 0"
                class="card__baseInfo__tags c-gap-bottom"
            >
                <view
                    v-for="(item, index) in topCardData.tagList"
                    :key="index"
                    :class="['card__baseInfo__tags__tag', item.url ? 'c-bg-green' : '']"
                >
                    <view
                        v-if="item.url"
                        class="card__baseInfo__tags__tag__link"
                        @tap="goXcxUrl(item.url, 0, 'tag_insurance', 'business')"
                    >
                        <text class="c-color-green">{{ item.text }}</text>
                        <c-icon
                            v-if="item.url"
                            name="question-circle"
                            font-size="12px"
                            class="icon c-color-green"
                            :class="notesUbcClass"
                            @tap="tipsClick"
                        />
                    </view>
                    <block v-else>
                        <text>{{ item.text }}</text>
                    </block>
                </view>
            </view>
            <view
                v-for="(item, index) in topCardData.lineList"
                :key="index"
                class="c-line-clamp2 no-margin-bottom"
            >
                {{ item.title }}：{{ item.value }}
            </view>
            <view v-if="topCardData.firm && topCardData.firm.name" class="c-line-clamp2 no-margin-bottom">
                <text class="c-inline">{{ topCardData.firm.caption }}：</text>
                <view
                    class="c-inline"
                    @tap="goXcxUrl(topCardData.firm.url, topCardData.firm.urlType, 'drug_firm', 'business')"
                >
                    <text>{{ topCardData.firm.name }}</text>
                    <c-icon
                        v-if="topCardData.firm.url"
                        name="right"
                        font-size="12px"
                        class="top-right-icon icon"
                    />
                </view>
            </view>
            <view v-if="topCardData.businessImg" class="c-line-clamp2 no-margin-bottom">
                <text class="c-inline">药品包装：</text>
                <view class="c-inline" @tap="handleImageItemTap({item: imageList[0], index: 0})">
                    <view
                        v-for="(item, index) in imageList"
                        :key="'img' + index"
                        :style="{
                            backgroundImage: 'url(' + item.src + ')',
                            width: '15px',
                            height: '15px',
                            zIndex: 2001,
                            backgroundSize: 'cover',
                            backgroundPosition: 'center',
                        }"
                        class="c-inline-block c-gap-right-small"
                    />
                    <text class="c-inline c-color-green">点击查看</text>
                    <c-image-viewer
                        :img-list="imageList"
                        :index="imageViewerIndex"
                        :show="isImageViewerShown"
                        hidden-close
                        @close="handleImageViewerClose"
                    />
                </view>
            </view>
            <view v-if="topCardData.taboo && topCardData.taboo.length" class="card__baseInfo__label">
                禁忌：
                <view class="card__baseInfo__label__desc" @tap="goTab">
                    <view class="card__baseInfo__label__desc__ul">
                        <view
                            v-for="(item, index) in topCardData.taboo"
                            :key="'taboo' + index"
                            class="card__baseInfo__label__desc__ul__li c-font-tiny"
                            :class="
                                item.type === '1'
                                    ? 'card__baseInfo__label__desc__ul__li--red'
                                    : 'card__baseInfo__label__desc__ul__li--yellow'
                            "
                        >
                            {{ item.name }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="topCardData.doctor || topCardData.organizationList" class="card__add c-color-gray">
            <c-doctor v-if="topCardData.doctor" :doctor-data="topCardData.doctor"/>
            <view
                v-for="(item, index) in topCardData.organizationList"
                :key="index"
                class="card__add__doctor c-font-small c-line-clamp1"
                @tap="goXcxUrl(topCardData.organizations.url)"
            >
                {{ item.title }}：
                <view class="card__add__doctor__headers">
                    <view class="card__add__doctor__headers__header">
                        <c-image
                            v-for="(imgItem, imgIndex) in item.organization"
                            :key="'organization' + imgIndex"
                            has-compress
                            width=".2rem"
                            height=".2rem"
                            :is-round="false"
                            :hack-white-stroke="false"
                            :src="imgItem.portrait + '@s_0,w_100,l_1,f_jpg,q_100'"
                            :extra="{column: 1}"
                        />
                    </view>
                </view>
                {{ item.name }}
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file 医典落地页顶部卡片
 * @author yumingzhi
 * @categories
 * @tags
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';

import CImageViewer from '@baidu/med-ui/components/ImageViewer/ImageViewer';
import Doctor from './doctor';
import {navigate} from '@utils/navigate';
import {ubcSend} from '@utils/log';
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },
    components: {
        CDoctor: Doctor,
        CIcon,
        CImageViewer,
        CImage
    },
    props: {
        /**
         * 数据集合
         */
        topCardData: {
            type: Object,
            default: () => ({})
        },
        /**
         * 额外参数信息
         */
        extra: {
            type: Object,
            default: () => ({})
        },
        notesUbcClass: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            imageList: [],
            imageViewerIndex: 0,
            isImageViewerShown: false
        };
    },
    created() {
        this.topCardData.businessImg && this.imageList.push({src: this.topCardData.businessImg});
    },
    methods: {
        goXcxUrl(url, urlType = 0, tag = '', module = '') {
            if (!url) {
                return;
            }

            if (tag && module) {
                ubcSend({
                    type: 'clk',
                    value: tag,
                    ext: {
                        pd: 'act',
                        module: module,
                        contentid: this.extra.contentid
                    }
                });
            }

            navigate({url, urlType});
        },
        goTab() {
            /**
             * 跳转晋级
             */
            this.$emit('goTab', '用前须知', '慎用人群');
        },
        handleImageItemTap(obj) {
            if (!obj.item) {
                return;
            }

            ubcSend({
                type: 'clk',
                value: 'show_drug_image',
                ext: {
                    pd: 'act',
                    module: 'business',
                    contentid: this.extra.contentid
                }
            });

            this.imageViewerIndex = obj.index;
            this.isImageViewerShown = true;
        },
        handleImageViewerClose() {
            this.isImageViewerShown = false;
        },
        tipsClick() {
            this.$emit('tipsClick');
        }
    }
};
</script>
<style lang="less" scoped>
.card {
    width: calc(100% - 20px);
    background: #fff;
    border-radius: 8px;
    padding: 17px 20px 10px 20px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;

    .no-margin-bottom {
        margin-bottom: 0;
    }

    &__baseInfo {
        color: #666;
        font-size: 12px;
        border-bottom: 1px solid #f1f1f1;
        overflow: hidden;
        padding-bottom: 6px;

        &__flex {
            display: flex;
            // align-items: center;
            align-items: flex-start;
            justify-content: space-between;

            &__left {
                min-width: 0;
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                align-items: flex-end;

                &__name {
                    font-size: 28px;
                    line-height: 34px;
                }

                &__icon {
                    text-align: center;
                    height: 16px;
                    align-self: flex-start;
                }

                &__copyright {
                    width: 16px;
                    height: 16px;
                }
            }

            &__right {
                padding-top: 3px;

                &__img {
                    width: 52px;
                    height: 42px;
                    display: block;
                }
            }
        }

        &__tags {
            display: flex;
            flex-wrap: wrap;

            &__tag {
                padding: 0 12px;
                border-radius: 14px;
                background: #f4f4f4;
                margin-left: 8px;

                &:nth-child(1) {
                    margin-left: 0;
                }

                &__link {
                    .icon {
                        margin-left: 4px;
                    }
                }
            }

            .c-bg-green {
                background: rgba(0, 200, 200, 0.10);
            }
        }

        &__label {
            display: flex;
            align-items: flex-start;
            box-sizing: border-box;

            &__desc {
                width: 0;
                flex: 1;

                &__ul {
                    display: flex;
                    flex-wrap: wrap;
                    margin-left: -8px;
                    margin-top: -2px;

                    &__li {
                        padding: 0 5px;
                        border-radius: 12px;
                        margin-left: 8px;
                        margin-top: 6px;
                        line-height: 14px;

                        &--yellow {
                            color: #ffa924;
                            border: 1px solid #ffa924;
                        }

                        &--red {
                            color: #f34636;
                            border: 1px solid #f34636;
                        }
                    }
                }
            }
        }
    }

    &__add {
        padding-top: 8px;

        &__doctor {
            margin-top: 4px;
            display: flex;
            align-items: center;

            &__headers {
                margin-right: 8px;
                display: flex;
                align-items: center;

                &__header {
                    width: 20px;
                    height: 20px;
                    display: block;
                    border-radius: 50%;
                    margin-left: -5px;

                    &:nth-child(1) {
                        margin-left: 0;
                    }
                }
            }

            &__message {
                width: 0;
                flex: 1;
            }
        }
    }
}
</style>
