<template>
    <view class="component-appraise-group">
        <view class="group-cate-group">
            <view
                class="cate-item"
                v-for="(item, index) in cate"
                :key="index"
                :class="{ active: currentCate == index }"
                @click="changeCate(index)"
            >
                <text
                    >{{ item.name }} <text v-if="item.count > 0">({{ item.count }})</text></text
                >
            </view>
        </view>
        <view class="appraise-list-box">
            <view v-show="currentCate == index" v-for="(item, index) in cate" :key="index">
                <view class="appraise-item" :class="['tab' + index]" v-for="(v, k) in item.list" :key="k">
                    <view class="appraise-left">
                        <image class="avatar" :src="v.avatar" mode="aspectFill" />
                    </view>
                    <view class="appraise-right">
                        <view class="head">
                            <text class="nickname">{{ v.nickname }}</text>
                            <text class="date">{{ v.createTime }}</text>
                            <text class="desc">
                                <text class="area">{{ v.area }}</text>
                                <text class="worker">服务人员：{{ v.worker }}</text>
                            </text>
                            <view class="grade">
                                <uni-rate :readonly="true" :value="v.grade" :allowHalf="false" :size="utils.rpx2px(40)" />
                            </view>
                        </view>
                        <view class="tags">
                            <view class="tag" v-for="(tag, tagIdx) in v.tags" :key="tagIdx">{{ tag }}</view>
                        </view>
                        <view v-show="v.content != ''" class="content">
                            <rich-text :nodes="v.content"></rich-text>
                        </view>
                        <view v-show="v.images.length > 0" class="image-group">
                            <view class="image-item" v-for="(image, imageIdx) in v.images" :key="imageIdx">
                                <image class="image" :src="image" mode="aspectFill" @click="previewImage(v.images, imageIdx)" />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import UniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
export default {
    name: "appraise-group",
    data() {
        return {
            utils: this.$utils,
            currentCate: 0,
        };
    },
    props: {
        cate: {
            type: Array,
            default: [],
        },
    },
    components: {
        UniRate,
    },
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        /**
         * 修改分类
         */
        changeCate(index) {
            this.currentCate = index;
            this.$emit("changeCate", this.cate[index], index);
        },
        /**
         * 预览图片
         */
        previewImage(list, index) {
            uni.previewImage({
                urls: list,
                current: index,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.component-appraise-group {
    width: 100%;
}
.group-cate-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    line-height: 32rpx;
    margin-bottom: 40rpx;
    .cate-item {
        font-size: 24rpx;
        color: #333333;
        margin-right: 40rpx;
    }
    .cate-item.active {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
    }
}
.appraise-list-box {
    width: 100%;
    .appraise-item {
        box-sizing: border-box;
        padding: 30rpx;
        border: 2rpx solid #d7d7d7;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 22rpx;
    }
}
.appraise-left {
    .avatar {
        width: 70rpx;
        height: 70rpx;
        box-sizing: border-box;
        border: 2rpx solid #999999;
    }
}
.appraise-right {
    width: 525rpx;
    .head {
        position: relative;
        width: 100%;
    }
    .nickname,
    .date,
    .desc {
        display: block;
    }
    .nickname {
        font-size: 30rpx;
        line-height: 30rpx;
        color: #333333;
    }
    .date {
        font-size: 22rpx;
        line-height: 22rpx;
        color: #999999;
        margin: 18rpx 0;
    }
    .desc {
        font-size: 22rpx;
        line-height: 22rpx;
        color: #999999;
    }
    .area {
        margin-right: 30rpx;
    }
    .tags {
        width: 100%;
        margin: 30rpx 0;
    }
    .tag {
        display: inline-block;
        font-size: 22rpx;
        line-height: 22rpx;
        color: #666666;
        padding: 12rpx 24rpx;
        background: #f6f6f6;
        border-radius: 23rpx;
        margin-right: 24rpx;
    }
}
.grade {
    position: absolute;
    top: 0;
    right: 0;
}
.content {
    font-size: 28rpx;
    font-size: #666666;
}
.image-group {
    width: 100%;
    margin-top: 20rpx;
}
.image-item {
    display: inline-block;
    width: 110rpx;
    height: 110rpx;
    margin-right: 20rpx;
    .image {
        width: 100%;
        height: 100%;
    }
}
</style>