<template>
    <view
        class="comment-panel wrapper c-gap-inner-top c-gap-inner-bottom"
    >
        <view class="comment-panel__title" @tap="onJump(data.url)">
            <text class="c-font-big tit-text">{{ data.title }}</text>
            <view>
                <text v-if="data.rate" class="rate">好评率{{ data.rate }}%</text>
                <view
                    v-if="data.url"
                    class="m-icon m-icon-next-icon right-icon"
                    :style="{
                        'color': data.rate ? '#FD503E' : '#858585',
                        display: 'inline',
                    }"
                />
            </view>
        </view>
        <scroll-view
            v-if="data.tags && data.tags.length >= 2"
            scroll-x
            scroll-with-animation
            class="comment-panel__tags"
        >
            <c-navigate
                v-for="(tag, i) in data.tags"
                :key="i"
                :url="tag.url"
                class="c-inline-block"
            >
                <view
                    :class="['comment-panel__tags__item', tag.color && ('comment-panel__tags__item__' + tag.color)]"
                    class="c-font-13 c-inline-block"
                >
                    <view v-if="tag.icon" :class="['m-icon', tag.icon, 'c-inline-block']"/>
                    <text class="c-inline-block">{{ tag.label }}</text>
                </view>
            </c-navigate>
        </scroll-view>
        <view
            v-if="data.list && data.list.length"
            class="comment-panel__list"
        >
            <view
                v-for="(item, i) in data.list"
                :key="i"
                class="comment-panel__list__item"
            >
                <c-navigate :url="data.url">
                    <view class="comment-panel__list__item__top" :style="{position: 'relative'}">
                        <view class="c-inline-block c-gap-right-middle">
                            <c-avatar
                                v-if="item.avatar"
                                :src="item.avatar"
                                :size="35"
                            />
                        </view>
                        <view>
                            <text class="c-inline-block name color-darkgray">{{ item.name }}</text>
                            <view class="comment-panel__list__item__top__time__wrap">
                                <c-stars
                                    :num="item.star"
                                    :size="13"
                                    icon-color="#FD503E"
                                    empty-icon="star-solid"
                                    empty-icon-color="#E0E0E0"
                                    :show-text="false"
                                    class="star"
                                />
                                <text class="color-gray time">{{ item.time }}</text>
                            </view>
                        </view>
                        <c-image
                            v-if="false"
                            :src="'https://med-fe.cdn.bcebos.com/physical/high_quality_tag.png'" 
                            :style="{position: 'absolute', right: 0}" 
                            :width="'34px'"
                            :height="'34px'"
                        />
                    </view>
                    <view class="comment-panel__list__item__content color-darkgray" :class="[isFold ? 'c-line-clamp2' : '']">
                        <text
                            v-for="item in []"
                            :key="item"
                            :style="{marginRight: '2px', color: '#858585'}"
                        >
                            #打酱油的仔
                        </text>
                        {{ item.content }}
                    </view>
                    <view
                        v-if="item.mediaInfo && item.mediaInfo.picList"
                        class="comment-panel__list__item__pic c-row"
                    >
                        <view
                            v-for="(pic, i) in item.mediaInfo.picList"
                            :key="i"
                            class="comment-panel__list__item__pic__item"
                            :style="{
                                'margin-left': i % 4 === 0 ? '' : '.03rem',
                            }"
                            @tap="previewImg(pic, item.mediaInfo.picList, item)"
                        >
                            <view class="comment-panel__list__item__pic__item__wrapper">
                                <view class="comment-panel__list__item__pic__item__wrapper__con">
                                    <view class="item-img">
                                        <c-image
                                            :src="pic"
                                            radius="8px"
                                            width="100%"
                                            height="100%"
                                            :is-round="false"
                                            def-src="https://med-drug.cdn.bcebos.com/%E7%99%BD%E5%9B%BE.jpg"
                                            :hack-white-stroke="false"
                                        />
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </c-navigate>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 评价组件
 * @author zhangeryi@baidu.com
 * @categories 评价组件
 * @tags [component]
 */
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CStars from '@baidu/med-ui/components/Stars/Stars';
import CImage from './image';
import CNavigate from './navigate';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /* 评价数据 */
        data: {
            type: Object,
            default: () => {}
        },
        /* 模块名 */
        module: {
            type: String,
            default: ''
        },
        /* 内容是否折叠 */
        isFold: {
            type: Boolean,
            default: false
        }
    },
    components: {
        CAvatar,
        CStars,
        CImage,
        CNavigate
    },
    methods: {
        previewImg(current, urls) {
            let preData = {
                current,
                urls
            };
            let picOrigin = this.data.mediaInfo.picOrigin || [];
            picOrigin.length && (preData.images = picOrigin.map(itm => {
                return {
                    'origin_url': itm.origin_url,
                    'url': itm.url
                };
            }));
            this.$api.previewImage(preData);
        },
        onJump(url) {
            if (url) {
                navigate({
                    url,
                    extend: {'act': 'commentPage', module: 'medstoredruginfo'}
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    margin: .1rem .1rem 0 .1rem;
    background: #fff;
    border-radius: 8px;
    padding: .1rem .15rem;
}
.comment-panel {
    &__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tit-text {
            font-weight: bold;
            color: #333333;
        }
        .right-icon {
            position: relative;
            right: -4px;
            font-size: .12rem;
        }
        .rate {
            color: #FD503E;;
            position: relative;
        }
    }
    &__tags {
        width: calc(100% + .1rem);
        white-space: nowrap;
        &__item {
            height: .28rem;
            line-height: .28rem;
            padding: 0 15px;
            background: #FDEFEE;
            border-radius: 45px;
            border-radius: 45px;
            margin-right: 8px;
            margin-top: .16rem;
            white-space: nowrap;
            color: #525252;
            &__red {
                background: #FDEFEE;
                color: #FD503E;
            }
            .m-icon {
                font-size: 13px;
                margin-right: 5px;
            }
        }
    }
    &__list {
        &__item {
            margin-top: .18rem;
            &__top {
                display: flex;
                flex-wrap: wrap;
                .name {
                    font-size: 16px;
                    line-height: 16px;
                }
                &__time__wrap {
                    display: flex;
                    .star {
                        position: relative;
                        top: -5px;
                    }
                    .time {
                        font-size: 14px;
                        line-height: 14px;
                        margin-left: 3px;
                    }
                }  
            }
            &__content {
                line-height: 21px;
            }
            &__pic {
                flex-wrap: wrap;
                justify-content: flex-start;
                &__item {
                    margin-top: 2px;
                    width: calc(25% - 6px);
                    &__wrapper {
                        width: 100%;
                        display: inline-block;
                        max-height: 160px;
                        border-radius: 8px;
                        overflow: hidden;
                        &__con {
                            position: relative;
                            padding-top: 100%;
                            .item-img {
                                width: 100%;
                                height: 100%;
                                border-radius: 8px;
                                position: absolute;
                                left: 0;
                                top: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
.color-darkgray {
    color: #1f1f1f;
}
.color-gray {
    color: #858585;
}
</style>
