<template>
  <div class="pinglun">
    <div class="font_size18 bold">{{$t('common.pinglun')}} ({{listTotal}})</div>
    <div class="gap20 mt20 mb10">
      <el-avatar :size="32" :src="appStore.avatarDefault" />
      <div class="page-add flex_1">
        <div class="flex-between">
          <el-input type="textarea" v-model="comments" placeholder="请输入"  
          :rows="1"
          autosize
          show-word-limit
          maxlength="500" style="width: 100%;flex:1;"/>
          <el-button type="primary" size="large" 
          :loading="isSubmiting"
          @click="handleSend" style="height:44px" class="gradient">
          {{$t('common.send')}}
          </el-button>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="flex-between font_size16 list_item" 
      v-for="(item, index) in list" :key="index">
        <el-avatar :size="32" :src="item.userAvatar || appStore.avatarDefault" />
        <div class="ml20 flex_1">
          <div class="flex-between">
            <div class="bold font_size14">{{item.nickName}}</div>
            <div class="gray font_size12">{{item.createTime}}</div>
          </div>
          <div class="gray mt5 line_height22 content_pinglun">
            {{item.content}}
          </div>
        </div>
      </div>
    </div>
    <Pagination 
      :total="listTotal"
      :page-size="searchFom.pageSize"
      :current-page="searchFom.pageNum"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script setup>
import DGTMessage from '@/utils/message'
import Pagination from '@/components/Pagination.vue'
import { getCommentList,commentAdd } from '@/api/comment.js'
import { ref, onMounted,reactive,watch, onActivated } from 'vue'
import { useI18n } from 'vue-i18n' 
const { t } = useI18n() 
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()

const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})
// 防止重复提交的加载状态
const isSubmiting = ref(false)

//监听props.info.courseId变化
watch(() => props.info.courseId, (newVal, oldVal) => {
  if(newVal !== oldVal){
    // 课程ID变化时，重置分页参数
    searchFom.courseId = newVal
    getList('init');
  }
})


const comments = ref('');
const listTotal = ref(0);
const searchFom = reactive({
  courseId: props.info.courseId,
  pageNum: 1,
  pageSize: 10,
})
const list = ref([]);


onActivated(() => {
 if(props.info.courseId){
    getList('init');
  }
})
const handlePageChange = (page, pageSize) => {
  searchFom.pageNum = page;
  if(pageSize)searchFom.pageSize = pageSize;
  // 这里可以添加获取数据的逻辑
  console.log('当前页:', page);
  getList();
}
// 查询寻找工作流列表
const getList = async (type) => {
  if(type === 'init'){
    searchFom.pageNum = 1
  }
  const res = await getCommentList(searchFom)
  if(res.code === 200){
    listTotal.value = res.total
    list.value = res.rows
  }
};
// 发送评论
const handleSend = async () => {
  if(!comments.value){
    DGTMessage.warning(t('common.pleaseInputCommentContent'))
    return
  }
  // 设置提交状态为true，禁用按钮
  isSubmiting.value = true
  const res = await commentAdd({
    courseId: props.info.courseId,
    content: comments.value
  })
  if(res.code === 200){
    DGTMessage.success(t('common.commentSuccess'))
    comments.value = ''
    getList();
  }
  // 提交完成后，将提交状态设置为false，启用按钮
  setTimeout(() => {
    isSubmiting.value = false
  }, 1000)
};



</script>
<style lang="scss">
  .pinglun{
    .el-textarea{
      .el-textarea__inner{
        min-height: 22px !important;
        padding: 11px 10px;
      }
    }
    .list{
      // max-height: 100vh;
      overflow: auto;
    }
    .list_item{
      cursor: pointer;
      padding: 15px 0;
      .content_pinglun{
        word-break: break-all;
        display: -webkit-box;
        // -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

  }

</style>
