<template>
    <view class="evaluate-box">
        <view class="tx">
            <text>{{ item.text }}</text>
        </view>
        <view class="icons">
            <comment-emoji
                v-if="item.evaluate.evaluateType === 'emoji'"
                :evaluateList="item.evaluate.list"
                :select="item.evaluate.select"
                @onEvaluateTap="onEvaluateTap"
                class="comment-emoji"
            />
            <c-stars
                v-else
                :num="item.evaluate.select || 0"
                :disabled="false"
                :size="24"
                :marginRight="screenWidth < 375 ? 8 : 18"
                :equalChange="false"
                icon="star-solid"
                icon-color="#ff6050"
                empty-icon="star-solid"
                empty-icon-color="#eee"
                text-color="#ff6050"
                :show-text="false"
                @change="onEvaluateTap"
            >
        </view>
    </view>
</template>

<script>
/**
 * @file components/im/im-msg-evaluate
 * @author mayifan02
 */
import Stars from '@baidu/med-ui/components/Stars/Stars';
import CommentEmoji from '../wz/comment-emoji';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true
    },
    props: {
        item: {
            type: Object,
            default() {
                return {};
            }
        },
        messageID: {
            type: Number,
            default: -1
        }
    },
    components: {
        'comment-emoji': CommentEmoji,
        'c-stars': Stars
    },
    methods: {
        onEvaluateTap(e) {
            /* eslint-disable max-len */
            this.$emit('open', {type: 'comment', callback: this.item.callback, commentValue: e.current, messageID: this.messageID});
        }
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenWidth = systemInfoSync.screenWidth;
    },
    data() {
        return {
            list: [],
            screenWidth: 375
        };
    }
};
</script>

<style lang="less">
.evaluate-box {
    .icons {
        display: flex;
        justify-content: center;
    }
    .comment-emoji {
        flex: 1;
    }
}
</style>