<template>
    <view
        class="card-yd-drugs"
        @tap.stop="
            handleJump({
                url: data.button.url,
                urlType: data.button.urlType,
            })
        "
    >
        <view class="card-yd-drugs__header c-gap-inner-top-xlarge c-gap-inner-bottom-large">
            <view v-if="data.title" class="card-yd-drugs__header__title c-font-sigma c-font-wb">{{ data.title }}</view>
            <view v-if="data.subtitle">{{ data.subtitle }}</view>
            <!-- <view v-if="data.type && data.type.length > 0 && !data.subtitle">
                <text v-for="(item, index) in data.type" :key="index" class="c-gap-right">{{ item }}</text>
            </view> -->
        </view>
        <view v-if="data.introduce" class="card-yd-drugs__content c-font-normal c-gap-inner-top-small">
            <view
                v-for="(introduce, index) in data.introduce"
                :key="index"
                class="card-yd-drugs__content--row"
            >
                <view v-if="introduce.title" class="card-yd-drugs__content__label">{{ introduce.title }}</view>
                <view class="card-yd-drugs__content__texts c-line-clamp2">
                    <view
                        v-if="introduce.text && introduce.type === '1'"
                        class="card-yd-drugs__content__texts__text"
                        @tap.stop="
                            handleJump({
                                url: introduce.url,
                                urlType: introduce.urlType,
                            })
                        "
                    >
                        {{ introduce.text }}
                    </view>
                    <view
                        v-if="introduce.items && introduce.items.length && introduce.type === '2'"
                        class="card-yd-drugs__content__texts__tags"
                    >
                        <view
                            v-for="(tag, tagIndex) in introduce.items"
                            :key="tagIndex"
                            class="card-yd-drugs__content__texts__tags__tag--inner c-gap-right-middle"
                            @tap.stop="
                                handleJump({
                                    url: tag.url,
                                    urlType: tag.urlType,
                                })
                            "
                        >
                            <view
                                :class="['card-yd-drugs__content__texts__tags__tag--' + tag.type]"
                                class="card-yd-drugs__content__texts__tags__tag"
                            >{{ tag.name }}</view>
                        </view>
                    </view>
                    <view
                        v-if="introduce.items && introduce.items.length && introduce.type === '3'"
                        class="card-yd-drugs__content__texts__list"
                    >
                        <text
                            v-for="(text, textIndex) in introduce.items"
                            :key="textIndex"
                            class="card-yd-drugs__content__texts__list__text"
                        >{{ text }}</text>
                    </view>
                </view>
            </view>
            <view
                v-if="data.button"
                class="card-yd-drugs__content__more c-gap-top-middle c-gap-bottom-xmiddle"
                @tap.stop="
                    handleJump({
                        url: data.button.url,
                        urlType: data.button.urlType,
                    })
                "
            >
                <view class="card-yd-drugs__content__more--inner">
                    <view v-if="data.button.text" class="card-yd-drugs__content__more__text">{{
                        data.button.text
                    }}</view>
                    <view class="card-yd-drugs__content__more__icon"/>
                </view>
            </view>
        </view>
        <view v-if="data.organization" class="card-yd-drugs__footer">
            <view
                class="card-yd-drugs__footer__organization c-gap-inner-bottom-small c-gap-bottom-middle c-line-clamp1"
            >
                <c-avatar
                    v-if="data.organization.portrait"
                    :src="data.organization.portrait"
                    :size="16"
                    border="1px solid #f2f2f2"
                />
                <view
                    v-if="data.organization.name"
                    class="card-yd-drugs__footer__organization__profile c-line-clamp1 c-gap-left-xmiddle"
                >{{ data.organization.name }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 药品
 * @author chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '@baidu/med-utils/lib/Mars';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';

export default {
    config: {
        component: true
    },
    components: {
        CAvatar
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        handleJump(params) {
            const __params = Object.assign({}, params, {
                log: {
                    type: 'clk',
                    value: 'yidianka'
                }
            });
            this.$emit('cardDrugs');
            navigate(__params);
        }
    }
};
</script>
<style lang="less" scoped>
.content-padding {
    padding-left: 13px;
    padding-right: 13px;
}
.card-yd-drugs {
    border-radius: 8px;
    overflow: hidden;

    &__header {
        .content-padding;
        color: #1f1f1f;
        // background: linear-gradient(134deg, rgb(0, 207, 163) 0%, rgb(5, 207, 205) 61%, rgb(0, 211, 234) 100%);
    }

    &__content {
        color: #1f1f1f;
        .content-padding;

        &--row {
            display: flex;
        }

        &__label {
            flex: 0 0 auto;
        }

        &__texts {
            margin-bottom: 0.03rem;
            flex: 1;

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

                &__tag {
                    margin-bottom: 2px;
                    font-size: 0.1rem;
                    line-height: 1.2;
                    border-radius: 21px;
                    padding: 0 4px;
                    font-weight: 400;
                    display: inline-block;
                    overflow: hidden;
                    white-space: nowrap;
                    vertical-align: middle;
                    color: #f33;
                    height: 1.1em;
                    box-sizing: content-box;
                    border: 1px solid rgba(255, 51, 51, 0.5);
                    background-color: rgba(255, 51, 51, 0.1);

                    &--2 {
                        color: #faa90e;
                        background-color: rgba(250, 169, 14, 0.1);
                        border-color: rgba(250, 169, 14, 0.5);
                    }
                }
            }

            &__list {
                &__text {
                    &:nth-child(n + 2) {
                        &::before {
                            content: '，';
                        }
                    }
                }
            }
        }

        &__more {
            display: flex;
            justify-content: center;

            &--inner {
                padding: 0.08rem 0.2rem;
                background: #f5f5f5;
                border-radius: 0.22rem;
                text-align: center;
                display: flex;
                align-items: center;
            }
            &__icon {
                display: inline-block;
                width: 0.14rem;
                height: 0.14rem;
                margin-left: 5px;
                overflow: hidden;
                transform: rotate(-90deg);
                background: url(https://health.baidu.com/static/health/assets/img/up.470bf178.png);
                background-size: 100%;
                background-repeat: no-repeat;
            }
        }
    }

    &__footer {
        .content-padding;

        &__organization {
            display: flex;
            align-items: center;

            &__profile {
                color: #858585;
            }
        }
    }
}
</style>
