<template>
    <view class="card_index">
        <!-- 顶级机构横幅 -->
        <view v-if="topCardData.headerContent" class="bag-card">
            <view class="card_title">
                {{ topCardData.headerContent }}
            </view>
        </view>
        <!-- 卡片和医生信息 -->
        <view class="card" :class="!topCardData.headerContent ? 'card-radius' : ''">
            <view class="card__baseInfo">
                <view class="c-gap-bottom-large">
                    <view class="card__baseInfo__flex">
                        <!-- 药品中文名和拼音 -->
                        <view class="card__baseInfo__flex__left yd-header-name-flex c-font-wb c-color-333">
                            <view
                                v-if="firstName || lastName"
                                class="card__baseInfo__flex__left__name"
                                :class="ttsIndex === -1 && isPlaying ? 'c-color-main' : ''"
                                @tap="handleParse"
                            >
                                {{ firstName }}<view v-if="showIconR" 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>{{ lastName }}
                            </view>
                            <view v-if="topCardData.phoneticText" class="c-font-small c-color-gray phonetic">
                                [ {{ topCardData.phoneticText }} ]
                            </view>
                        </view>
                        <!-- 医典健康logo -->
                        <view class="card__baseInfo__flex__right card__baseInfo__flex__right__img">
                            <c-image
                                has-compress
                                width="84px"
                                height="47px"
                                src="https://med-fe.cdn.bcebos.com/logo/yd_new_logo%20.png"
                                :is-round="false"
                                :hack-white-stroke="false"
                            />
                        </view>
                    </view>
                    <view
                        v-if="topCardData.tagList && topCardData.tagList.length > 0"
                        class="card__baseInfo__tags"
                    >
                        <view
                            v-for="(item, index) in topCardData.tagList"
                            :key="index"
                            :class="['card__baseInfo__tags__tag', item.linkUrl ? 'c-bg-green' : '']"
                        >
                            <view
                                v-if="item.linkUrl"
                                class="card__baseInfo__tags__tag__link"
                                @tap="goXcxUrl(item.linkUrl, item)"
                            >
                                <text class="c-color-green">{{ item.name }}</text>
                                <c-icon
                                    v-if="item.linkUrl"
                                    name="question-circle"
                                    font-size="12px"
                                    class="c-color-green"
                                />
                            </view>
                            <block v-else>
                                {{ item.name }}
                            </block>
                        </view>
                    </view>
                </view>
                <block
                    v-if="topCardData.showInfo && topCardData.showInfo.length"
                >
                    <view
                        v-for="(item, index) in topCardData.showInfo"
                        :key="index"
                    >
                        <!-- 常规字段 -->
                        <view v-if="item.type === 'common'" class="gray666 c-line-clamp2 no-margin-bottom flex">
                            <text class="flex-shrink">
                                {{ item.label }}：
                            </text>
                            <block>
                                <view
                                    v-if="item.linkUrl"
                                    class="flex"
                                    @tap="goXcxUrl(item.linkUrl, item)"
                                >
                                    <text>
                                        {{ item.text }}
                                    </text>
                                    <c-icon
                                        name="right"
                                        font-size="12px"
                                    />
                                </view>
                                <text v-else>
                                    {{ item.text }}
                                </text>
                            </block>
                        </view>
                        <!-- 药品包装 -->
                        <view v-if="item.type === 'img'" class="gray666 c-line-clamp2 no-margin-bottom flex">
                            <text class="flex-shrink">
                                {{ item.label }}：
                            </text>
                            <view
                                class="c-inline card_doctor_bottom_assure_view"
                                @tap="handleImageItemTap({item: item.text, index: 0})"
                            >
                                <view
                                    :style="{
                                        backgroundImage: 'url(' + item.text + ')',
                                        width: '15px',
                                        height: '15px',
                                        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="[{src: item.text}]"
                                    :index="imageViewerIndex"
                                    :show="isImageViewerShown"
                                    hidden-close
                                    @close="handleImageViewerClose"
                                />
                            </view>
                        </view>
                        <!-- 注释字段 -->
                        <view v-if="item.type === 'dialog'" class="notes c-line-clamp2 no-margin-bottom gray666">
                            <text class="gray666">
                                {{ item.label }}：
                            </text>
                            <text>
                                {{ item.text }}
                            </text>
                            <image
                                class="reminder-icon c-gap-left-small"
                                :class="notesUbcClass"
                                :data-show="index"
                                src="https://med-fe.cdn.bcebos.com/yd/reminder.png"
                                @tap="tipsClick(item)"
                            />
                        </view>
                        <!-- 可跳转字段 -->
                        <view v-if="item.type === 'link'" class="no-margin-bottom gray666 flex">
                            <text class="flex-shrink">
                                {{ item.label }}：
                            </text>
                            <view v-if="item.list && item.list.length" class="flex flex-warp">
                                <view
                                    v-for="(linkItem,index) in item.list"
                                    :key="index"
                                    class="common-link flex-shrink"
                                    @tap="goXcxUrl(linkItem.linkUrl)"
                                >
                                    <view v-if="linkItem.text" class="flex">
                                        <text class="c-color-main">
                                            {{ linkItem.text }}
                                        </text>
                                        <text v-if="index !== (item.list.length - 1)">
                                            ，
                                        </text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- 禁忌字段 -->
                        <view v-if="item.type === 'tag'" class="card__baseInfo__label">
                            {{ item.label }}：
                            <view class="card__baseInfo__label__desc" @tap="goTab">
                                <view class="card__baseInfo__label__desc__ul">
                                    <block v-if="item.list.disable">
                                        <view
                                            v-for="(tagItem,disableIndex) in item.list.disable"
                                            :key="disableIndex + 'dis'"
                                            class="
                                                card__baseInfo__label__desc__ul__li
                                                c-font-tiny card__baseInfo__label__desc__ul__li--red
                                            "
                                        >
                                            <view class="label">
                                                {{ tagItem }}
                                            </view>
                                        </view>
                                    </block>
                                    <block v-if="item.list.warning">
                                        <view
                                            v-for="(tagItem,tagIndex) in item.list.warning"
                                            :key="tagIndex + 1"
                                            class="
                                                card__baseInfo__label__desc__ul__li
                                                c-font-tiny card__baseInfo__label__desc__ul__li--yellow
                                            "
                                        >
                                            <view class="label">
                                                {{ tagItem }}
                                            </view>
                                        </view>
                                    </block>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <!-- 医生卡片信息 -->
            <view
                v-if="topCardData.doctor && topCardData.doctor.length"
                class="card__add c-color-gray c-gap-bottom-xsmall"
            >
                <c-doctor v-if="topCardData.doctor" :doctor-data="topCardData.doctor"/>
            </view>
            <view class="card_doctor_bottom_assure_view_wrap">
                <!-- 学术支持 -->
                <view v-if="topCardData.academicSupportContent" class="card_doctor_bottom_assure_view extra">
                    <view
                        class="card_doctor_bottom_assure_image"
                    >
                        <c-image
                            has-compress
                            width="16px"
                            height="16px"
                            radius="50%"
                            src="https://med-fe.cdn.bcebos.com/yd/jszc-icon.png"
                            :is-round="false"
                            :hack-white-stroke="false"
                        />
                    </view>
                    <view class="card_doctor_bottom_assure_text">
                        {{ topCardData.academicSupportContent }}
                    </view>
                </view>
                <!-- 医典三审三校背书文案 -->
                <view v-if="topCardData.reviserContent" class="card_doctor_bottom_assure_view extra">
                    <view
                        class="card_doctor_bottom_assure_image"
                    >
                        <c-image
                            has-compress
                            width="16px"
                            height="16px"
                            src="https://med-fe.cdn.bcebos.com/yd/ensure-icon.png"
                            :is-round="false"
                            :hack-white-stroke="false"
                        />
                    </view>
                    <view class="card_doctor_bottom_assure_text c-color-main">
                        {{ topCardData.reviserContent }}
                    </view>
                </view>
            </view>
        </view>
        <c-dialog
            :show="dialogShow"
            :btn-opts="[]"
        >
            <view
                v-for="(item, index) in dialogContent"
                :key="index"
                class="custom-area"
            >
                {{ item }}
            </view>
            <view
                slot="btn"
                class="btn-slot"
                @tap="dialogClose"
            >
                确认
            </view>
        </c-dialog>
    </view>
