<template>
    <view :class="['eva-tips c-gap-inner-left-large c-gap-inner-right-large']">
        <view class="eva-tips-inner">
            <view class="eva-tips-inner-left" @tap="onEvaluateTap({current: 5})">
                <image class="avatar" :src="evaluateTips.avatar"/>
                <view class="">
                    <view class="title">
                        {{ evaluateTips.mainTitle }}
                    </view>
                    <view class="sub-title">
                        {{ evaluateTips.subTitle }}
                    </view>
                </view>
            </view>
            <view class="eva-tips-inner-right">
                <c-stars
                    :num="current"
                    :disabled="false"
                    :size="20"
                    :margin-right="6"
                    :equal-change="false"
                    icon="star-solid"
                    icon-color="#FFC888"
                    empty-icon="star-solid"
                    empty-icon-color="#eee"
                    text-color="#FFC888"
                    :show-text="false"
                    @change="onEvaluateTap"
                /></view>
        </view>
    </view>
</template>

<script>
import Stars from '@baidu/med-ui/components/Stars/Stars';
import { getSystemInfo } from '@baidu/med-utils/lib/Mars/system';
import * as log from '../../utils/log';
export default {
    config: {
        component: true
    },
    props: {
        evaluateTips: {
            type: Object,
            default () {
                return {
                    mainTitle: '',
                    subTitle: '',
                    avatar: '',
                    api: '',
                    questionID: ''
                };
            }
        }
    },
    components: {
        'c-stars': Stars
    },
    data() {
        return {
            screenWidth: 375,
            current: 0
        };
    },
    methods: {
        onEvaluateTap (e) {
            this.current = e.current;
            log.send({
                type: 'b',
                action: 'comment_tips_click',
                extra: {
                    time: new Date().getTime(),
                    qid: this.evaluateTips.questionID
                }
            });
            this.$emit('onPopup', {type: 'comment', commentValue: e.current, callback: this.evaluateTips.api});
        }
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenWidth = systemInfoSync.screenWidth;
        setTimeout(res => {
            this.$emit('onCommentPopupClose');
        }, 10000);
    },
};
</script>

<style lang="less" scoped>
    .eva-tips {
        animation: slideContentDown .5s ease both;
        .eva-tips-inner {
            background: #FFFFFF;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 10px;
        }
        .eva-tips-inner-left {
            display: flex;
            align-items: center;
            .avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 10px;
            }
        }
        .title {
            font-family: PingFangSC-Regular;
            font-size: 16px;
            line-height: 16px;
            color: #1F1F1F;
            letter-spacing: 0;
            font-weight: 400;
            margin-bottom: 6px;
        }
        .sub-title {
            font-size: 12px;
            line-height: 12px;
            color: #858585;
        }
    }
    @keyframes slideContentDown {
            from {
                margin-bottom: 0px;
            }
            to {
                margin-bottom: 21px;
            }
        }
</style>
