<template>
    <view class="b-comment c-color-normal c-font-normal" :class="{'no-shadow': isNoShadow}" :style="{backgroundColor: bgColor}">
        <view class="comment-title">
            <view v-if="data.userName" class="comment-user c-font-17"> 患者：{{ data.userName }}</view>
            <view v-if="data.appointDate" class="comment-appoint c-color-gray c-font-13">{{ data.appointDate }}</view>
        </view>
        <view class="c-gap-inner-top-small  dotted-line color-333  c-gap-inner-bottom-small" :class="data.commentText ? 'dotted-line' : ''">
            <view v-if="data.hospitalName">就诊医院：{{ data.hospitalName }} </view>
            <view v-if="data.docServiceScore || data.hosServiceScore" class="comment-service">
                <view v-if="data.docServiceScore" class="c-gap-right-middle">{{ data.docServiceScore.title }}：<text class="highlight">{{ data.docServiceScore.score }}</text></view>
                <view v-if="data.hosServiceScore" class="comment-service-doc c-gap-inner-left-middle">{{ data.hosServiceScore.title }}：<text class="highlight">{{ data.hosServiceScore.score }}</text></view>
            </view>
        </view>
        <view v-if="data.commentText || constHeight" class="c-gap-inner-top-small" :class="clamp ? 'c-line-clamp3' : ''" :style="{height:constHeight}">{{ data.commentText }}</view>
    </view>
</template>

<script>

/**
 * @file 评价模块
 * @author wangying51
 *
*/
export default {
    config: {
        component: true
    },
    props: {
        data: Object,
        clamp: {
            type: Boolean,
            default: false
        },
        constHeight: String,
        bgColor: String,
        isNoShadow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        };
    },
    components: {
    },
    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: .02rem .14rem 0.1rem;
    height: 100%;
    position: relative;
    .comment-title {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }
    .comment-user {
        line-height: 24px;
        font-weight: bold;
        display: inline;
    }
    .comment-appoint {
        position: absolute;
        right: .14rem;
    }
    .comment-service {
        display: flex;
        &-doc {
            position: relative;
            &::before {
                content: '';
                width: 1px;
                height: 16px;
                background-color: #ccc;
                position: absolute;
                z-index: 1;
                left: 0;
                top: 3px;
            }
        }
    }
    .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;
    }
    .highlight {
        color: #ff6050;
    }
    .color-333 {
        color: #333;
    }
}
.no-shadow {
    box-shadow: none;
}
</style>


