<template>
    <div class="reviewitem">
        <div class="top">
            <img :src="photo" alt="">
            <div class="name myname" v-if="parseInt(memberid)==myid">{{username}}</div>
             <div class="name" v-else>{{username}}</div>
        </div>
        <div class="cont" v-html="inhtml()">
        </div>
        <div class="bottom">
            <div class="date">{{date}}</div>
            <div class="operate">
                
                
                <div class="del" @click="del(replyid)">
                    {{lan.$t('shanchu')}}
                </div>
                <div class="reply" @click="reply(username)">
                    {{lan.$t('huifu')}}
                </div>
                
            </div>
         
        </div>
    </div>
</template>
<style lang="scss" scoped>
.reviewitem{
    width: 100%;
    margin-bottom: 50px;
    .top{
        display: flex;
        align-items: center;
        >img{
            width: 45px;
            height: 45px;
            border-radius: 50%;
            // background-color: #0f0;

        }
        .name{
            font-size: 13px;
            color: #111;
            margin-left: 10px;

        }
        .myname{
            color: #08AE98;
        }
        .lv{
            display: flex;
            align-items: center;
            .img{
                display: flex;
                align-items: center;
                >img{
                    width: 12px;
                    height: 12px;
                    // background-color: #0f0;
                    margin-left: 3px;
                }
            }
            .num{
                font-size: 11px;
                color: #D12C2E;
                margin-left: 3px;
            }
        }
    }
    .cont{
        margin-left: 67px;
        font-size: 11px;
        line-height: 1.2;
        ::v-deep(span){
            color: #2581D0;
        }
    }
    .bottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 67px;
        margin-top: 25px;
        .operate{
            display: flex;
        }
        .date{
            font-size: 10px;
            color: #999;

        }
        .reply{
            font-size: 10px;
            color: #08AE98;
        }
        .del{
            color:#D12C2D!important;
            font-size: 10px;
            margin-right: 28px;
        }
    }
}
</style>
<script lang="ts">
import { delreply } from '@/api';
import store from '@/store';
import { useI18n } from '@/utils/i18n';
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
    props: {
        info:{
            type: Object
        },
        photo: {
            type: String
        },
        username: {
            type: String
        },
        score: {
            type: Number,
        },
        content: {
            type: String
        },
        date: {
            type: String
        },
        memberid: {
            type: Number
        },
        replyid: {
            type: Number
        }
    },
    setup(prop,context){
        const lan: any = useI18n();
        const myid=ref<number>(store.state.userinfo.memberid)
        function reply(e?: string){
            console.log(155)
            context.emit("replying",{name: e,replyid: prop.replyid,score: prop.score})
        }
        console.log(1)
        async function del(e?: number){
            console.log(e)
            const res=await delreply(e)
            if(res.code==0){
                 context.emit("reload",prop.replyid)
            }else {
                message.error(res.msg)
            }
            console.log(res)
            
        } 
        function inhtml(){
            if(prop.info){
                return prop.content + (prop.info.replyid != 0 ? '//<span>' + prop.info.with + '</span>' + prop.info.replyContent : '')
            }
            // {{content}}{{info.replyid != 0 ? '//' + info.with + info.replyContent : ''}}

        }
        return {
            reply,
            myid,
            del,
            lan,
            inhtml
        }
    }
})
</script>