</template>
<script>
import CDoctor from './doctor';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import CImageViewer from '@baidu/med-ui/components/ImageViewer/ImageViewer';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate, navToBdBoxH5} from '@utils/navigate';
import {ubcSend} from '@utils/log';
import {isEmptyObject} from '@utils/core';
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },
    components: {
        CDoctor: CDoctor,
        CDialog,
        CImageViewer,
        CIcon,
        CImage
    },
    props: {
        /**
         * 数据集合
         */
        topCardData: {
            type: Object,
            default: () => ({})
        },
        notesUbcClass: {
            type: String,
            default: ''
        },
        /**
         * 额外参数信息
         */
        extra: {
            type: Object,
            default: () => ({})
        },
        /**
         * ttsIndex
         */
        ttsIndex: {
            type: Number,
            default: -1,
        },
        /**
         * 是否正在语音播放
         */
        isPlaying: {
            type: Boolean,
            default: false
        }
    },
    data() {
        this.firmObj = {};
        return {
            dialogShow: false,
            dialogContent: [],
            isImageViewerShown: false,
            imageViewerIndex: 0,
            firstName: '',
            lastName: '',
            showIconR: false,
        };
    },
    created() {
        if (this.topCardData.iconPosition >= 0) {
            this.showIconR = true;
        }
        this.firstName = this.topCardData.name.slice(0, this.topCardData.iconPosition);
        this.lastName = this.topCardData.name.slice(this.topCardData.iconPosition);
        this.firmObj = this.topCardData.showInfo.find(item => item.key === 'firm');
        if (this.firmObj && !isEmptyObject(this.firmObj)) {
            ubcSend({
                type: 'view',
                value: 'ydcty_yaochangxinxi1',
            });
        }
    },
    methods: {
        goXcxUrl(url, data) {
            if (!url) {
                return;
            }
            if (data.key === 'firm') {
                navToBdBoxH5(url);
                ubcSend({
                    type: 'clk',
                    value: 'ydcty_yaochangxinxi',
                });
                return;
            }
            navigate({url});
        },
        goTab() {
            /**
             * 跳转晋级
             */
            this.$emit('goTab', '用前须知', '慎用人群');
        },
        tipsClick(item) {
            this.$emit('notes');
            this.dialogContent = item.dialogContent;
            this.dialogShow = true;
        },
        dialogClose() {
            this.dialogShow = false;
        },
        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;
        },
        handleParse() {
            this.$emit('handleParse', -1);
        }
    }
};
</script>
<style lang="less" scoped>
    .gray666 {
        color: #666;
    }

    .card_index {
        .card_title {
            font-size: 14px;
            color: #00c8c8;
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            background: rgba(0, 211, 234, .1);
            padding-left: 15px;
        }

        .bag-card {
            border-radius: 8px 8px 0 0;
            margin: -1px auto;
            width: calc(100% - 15px);
            background: #fff;
        }

        .card {
            width: calc(100% - 15px);
            background: #fff;
            border-radius: 0px 0 8px 8px;
            padding: 17px 15px 15px 15px;
            box-sizing: border-box;
            margin: 0 auto;
            position: relative;

            .no-margin-bottom {
                font-size: 14px;
                margin-bottom: 0px;
            }

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

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

                    &__left {
                        min-width: 0;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: flex-end;
                        width: calc(100% - 84px);

                        .phonetic {
                            margin-bottom: -.02rem;
                        }

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

                        &__icon {
                            text-align: center;
                            height: 16px;
                            display: inline-block;
                        }

                        &__copyright {
                            width: 16px;
                            height: 16px;
                            vertical-align: top;
                        }
                    }

                    &__right {
                        padding-top: 3px;

                        &__img {
                            width: 84px;
                            height: 47px;
                            display: block;
                            position: absolute;
                            right: 0;
                        }
                    }
                }

                &__tags {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 10px;

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

                        &: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;
                    font-size: 14px;

                    &__desc {
                        width: 0;
                        flex: 1;

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

                            &__li {
                                padding: 0 7.5px;
                                border-radius: 9px;
                                margin-left: 8px;
                                height: 14px;
                                margin-bottom: 4px;

                                .label {
                                    line-height: 1;
                                    padding-top: 2px;
                                }

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

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

            &__add {
                padding-top: 15px;

                &__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;
                    }
                }
            }

            .notes {
                display: flex;
                align-items: center;

                .reminder-icon {
                    width: 13px;
                    height: 13px;
                    margin-left: 3px;
                }
            }
        }

        .card-radius {
            border-radius: 8px 8px;
        }

        .card_doctor_bottom_assure_view_wrap {
            .card_doctor_bottom_assure_view {
                &.extra {
                    align-items: flex-start;

                    .card_doctor_bottom_assure_image {
                        margin-top: 3px;
                    }
                }

                &:nth-child(2) {
                    margin-top: 2px;
                }
            }
        }

        .card_doctor_bottom_assure_view {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 14px;
        }

        .card_doctor_bottom_assure_image {
            width: 16px;
            height: 16px;
            margin-right: 9px;
        }

        .custom-area {
            font-size: 15px;
            color: #555;
            margin-bottom: 10px;
        }

        .custom-area:last-child {
            margin-bottom: 0;
        }

        .btn-slot {
            height: 45px;
            line-height: 45px;
            font-size: 17px;
            color: #00c8c8;
            text-align: center;
            border-top: 1px solid #f1f1f1;
            font-weight: bold;
        }

        .flex {
            display: flex;
        }

        .flex-shrink {
            flex-shrink: 0;
        }

        .flex-warp {
            flex-wrap: wrap;
        }
    }
</style>
