<template>
    <view v-if="comments" class="comment-scroll c-gap-inner-bottom-small">
        <b-title
            :text="comments.title"
            :more-text="comments.moreText"
            :more-url="comments.moreTextUrl"
            :url="comments.moreTextUrl"
            :praise-rate="comments.praiseRate"
            log-name="ghappoint-comment"
        />
        <view 
            v-if="comments.commentTags && comments.commentTags.length" 
            class="static-padding c-gap-top c-gap-bottom-small"
        >
            <view
                v-for="(tag, tagIndex) in allTagList"
                :key="tagIndex"
                :class="[
                    'comments-tag', 
                    'c-font-13', 
                    'c-gap-right', 
                    'c-gap-bottom', 
                    tagIndex === 0 ? 'defaultChooseAll' : '',
                ]"
                @tap="onTapCommentTag($event, tag.text, tagIndex)"
            >
                {{ tag.text }}({{ tag.value }})
            </view>
        </view>
        <view 
            v-if="comments.comment && comments.comment.length" 
            class="static-padding"
            :class="comments.commentTags && comments.commentTags.length ? '' : 'c-gap-top'"
        >
            <view v-if="comments.comment.length === 1" class="scroll-comment c-gap-bottom-large">
                <b-comment
                    :data="comments.comment[0]"
                    :clamp="true"
                    bg-color="#fff"
                    is-no-shadow
                    @tap="handleChooseAllCommentTag('', 'register_comments', comments.comment[0].commentId)"
                />
            </view>
            <scroll-view
                v-else
                scroll-x
                :lower-threshold="60"
                class="scroll-comment"
            >
                <b-comment
                    v-for="(item, itemIndex) in allCommentsList"
                    :key="'comment-' + itemIndex"
                    :data="item"
                    :clamp="true"
                    class="comment-item c-gap-bottom-large"
                    bg-color="#fff"
                    is-no-shadow
                    @tap="handleChooseAllCommentTag('', 'register_comments', item.commentId)"
                />
            </scroll-view>
        </view>
    </view>
</template>
<script>

/**
 * @file 评价业务组件
 * @author zhanghang12
 */

import Comment from './comment';
import Title from './title';
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        comments: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            allTagList: [],
            allCommentsList: []
        };
    },
    watch: {
        'comments.commentTags'(val) {
            this.allTagList = val && val.slice(0, 4);
        },
        'comments.comment'(val) {
            this.allCommentsList = val;
        }
    },
    components: {
        'b-comment': Comment,
        'b-title': Title,
    },
    methods: {
        handleChooseAllCommentTag(index, tab, domId) {
            navigate({
                url: this.comments.moreTextUrl + `&tagIndex=${this.tagIndex}&tab=${tab}&domId=${domId}`,
            });
        },
        // 点击评价tag
        onTapCommentTag(e, tag, tagIndex) {
            this.tagIndex = tagIndex;
            if (!tag || !this.comments.moreTextUrl) {
                return;
            }
            navigate({
                url: this.comments.moreTextUrl + `&tag=${tag}&tagIndex=${tagIndex}&tab=register_comments`,
                extra: {
                    logName: 'ghappoint-comment-tag'
                }
            });
        },
    }
};
</script>

<style lang="less" scope>
    .comments-tag {
        background-color: #f6f6f6;
        color: #555;
        display: inline-block;
        border-radius: .15rem;
        height: .3rem;
        line-height: .3rem;
        padding: 0 .08rem;
    }
    .static-padding {
        padding-left: .17rem;
        padding-right: .17rem;
    }
    .defaultChooseAll {
        background-color: #489AF6;
        color: #ffffff;
        font-weight: 600;
    }
    .divide-gray {
        width: 100%;
        height: 8px;
        background-color: #f6f6f6;
    }
    .scroll-comment {
        white-space: nowrap;
        width: 100%;
        .comment-item {
            width: 3.23rem;
            vertical-align: top;
            display: inline-block;
            margin-right: .08rem;
            height: 1.6rem;
            @media (max-width: 361px) {
                height: 1.73rem;
            }
        }
    }
</style>
