<template>
  <div class="expand" @click="showMore"  v-if="restNum>0">
          展示剩余（{{restNum}}）条回复
  </div>
</template>

<script setup>
import { ref } from 'vue';
import api from '../api/user.js';
const page=ref(1);
const props = defineProps({
    parent_id:{
        type:String,
        default:'',
    },
    index:{
    type:Number,
    default:0
  },
    case_id:{
     type:String,
     default:''
   },
   project_id:{
     type:String,
     default:''
   },
   listLength:{
    type:Number,
    default:0
  },
   total_amount:{
    type:Number,
    default:0
  }
})
const restNum=ref(props.total_amount);
const emit = defineEmits(['freshSecComment']);
const showMore=()=>{
    page.value++;
    getList(props.parent_id)
}
const getList = async (root_id='') => {
    const { code, data } = await api.getCommentList({
        case_id:props.case_id,
        project_id:props.project_id,
        page:page.value,
        page_size:5,
        root_id:root_id
    })
    if (code == 200) {
        if(data.data.length>0){
            emit('freshSecComment',{
                commentIndex:props.index,
                commentData:data.data
            });
            nextTick(()=>{
              restNum.value=data.total-props.listLength;
            })
        
        }
         //console.log(data);
        
    }

}
</script>

<style lang='scss' scoped>
.expand {
        width: 240px;
        height: 19px;
        margin: 12px auto 12px;
        background: #43C9C3;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        color: #FFFFFF;
    }
</style>
