<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 v-if="infoType === 'vacc'">
                <text
                    v-if="data.list && data.list.length === 0"
                    class="color-gray"
                >
                    暂无评价
                </text>
                <text
                    v-if="data.list && data.list.length && data.goodRate"
                    class="rate rate-good"
                >
                    好评率{{ data.goodRate }}%
                </text>
                <view
                    v-if="data.list && data.list.length && data.goodRate"
                    class="m-icon m-icon-next-icon right-icon"
                    :style="{
                        'color': data.goodRate ? '#FD503E' : '#858585',
                        display: 'inline',
                    }"
                />
            </view>
            <!--购药的评论头部-->
            <view v-else-if="infoType === 'med'">
                <view v-if="(data.goodRate * 1) >= 97" class="c-color-mall c-line-clamp1">
                    <text class="rate rate-good c-font-15 c-inline-block">好评率{{ data.goodRate }}%</text>
                    <c-icon
                        v-if="data.url"
                        name="more"
                        class="right-icon"
                        font-size="12px"
                    />
                </view>
                <view v-else class="c-color-gray c-line-clamp1">
                    <text class="rate c-font-15 c-inline-block">查看全部</text>
                    <c-icon
                        v-if="data.url"
                        name="more"
                        class="right-icon c-inline-block"
                        font-size="12px"
                    />
                </view>
            </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"
                class="c-inline-block"
                :url="tag.url"
            >
                <view
                    :class="['comment-panel__tags__item', tag.color && ('comment-panel__tags__item__' + tag.color)]"
                    class="c-font-13 c-inline-block"
                >
                    <text class="c-inline-block">{{ tag.name }}({{ tag.count }})</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-image
                                v-if="item.avatar"
                                has-compress
                                :src="item.avatar"
                                width="0.35rem"
                                height="0.35rem"
                                :hack-white-stroke="false"
                                :extra="{column: 1}"
                            />
                        </view>
                        <view>
                            <text class="c-inline name c-color-title">{{ item.name }}</text>
                            <view class="comment-panel__list__item__top__time__wrap">
                                <c-stars
                                    :num="item.score"
                                    :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="item.isGood === 1"
                            has-compress
                            :src="'https://med-fe.cdn.bcebos.com/physical/high_quality_tag.png'"
                            :style="{position: 'absolute', right: 0}"
                            :width="'34px'"
                            :height="'34px'"
                            :hack-white-stroke="false"
                            :extra="{column: 1}"
                        />
                        <image
                            v-if="item.icon"
                            :src="item.icon"
                            class="comment-panel__list__item__top__right__icon"
                        />
                    </view>
                    <view
                        class="comment-panel__list__item__content color-darkgray"
                        :class="[isFold ? 'c-line-clamp2' : '']"
                    >
                        <text v-if="item.Tags">
                            <text
                                v-for="t in item.Tags"
                                :key="t.code"
                                :style="{marginRight: '2px', color: '#858585', display: 'inline-block'}"
                            >
                                #{{ t.name }}
                            </text>
                        </text>
                        <text v-if="item.comment">
                            {{ item.comment }}
                            <text/>
                        </text></view>
                </c-navigate>
                <view
                    v-if="item.showPice && item.showPice.length"
                    class="comment-panel__list__item__pic c-row"
                >
                    <!-- :style="{
                            'margin-left': i % 4 === 0 ? '' : '.03rem',
                        }" -->
                    <view
                        v-for="(pic, i) in item.showPice"
                        :key="i"
                        class="comment-panel__list__item__pic__item"
                        @tap="previewImg(pic, item.pics, item)"
                    >
                        <view
                            class="comment-panel__list__item__pic__item__wrapper"
                            :class="[
                                i === 0 ? 'left-radius' : '',
                                i === (item.showPice.length - 1) ? 'right-radius' : '',
                            ]"
                        >
                            <view class="comment-panel__list__item__pic__item__wrapper__con">
                                <view class="item-img">
                                    <c-image
                                        has-compress
                                        :src="pic"
                                        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"
                                        :extra="{column: 3}"
                                    />
                                </view>
                            </view>
                            <view
                                v-if="i === 3"
                                class="comment-panel__list__item__pic__item__wrapper__num"
                            >
                                <view class="pic-fill-icon"/>
                                {{ item.pics.length }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 评价组件
 * @author zhangeryi@baidu.com
 * @categories 评价组件
 * @tags [component]
 */
import CStars from '@baidu/med-ui/components/Stars/Stars';
import CImage from './image';
import CNavigate from './navigate';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
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
        },
        /* 判断业务类型 */
        infoType: {
            type: String,
            default: 'vacc'
        }
    },
    components: {
        CStars,
        CImage,
        CNavigate,
        CIcon
    },
    methods: {
        previewImg(current, urls) {
            let preData = {
                current,
                urls
            };
            // let picOrigin = this.data.pics || [];
            // 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: .09rem .15rem;
}

.comment-panel {
    &__title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tit-text {
            font-weight: bold;
            color: #1f1f1f;
        }

        .right-icon {
            position: relative;
            right: -0.03rem;
            font-size: .12rem;
        }

        .rate {
            position: relative;
            display: inline-block;
        }

        .rate-good {
            color: #fd503e;
        }
    }

    &__tags {
        width: calc(100% + .1rem);
        white-space: nowrap;

        &__item {
            line-height: .14rem;
            padding: .07rem .15rem;
            background: #fdefee;
            border-radius: 45px;
            margin-right: 8px;
            margin-top: .12rem;
            white-space: nowrap;
            color: #525252;
            font-size: .14rem;

            &__red {
                background: #fdefee;
                color: #fd503e;
            }

            .m-icon {
                margin-right: 5px;
            }
        }
    }

    &__list {
        padding-bottom: .03rem;

        &__item {
            margin-top: .18rem;
            padding-bottom: .02rem;

            &__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;
                    }
                }

                &__right {
                    &__icon {
                        width: 34px;
                        height: 34px;
                        display: block;
                    }
                }
            }

            &__content {
                word-break: break-all;
                line-height: .22rem;
                margin-top: .02rem;
                margin-bottom: .11rem;
            }

            &__pic {
                position: relative;
                display: grid;
                height: .9rem;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                margin-top: 2px;

                &__item {
                    // width: .9rem;
                    // height: .9rem;
                    &__wrapper {
                        width: 100%;
                        position: relative;
                        display: inline-block;
                        max-height: 160px;
                        overflow: hidden;

                        &__num {
                            width: .33rem;
                            height: .16rem;
                            position: absolute;
                            bottom: .05rem;
                            right: .05rem;
                            font-size: .14rem;
                            display: flex;
                            align-items: center;
                            color: #fff;
                            background: rgba(0, 0, 0, 0.6);
                            border-radius: .08rem;

                            .pic-fill-icon {
                                width: .1rem;
                                height: .1rem;
                                background: url(https://med-fe.cdn.bcebos.com/gy/pic_fill.png) no-repeat;
                                background-size: 100%;
                                margin-left: .06rem;
                                margin-right: .03rem;
                            }
                        }

                        &__con {
                            position: relative;
                            padding-top: 100%;

                            .item-img {
                                width: 100%;
                                height: 100%;
                                border-radius: 8px;
                                position: absolute;
                                left: 0;
                                top: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}

.left-radius {
    border-radius: .08rem 0 0 .08rem;
}

.right-radius {
    border-radius: 0 .08rem .08rem 0;
}

.color-darkgray {
    color: #1f1f1f;
}

.color-gray {
    color: #858585;
}
</style>
