<template>
    <view class="appointlist-comments">
        <view class="appointlist-comments__header">
            <view v-if="comment.title" class="appointlist-comments__header__title">
                <text class="c-font-wb">{{ comment.title }}</text>
                <text v-if="comment.commentCount" class="c-font-medium c-color">({{ comment.commentCount }})</text>
            </view>
            <c-navigate
                v-if="comment.commentCount > comment.comment.length"
                :url="comment.moreTextUrl"
                :extra="{
                    mod: 'appointlist-comments-more',
                }"
                class="c-color-gray c-font-normal"
            >
                <text>{{ comment.moreText }}</text>
                <c-icon name="right" font-size="14px"/>
            </c-navigate>
        </view>
        <view class="appointlist-comments__comments">
            <view
                v-for="(comment, commentIndex) in comment.comment"
                :key="commentIndex"
                :class="{
                    'c-gap-top': commentIndex !== 0,
                }"
                class="appointlist-comments__comments__comment"
                @tap="handleCommentTap"
            >
                <view class="appointlist-comments__comments__header">
                    <text class="c-font-wb">{{ comment.userName }}</text>
                    <text class="c-color-default c-font-normal">{{ comment.appointDate }}</text>
                </view>
                <view class="c-line-clamp2 c-gap-top-small">{{ comment.commentText }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 评论
 * @author 颜廷熙
 * @categories 业务组件
 * @tags [component]
 */

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CNavigate from '@baidu/med-ui/components/Navigate/Navigate';
import {Mars as MarsUtils} from '@baidu/med-utils';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 评论数据
         */
        comment: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {};
    },
    components: {
        CIcon,
        CNavigate
    },
    methods: {
        handleCommentTap() {
            this.comment.moreTextUrl && MarsUtils.navigate({
                url: this.comment.moreTextUrl,
                extra: {
                    mod: 'appoint-comment-item'
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.appointlist-comments {
    padding: .15rem .12rem;
    &__header {
        display: flex;
        justify-content: space-between;
        font-size: .19rem;
        color: #1F1F1F;
    }
    &__comments {
        margin-top: .1rem;
        &__header {
            color: #1F1F1F;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
