<template>
  <div>
    <CommentList v-for="(item, index) in pagesData.listData" :key="index" :item="item" @delComment="cjhfRemove" :userInfo="userInfo"/>
    <el-pagination v-if="pagesData.total > 10" v-model:current-page="pagesData.pagebreak.pageCurrent"
      v-model:page-size="pagesData.pagebreak.pageSize" :size="10" :disabled="false" :total="pagesData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <div style="text-align: center;width: 100%;height: 20px;" v-if="pagesData.total == 0">暂无回复</div>
  </div>
</template>
<script setup>
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import { ref, reactive, toRaw, watch, onMounted, onUnmounted } from "vue";
import CommentList from './lstItem.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
  replyId: { type: Object, default: () => { } },
  userInfo:{type:String,default:''}
});

const pagesData = reactive({
  total: 0,
  pagebreak: {
    pageCurrent: 1,
    pageSize: 10
  },
  listData: []
});


const handleSizeChange = (val) => {
  pagesData.pagebreak.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  pagesData.pagebreak.pageCurrent = val
  getList()
}
//获取回复评论列表
const getList = () => {
  const params = { ...pagesData.pagebreak, plid: props.replyId.id }
  qcckPost(params, '/mosty-gsxt/gsxt/cjhf/selectPage').then(res => {
    pagesData.listData = res.records
    pagesData.total = res.total
    // emitter.emit('pls',res.total)
  })
}

// 删除评论
const cjhfRemove = (val) => {
  ElMessageBox.confirm(
    '是否删除评论',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      qcckPost([val], '/mosty-gsxt/gsxt/cjhf/remove').then((res) => {
        getList()
        ElMessage({
          message: '删除成功',
          type: 'success',
          plain: true,
        })
      })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}
onMounted(() => {
  getList()
})
defineExpose({
  getList
})
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.boxlist {
  width: 99%;
  margin-top: 10px;
}

.content_box {
  padding-top: 5px;

  .title_box {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 700;
  }


  .virtual {
    position: relative;
  }

  .virtual::after {
    content: "";
    height: 4px;
    width: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(0, 206, 255, 1) 0%, rgba(244, 244, 244, 1) 100%);
    z-index: 10;
  }

  .sticky {
    position: sticky;
    bottom: -20px;
    background-color: #fff;
    padding: 10px 0;
  }

  .content_icon {
    margin-top: 10px;

    .icon_img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .align-space-around {
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 12px;
      color: #6e6e6e;
      padding: 4px 0;

      .publisher {
        font-size: 16px;
        font-weight: 600;
        color: #000;
      }
    }
  }

  .content_text {

    font-size: 16px;
    margin: 20px 0;
    // height: 40vh;
    line-height: 30px;
    overflow: auto;
    color: #444444;
  }
}

.itemXs_Xs {
  width: 18%;
  font-size: 14px;
  color: #5c5c5c;
  line-height: 20px;
  display: flex;
  align-items: center;

  .icon {
    font-size: 16px;
  }
}

.flex-column {
  color: red;
}
</style>
