<template>
    <view class="b-comment c-color-normal c-font-normal">
        <!-- 患者信息 -->
        <view v-if="comment.patientName" class="comment-user color-333 c-font-17">
            患者: {{ comment.patientName }}
            <view class="name-tag" v-if="comment.serviceType">
                {{ comment.serviceType }}
            </view>
        </view>

        <!-- 时间 -->
        <!-- <view v-if="comment.commentTime" class="comment-appoint c-color-gray c-font-13">
            {{ comment.commentTime }}
            <view v-if="comment.commentType" class="comment-type">| {{ comment.commentType }}</view>
        </view> -->
        <!-- 医院  服务信息 -->
        <view class="c-gap-inner-top-small c-gap-inner-bottom-small" :class="comment.content ? 'dotted-line' : ''">
            <!-- <view v-if="comment.hospitalName">就诊医院：{{ comment.hospitalName }}</view> -->
            <view v-if="comment.docServiceScore || comment.hosServiceScore" class="comment-service">
                <view v-if="comment.docServiceScore" class="c-gap-right-middle">{{ comment.docServiceScore.title }}：<text class="highlight">{{ comment.docServiceScore.score }}</text></view>
                <view v-if="comment.hosServiceScore" class="comment-service-doc c-gap-inner-left-middle">{{ comment.hosServiceScore.title }}：<text class="highlight">{{ comment.hosServiceScore.score }}</text></view>
            </view>
        </view>

        <!-- 内容 -->
        <view v-if="comment.content" :class="['c-gap-inner-top-small' , 'line', 'c-line-clamp3']">
            {{ comment.content }}
        </view>
    </view>
</template>

<script>

/**
 * @file 评价模块 新增点赞和拓展
 * @author caimengyong
 *
*/
import Icon from '@baidu/med-ui/components/Icon/Icon';

import {request} from '../../utils/request';

import { apiHost } from '../../utils/conf';


export default {
    config: {
        component: true
    },
    props: {
        comment: {
            type: Object,
            default: () => {}
        },
        clamp: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {

        };
    },
    components: {
        'c-icon': Icon
    },
    watch: {

    },
    mounted() {

    },
    computed: {

    },
    methods: {

    }
};
</script>
<style lang="less" scoped>
.b-comment {
    box-shadow: 0 3px 20px rgba(0, 0, 0, .08);
    box-sizing: border-box;
    border-radius: .08rem;
    padding: 0.1rem 0.15rem 5PX 0.15rem;
    position: relative;
    .comment-user {
        line-height: 24px;
        font-weight: bold;
        height: 30px;
        font-size: 17px;
    }
    .name-tag {
        padding-left: 5px;
        padding-right: 5px;
        border: 1px solid #CCF4F4;
        border-radius: 24px;
        font-size: 10px;
        color: #00C8C8;
        display: inline;
        // margin-left: 5px;
        height: 16px;
        font-size: 10px;
        font-weight: 400;
    }
    .comment-appoint {
        position: absolute;
        right: .14rem;
        top: 10px;
        .comment-type {
            display: inline;
        }
    }
    .comment-service {
        display: flex;
        margin-top: -3px;
        &-doc {
            position: relative;
            &::before {
                content: '';
                width: 1px;
                height: 16px;
                background-color: #ccc;
                position: absolute;
                z-index: 1;
                left: 0;
                top: 3px;
            }
        }
    }
    .comment-user-star {
        .Unfold {
            color: #808080;
            float: left;
            font-size: 13px;
            &::after {
                clear: both;
            }
        }
        .user-star {
            font-size: 13px;
            float: right;
            &::after {
                clear: both;
            }
        }
    }
    .dotted-line {
        background-image: linear-gradient(to right, rgba(204, 204, 204) 33%, rgba(255,255,255,0) 0%);
        background-position: bottom;
        background-size: 3px 1px;
        background-repeat: repeat-x;
        padding-bottom: 10px;
    }
    .line {
        padding-top: 10px;
    }
    .highlight {
        color: #ff6050;
    }
    .color-333 {
        color: #333;
    }
}
</style>


