<template>
    <bijiSlot>
        <template slot="leftPart">
            <img :src="data.userPic  || defultImg" alt="">
        </template>
        <template slot="titlePart">
            <span>{{data.userName}}</span>
        </template>
        <template slot="contentPart">
            {{data.content}}
        </template>
        <template slot="btnPart">
            <div>
                <el-button  @click="checkAllFun(data.content)" type="text" v-if="showBtnFlag"
                           v-text="!checkAllFlag ? '收起' : '全文'"></el-button>
                <el-button @click="editBtnFun(data)" type="text">编辑</el-button>
                <el-button @click="deleteBtnFun(data)" type="text">删除</el-button>
            </div>
            <div>2020-12-45</div>
            <!--<div>{{data.updatetime}}</div>-->
        </template>
    </bijiSlot>
</template>

<script>
    import bijiSlot   from '@/components/client/kechengDetaileTab/bijiSlot.vue';
    export default {
        name:       'biji',
        components: {
            bijiSlot,
        },
        props: {
            data: {
                type: Object,
            },
        },
        data() {
            return {
                showBtnFlag:false, //按钮显隐
                checkAllFlag:false,  //按钮切换
                defultImg:    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                content:''

            };
        },
        methods:    {
            checkAllFun(){
                if(this.checkAllFlag){
                    this.data.content = this.content;
                    this.checkAllFlag = false
                }else {
                    this.data.content = this.data.content.slice(0,200) + '...';
                    this.checkAllFlag = true
                }
            },
            editBtnFun(data){
                this.$emit('editBtnFun',data)
            },
            deleteBtnFun(data){
                this.$emit('deleteBtnFun',data)
            },
        },
        watch: {
            data(){
                this.content=[];
                if(this.data.content.length>220){
                    this.showBtnFlag = true;
                    this.checkAllFlag = true;
                    this.content = this.data.content;
                    this.data.content = this.data.content.slice(0,220) + '...';
                }else {
                    this.showBtnFlag = false;
                    this.checkAllFlag = false;
                }
            }
        },
        created() {
            this.content=[];
            if(this.data.content.length>220){
                this.showBtnFlag = true;
                this.checkAllFlag = true;
                this.content = this.data.content;
                this.data.content = this.data.content.slice(0,220) + '...';
            }else {
                this.showBtnFlag = false;
                this.checkAllFlag = false;
            }
        },
    };
</script>

<style lang="scss">

</style>
