<template>
    <div class="nus_comitem"
        @click="_onClick"
        @tap="_onTap">
        <com-head
            class="nu_com-head"
            :imgUrl="imgUrl"
            :levelUrl="levelUrl"
            :nameText="nameText"
            :subNameText="subNameText"
            :rightText="rightText"
            :rate="rate"
            :step="step"
            :decimal="decimal"
            :isEdit="isEdit"
            :isShow="isShow">
        </com-head>

        <div class="nu_com-detail">
            <com-cont
                class="nu_com-cont"
                :nameText="content"
                :expandTxt="expandTxt"
                :contractTxt="contractTxt"
                :status="status">
            </com-cont>
            <com-img
                class="nu_com-img"
                :list="imgList"
                @imgClick="_onImgClick">
            </com-img>
            <com-foot
                class="nu_com-foot"
                :nameText="fNameText"
                :subNameText="fSubNameText">
            </com-foot>
        </div>
    </div>
</template>

<script>
import ComCont from './comCont/ComCont';
import ComImg from './comImg/ComImg';
import ComHead from './comHead/ComHead';
import ComFoot from './comFoot/ComFoot';
import { EVENT_TYPE } from '../constants';
import BusinessTmp from '../../_comm/BusinessTmp';
export default {
    extends: BusinessTmp,
    props: {
        /**
         * 头像
         */
        imgUrl: {
            type: String
        },
        /**
         * 用户等级图片
         */
        levelUrl: {
            type: String
        },
        /**
         * 显示的一级文案
         */
        nameText: {
            type: String
        },
        /**
         * 显示的二级文案
         */
        subNameText: {
            type: String
        },
        /**
         * 右上角显示的文案
         */
        rightText: {
            type: String
        },
        /**
         * 用户星级
         */
        rate: {
            type: [String, Number]
        },
        /**
         * 评论内容
         */
        content: {
            type: String
        },
        /**
         * 图片列表
         */
        imgList: {
            type: Array
        },
        /**
         * 底部显示的一级文案
         */
        fNameText: {
            type: String
        },
        /**
         * 底部显示的二级文案
         */
        fSubNameText: {
            type: String
        },
        /**
         * 扩张的文案
         */
        expandTxt: {
            type: String,
            default: '全文'
        },
        /**
         * 收起的文案
         */
        contractTxt: {
            type: String,
            default: '收起'
        },
        /**
         * 状态
         */
        status: {
            type: Boolean,
            default: false
        },
        /**
         * 是否显示评分
         */
        isShow: {
            type: Boolean
        },
        /**
         * 步长
         */
        step: {
            default: 1
        },
        /**
         * 保留小数/整数位数
         */
        decimal: {
            type: [String, Number],
            default: '1.2'
        },
        /**
         * 是否可以编辑
         */
        isEdit: {
            type: Boolean
        }
    },
    components: {
        ComHead,
        ComCont,
        ComImg,
        ComFoot
    },
    methods: {
        /**
         * 当某个图片被点击的回调方法
         * @param {Object} evt 点击项的图片数据
         */
        _onImgClick (evt) {
            const _that = this;
            _that.$emit(EVENT_TYPE.IMG_CLICK, evt);
        }
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nus_comitem {
    .nu_com-head {
        margin-bottom: 10px;
    }
    .nu_com-detail {
        // margin-left: 28px;
    }
    .nu_com-foot {
        text-align: left;
        margin-top: 10px;
        font-size: $nucomment-car-name-font-size;
        color: $nucomment-car-name-color;
    }
}
</style>
