<template>
    <MtaCommentLayout>
        <template slot="avatar">
            <el-avatar :src="myData.userPic || circleUrl" class="c-c-comment-author" size="large"></el-avatar>
        </template>
        <template slot="nameAndRate">
            <span>{{myData.userName}}</span>
            <MtaRate :my-data="myData" code="readOnly"></MtaRate>
        </template>
        <template slot="content">
            <div :class="{ 'NotAll': isAllContent}" v-if="isAllContent">{{myData.content}}</div>
            <div :class="{ 'NotAll': !isAllContent}" v-else>{{breviary}}</div>
        </template>
        <template slot="btnAndDate">
            <div>
                <el-button @click="handleToggleContent" type="text"
                           v-if="myData.content && myData.content.length > strLength"
                           v-text="!isAllContent ? '全文' : '收起'"></el-button>
                <el-button @click="handleReply" type="text">回复</el-button>

                <el-button @click="openCommentListDialog" type="text" v-if="myData.infoCount>1">
                    更多
                    <!--                    <span>({{myData.infoCount}})</span>-->
                </el-button>

                <el-button @click="handleDelete" type="text" v-if="myData.delFlag">删除</el-button>
            </div>
            <div v-if="myData.updateTime">
                {{myData.updateTime}}
            </div>
        </template>
        <template slot="Reply" v-if="myData.info && myData.info.length">
            <MtaCommentReply :my-data="myData.info[0]" @delete="handleReplyDelete"></MtaCommentReply>
        </template>
    </MtaCommentLayout>
</template>

<script>
    import MtaCommentLayout from './MtaCommentLayout';
    import MtaRate          from '../MtaRate/MtaRate';
    import MtaCommentReply  from './MtaCommentReply';

    export default {
        name:       'MtaCommentBase',
        components: {
            MtaRate,
            MtaCommentLayout,
            MtaCommentReply,
        },
        props:      {
            myData: {
                type:      Object,
                required:  true,
                validator: function (value) {
                    return value.hasOwnProperty('score')
                        && value.hasOwnProperty('content')
                        && value.hasOwnProperty('userName')
                        && value.hasOwnProperty('userPic')
                        && value.hasOwnProperty('delFlag')
                        && value.hasOwnProperty('info')
                        && value.hasOwnProperty('updateTime');

                },
            },
        },
        data() {
            return {
                circleUrl:    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                isAllContent: false,
                replyDialog:  false,
                strLength:    220,
            };
        },
        computed:   {
            breviary() {
                if (this.myData.content.length > this.strLength) {
                    return this.myData.content.substring(0, this.strLength) + '...';
                } else {
                    return this.myData.content;
                }
            },
        },
        methods:    {
            handleToggleContent() {
                this.isAllContent = !this.isAllContent;
            },
            handleReply() {
                const opt = JSON.parse(JSON.stringify(this.myData));
                this.$emit('reply', opt);
            },
            handleDelete() {
                const opt = JSON.parse(JSON.stringify(this.myData));
                this.$emit('delete', opt);
            },
            handleReplyDelete(data) {
                const myData = JSON.parse(JSON.stringify(this.myData));
                const opt = {
                    parent:  myData,
                    current: data,
                };
                this.$emit('reply-delete', opt);
            },
            openCommentListDialog() {
                const myData = JSON.parse(JSON.stringify(this.myData));
                this.$emit('comment-list', myData);
            },
        },
    };
</script>

<style lang="scss">
    .c-Mta-Comment-Base {

    }
</style>
