<template>
  <div class="dialog" v-if="dialogForm" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <!-- class="head_box" -->
    <div style="position: sticky;top: 0;float: right;">
      <el-button size="small" @click="close">关闭</el-button>
    </div>
    <div class="content_box">
      <div>
        <div class="title_box">{{ listQuery.xsMc }}</div>
        <div class="content_icon flex align-center">
          <div class="icon_img"><img src="@/assets/images/ly-person-icon.png" alt="" srcset=""></div>
          <div class="flex align-space-around dir-column">
            <div class="publisher">发布者：{{ listQuery.ssbm }}——{{ listQuery.fbrxm }}</div>
            <div>发布于：{{ listQuery.fbsj }}</div>
          </div>
        </div>
        <p class="content_text">{{ listQuery.xsNr }} </p>
        <div class="itemXs_Xs flex just-between align-center">
          <div class=" flex just-between align-center">
            <el-icon class="icon">
              <Histogram />
            </el-icon>
            &nbsp;{{ listQuery.rd ? listQuery.rd : 0 }}
          </div>
          <div class=" flex just-between align-center">
            <el-icon class="icon">
              <ChatDotSquare />
            </el-icon>
            &nbsp;{{ pls }}
          </div>
          <div class="flex align-center">情报类型：
            <DictTag :tag="false" :value="listQuery.xlLx" color="#5c5c5c" :options="dict.D_GS_XS_LX" />
          </div>
        </div>
      </div>

      <div class="title_box virtual">评论列表</div>
      <CommentList v-for="(item, index) in pagesData.listData" :key="index" :index="index" :item="item"
        @postReply="postReply" @delComment="delComment" :userInfo="userInfo" @cjpjZan="cjpjZan"/>
      <div class="sticky">
        <div class="title_box virtual">发表评论</div>
        <div class="flex flex-column ">
          <el-input v-model="textarea2" style="width: 100%" type="textarea" placeholder="请输入内容" /><el-button
            type="primary" @click="sendComment()">发表</el-button>
        </div>
      </div>

    </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 '../itemXs/commentList.vue'
import { getItem } from '@/utils/storage.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import emitter from "@/utils/eventBus.js";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
  dict: {
    type: Object,
    default: () => ({})
  }
});

const dialogForm = ref(false); //弹窗
const listQuery = ref({})
const textarea2 = ref()
const userInfo = ref(getItem('idEntityCard'))
// 初始化数据
const init = (row) => {
  dialogForm.value = true;
  // 根据id查询详情
  if (row) {
    qcckGet({ id: row }, "/mosty-gsxt/qbcj/selectByid").then((res) => {
      listQuery.value = res;
    });
    cjpjSelectPage()
  }

};
// 关闭
const close = () => {
  dialogForm.value = false;
  pagesData.pagebreak.pageCurrent = 1
};
const pagesData = reactive({
  total: 0,
  pagebreak: {
    pageCurrent: 1,
    pageSize: 10
  },
  listData: []
});
// 发送评论
const sendComment = () => {
  const prmes = {
    pldd: 'pc端发送',
    plnr: textarea2.value,
    cjid: listQuery.value.id,
    dzs: 10
  }
  qcckPost(prmes, '/mosty-gsxt/gsxt/cjpj/add').then((res) => {
    textarea2.value = ''; // 清空评论内容
    cjpjSelectPage()
  })
}
const pls=ref(0)
// 获取评论
const cjpjSelectPage = () => {
  const prmes = {
    ...pagesData.pagebreak,
    cjid: listQuery.value.id
  }
  qcckPost(prmes, '/mosty-gsxt/gsxt/cjpj/selectPage').then((res) => {
    pagesData.listData = pagesData.pagebreak.pageCurrent == 1 ? res.records : pagesData.listData.concat(res.records)
    pls.value=res.total

    pagesData.total = res.pages
  })
}
//回复消息
const postReply = (val) => {
  qcckPost(val, '/mosty-gsxt/gsxt/cjhf/add').then((res) => {
    ElMessage({
      message: '回复成功',
      type: 'success',
      plain: true,
    })
  })
}
// 删除评论
const delComment = (val) => {
  ElMessageBox.confirm(
    '是否删除评论',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      qcckPost([val], '/mosty-gsxt/gsxt/cjpj/remove ').then((res) => {
        pagesData.pagebreak.pageCurrent= Math.ceil(pagesData.listData.length / pagesData.pagebreak.pageSize);
        cjpjSelectPage()
        ElMessage({
          message: '删除成功',
          type: 'success',
          plain: true,
        })
      })

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

}


//点赞
const cjpjZan = (val,data) => {

  const promes = {
    dzs: data,
    id:val
}
  qcckPost(promes, '/mosty-gsxt/gsxt/cjpj/gxdzs').then((res) => {
    ElMessage({
      message: '点赞成功',
      type: 'success',
      plain: true,
    })
  })
}
const disabled = ref(false)


defineExpose({ init });

const load = () => {
  if (pagesData.pagebreak.pageCurrent < pagesData.total) {
    pagesData.pagebreak.pageCurrent++
    cjpjSelectPage()
  } else {
    disabled.value = true
  }

}

</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: #6c6c6c;
  }
}

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

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

.flex-column {
 align-items: flex-end
}
</style>
