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

        <!-- 时间 -->
        <view v-if="data.commentTime" class="comment-appoint c-color-gray c-font-13">
            {{ data.commentTime }}
            <view v-if="data.commentType" class="comment-type">| {{ data.commentType }}</view>
        </view>
        <!-- 医院  服务信息 -->
        <view class="c-gap-inner-top-small c-gap-inner-bottom-small" :class="data.content ? '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.content"
            :class="[
                'c-gap-inner-top-small',
                'line',
                'content' + data.commentId,
                isHasclamp ? 'c-line-clamp5' : '',
            ]"
            :data-classp="'content' + data.commentId"
        >
            {{ data.content }}
        </view>
        <view class="c-gap-inner-top-small comment-user-star">
            <!-- 设置展开查看和收回 -->
            <view class="Unfold"
                @tap="UnfornContent(!isHasclamp)"
                v-show="showUnforContent"
            >
                {{ isHasclamp ? '展开': '收起' }}
                <c-icon fontSize='5' :name="isHasclamp ? 'down' : 'up'"></c-icon>
            </view>

            <!-- 点赞 -->
            <view
                class="user-star"
                @tap="starComment(isPrase == '0' ? '1' : '0', data.commentId)"
            >
                <c-icon
                    :name="isPrase == '0' ? 'like' : 'like-solid'"
                    :style="isPrase == '0' ? '' : 'color: #ff6050'"
                ></c-icon>
                {{ isPrase == '0' ? '有用' : praseNumber }}
            </view>
        </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
    },
    options: {
        addGlobalClass: true
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        clamp: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            isHasclamp: false,

            isStar: false,

            praseNumber: 0,   // 点赞数
            isPrase: '', // 是否点赞成功
            showUnforContent: false, // 是否显示展开收起文字
        };
    },
    components: {
        'c-icon': Icon
    },
    mounted() {

        this.praseNumber = +this.data.praseNum;
        this.isPrase = this.data.isPrase;


        this.getWidth('.content' + this.data.commentId);

        setTimeout(() => {
            this.isHasclamp = this.clamp;
        }, 100)

    },
    computed: {

    },
    methods: {
        getWidth(className) {
            const query = this.$api.createSelectorQuery().select(className);
            query.boundingClientRect(rect => {
                const {width, height} = rect || {};
                if (height > 130) {
                    this.showUnforContent = true;
                    this.isHasclamp = true;
                } else {
                    this.showUnforContent = false;
                }
            })
            .exec();
        },
        UnfornContent(value = true) {
            this.isHasclamp = value;
        },
        starComment(type, comment_id = '') {
            const data = {
                vn: 'med',
                comment_id: comment_id,
                type: type
            }

            request({
                url: apiHost + '/med/api/likecomment',
                data: data,
                isFirstScreen: false,
                isNeedLogin: true
            }).then(res => {
                const { status } = res.data || {};

                // 判断是否点赞成功 成功就改变点赞变量状态 来控制相关样式展示
                if (status == '1') {
                    this.isPrase = !this.isPrase;
                }
                // 点赞 +1    取消点赞 -1
                if (status == '1' && type == '1') {
                    this.praseNumber++;
                } else if (status == '1' && type == '0') {
                    this.praseNumber--;
                }

            }).catch(() => {
            });
        },

    }
};
</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 35px 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>


