<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>
        </template>
        <template slot="content">
<!--            <div :class="{ 'NotAll': !isAllContent}">{{myData.result}}</div>-->
            <div :class="{ 'NotAll': isAllContent}" v-if="isAllContent">{{myData.result}}</div>
            <div :class="{ 'NotAll': !isAllContent}" v-else>{{breviary}}</div>
        </template>
        <template slot="btnAndDate">
            <div class="c-btnAndDate">
                <div>
                    <el-button @click="handleToggleContent" type="text"
                               v-if="myData.result && myData.result.length > strLength" v-text="!isAllContent ? '全文' : '收起'"></el-button>
                    <el-button @click="handleDelete" type="text" v-if="myData.delFlag">删除</el-button>
<!--                    <el-button type="text" @click="handleDelete">删除</el-button>-->
                </div>
                <div v-if="myData.createTime">
                    {{myData.createTime}}
                </div>
            </div>

        </template>
    </MtaCommentLayout>
</template>

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

    export default {
        name:       'MtaCommentReply',
        components: {
            MtaCommentLayout,
        },
        props:      {
            myData: {
                type:      Object,
                required:  true,
                validator: function (value) {
                    return value.hasOwnProperty('userPic')
                        && value.hasOwnProperty('result')
                        && value.hasOwnProperty('userName')
                        && value.hasOwnProperty('delFlag')
                        && value.hasOwnProperty('createTime');
                },
            },
        },
        computed:   {
            breviary() {
                if (this.myData.result.length > this.strLength) {
                    return this.myData.result.substring(0, this.strLength) + '...';
                } else {
                    return this.myData.result
                }
            },
        },
        data() {
            return {
                circleUrl:    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                isAllContent: false,
                strLength: 200,
            };
        },
        methods:    {
            handleToggleContent() {
                this.isAllContent = !this.isAllContent;
            },
            handleDelete() {
                const data = JSON.parse(JSON.stringify(this.myData));
                this.$emit('delete', data);
            },
        },
    };
</script>

<style>
    .c-btnAndDate {

    }
</style>
