<template>
    <view class="panel-info c-font-normal">
        <navigate
            v-if="item.title"
            :url="item.url">
            <view class="panel-info-title wrapper-sm">
                <view class="c-font-medium">{{item.title}}</view>
                <c-icon
                    v-if="item.url"
                    name="right"
                    font-size="14px"
                    class="panel-info-title-icon c-inline-block"></c-icon>
            </view>
            <view
                v-if="item.infos && item.infos.length"
                class="panel-info-infos wrapper-sm c-gap-inner-top c-gap-inner-bottom-small">
                <view
                    v-for="(infoItem, i) in item.infos"
                    :key="i"
                    :class="{
                        'c-gap-top-small': i !== 0
                    }"
                    class="c-row info-item">
                    <view
                        v-if="infoItem.title"
                        class="c-span1 info-item-tit c-color-gray">
                        {{infoItem.title}} ：
                    </view>
                    <view class="c-span1 info-item-cic">
                        <view
                            v-if="infoItem.info"
                            class="c-color">
                            {{infoItem.info}}
                        </view>
                        <view
                            v-if="infoItem.drugs && infoItem.drugs.length"
                        >
                            <view
                                v-for="(dItem, j) in infoItem.drugs"
                                :key="j"
                            >
                                <text class="c-color c-gap-right">{{dItem.titleName}}</text><text class="c-color-gray c-font-small">
                                    {{dItem.spec}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="item.from"
                class="wrapper-sm">
                <view class="panel-info-from c-color-gray c-font-13">
                    {{item.from}}
                </view>
            </view>
        </navigate>
    </view>
</template>

<script>
/**
* @file im信息panel
* @author zhangeryi
*/
import Navigate from '../../components/common/navigate';
import Icon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    props: {
        item: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    components: {
        'navigate': Navigate,
        'c-icon': Icon
    }
};
</script>

<style lang="less" scoped>
.wrapper-sm {
    padding-left: .12rem;
    padding-right: .12rem;
}
.panel-info {
    background-color: #fff;
    border-radius: 8px;
    &-title {
        background: rgba(0,200,200, .08);
        color: #00C8C8;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-icon {
            color: #00C8C8;
        }
    }
    &-infos {
        .info-item {
            &-tit {
                flex: none;
                white-space: nowrap;
                width: auto;
            }
        }
    }
    &-from {
        border-top: 1px solid #f1f1f1;
        padding: 9px 0;
        line-height: 19px;
    }
}
</style>