<template>
    <div class="review">
        <div class="top">
            <div class="title">
                该视频评价
                <span>8.0分</span>
            </div>
            <div class="score">8.0分</div>
        </div>
        
        <div class="list">
            <ReviewItem v-for="(i,j) in reviewlist" 
            :key="j" 
            :photo="i.img" 
            :username="i.name" 
            :score="i.score" 
            :content="i.content" 
            :date="i.created_at"
            :memberid="i.memberid"
            @replying="reply"></ReviewItem>
            <!-- <div class="huifu">
                <ReviewItemtwo></ReviewItemtwo>
                <ReviewItemtwo></ReviewItemtwo>
            </div> -->
           
        </div>

        <div class="reply">
            @{{uinfo.name}}
            <a-textarea v-model:value="commentval" placeholder="Basic usage" :rows="4" />
            <div class="send" @click="send">发表留言</div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.review{
    width: 1320px;
    background-color: #fff;
    padding: 0 28px 56px 28px;
    border-radius: 17px;
    .top{
        padding: 28px 0 18px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ededed;
        margin-bottom: 20px;
        .title{
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #111;
            >span{
                width: 56px;
                height: 17px;
                background-color: #F9D5D6;
                border-radius: 2px;
                font-size: 12px;
                line-height: 17px;
                text-align: center;
                margin-left: 6px;
                color: #D12B2D;
            }
        }
        .score{
            font-size: 12px;
            color: #D12B2D;

        }
    }
    .reply{
        padding-top: 28px;
        border-top: 1px solid #ededed;
        ::v-deep(.ant-input){
            font-size: 11px;
        }
        .send{
            width: 62px;
            height: 22px;
            margin-top: 30px;
            background-color: #07AD97;
            text-align: center;
            line-height: 22px;
            color: #fff;
            font-size: 9px;

        }
    }
    .huifu{
        margin-left: 56px;
    }
    
}
</style>
<script lang="ts">
import { addcomment } from '@/api';
import { defineComponent, ref, toRaw } from 'vue';
import { useRoute } from 'vue-router';
import ReviewItem from "./ReviewItem.vue"
// import ReviewItemtwo from "./ReviewItemtwo.vue"
export default defineComponent({
    components:{
        ReviewItem,
        // ReviewItemtwo
    },
    props:{
        reviewlist:{
            type:Array
        },
        videoid:{
            type:Number
        }
    },
    setup(prop){
        const commentval=ref<string>('')
        const uinfo=ref<any>({})
        console.log(useRoute().query)
        interface SendData{
            type?:number,
            cid?:number,
            teacherid?:number,
            score?:number,
            content?:string
        }
        function send(){
            const data = ref<SendData>({})
            data.value.type=3;
            data.value.cid=prop.videoid
            // data.value.teacherid=uinfo.value.memberid
            // data.value.score=uinfo.value.score
            data.value.content=commentval.value
            console.log(data.value,2221)
            addcomment(toRaw(data.value))

        }
        const reply: (val: number) => void = (val: number) => {
             console.log("收到子组件事件", val)
            uinfo.value=val
        }
        console.log(1)
        return {
            commentval,
            send,
            reply,
            uinfo

            
        }
    }
})
</script>