<template>
    <div class="nus_comhead">
        <div class="nu_left-wrap">
            <nu-imgc
                class="nu_head-imgUrl"
                v-if="imgUrl"
                :imgUrl="imgUrl"
                :aspect="1">
            </nu-imgc>
            <nu-imgc
                class="nu_head-grade"
                v-if="levelUrl"
                :imgUrl="levelUrl">
            </nu-imgc>
        </div>
        <div class="nu_title-wrap">
            <div class="nu_title-basic">
                <div class="nu_name">
                    <nu-textt
                        class="nu_head-nameText"
                        v-if="nameText"
                        :row="1"
                        :nameText="nameText">
                    </nu-textt>
                    <nu-textt
                        class="nu_head-subNameText"
                        v-if="subNameText"
                        :row="1"
                        :nameText="subNameText">
                    </nu-textt>
                </div>
                <div class="nu_head-rightText" v-if="rightText">{{ rightText }}</div>
            </div>
            <nu-star
                class="nu_head-rate"
                :isShow="isShow"
                :decimal="decimal"
                :step="step"
                :mValue="rate"
                :isEdit="isEdit">
            </nu-star>
        </div>
    </div>
</template>

<script>
import NuImgc from '../../../../widget/img/imgc';
import NuStar from '../../../../widget/star';
import NuTextt from '../../../../widget/text/textt';
export default {
    props: {
        /**
         * 头像
         */
        imgUrl: {
            type: String
        },
        /**
         * 用户等级图片
         */
        levelUrl: {
            type: String
        },
        /**
         * 显示的一级文案
         */
        nameText: {
            type: String
        },
        /**
         * 显示的二级文案
         */
        subNameText: {
            type: String
        },
        /**
         * 右上角显示的文案
         */
        rightText: {
            type: String
        },
        /**
         * 用户星级
         */
        rate: {
            type: [String, Number]
        },
        /**
         * 是否显示评分
         */
        isShow: {
            type: Boolean,
            default: false
        },
        /**
         * 步长
         */
        step: {
            default: 1
        },
        /**
         * 保留小数/整数位数
         */
        decimal: {
            type: [String, Number],
            default: '1.2'
        },
        /**
         * 是否可以编辑
         */
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    components: {
        NuImgc,
        NuStar,
        NuTextt
    }
};
</script>

<style lang="scss">
@import '../../../../../_assets/style/_iconFont.scss';
@import '../../../../../_assets/style/_var.scss';
@import '../../../../../_assets/style/_mixin.scss';
.nus_comhead {
    width: 100%;
    font-size: 0;
    .nu_left-wrap {
        display: inline-block;
        position: relative;
        vertical-align: top;
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    .nu_head-imgUrl .nu_imgc-img {
        border-radius: 50%;
    }
    .nu_head-grade {
        position: absolute;
        vertical-align: middle;
        bottom: 0;
        right: 0;
        width: 12px;
        margin-left: 10px;
    }

    .nu_title-wrap {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 5px;
        width: calc(100% - 38px);
        height: 27px;
    }
    .nu_title-basic {
        margin-bottom: 2px;
        line-height: 1;
    }
    .nu_name {
        display: inline-flex;
        align-items: center;
        text-align: left;
        white-space: nowrap;
        font-size: $nucomment-title-font-size;
        color: $nucomment-title-color;
        margin-right: 10px;
        width: calc(100% - 85px);
    }
    .nu_head-nameText {
        display: inline-block;
        white-space: nowrap;
        margin-right: 4px;
        max-width: 40%;
    }
    .nu_head-subNameText {
        display: inline-block;
        white-space: nowrap;
        font-size: $nucomment-car-name-font-size;
        color: $nucomment-car-name-color;
        max-width: 57%;
    }
    .nu_head-rightText {
        display: inline-block;
        text-align: right;
        font-size: $nucomment-date-font-size;
        color: $nucomment-date-color;
        width: 75px;
    }
    .nu_head-rate {
        text-align: left;
        font-size: $nucomment-star-font-size;
        width: 100%;
    }
}
</style>
