<template>
  <div class="discusspage">
    <ReturnHead
      text="讨论详情"
      :ispublish="true"
      :discussId="discussId"
      :id="id"
      :type="type"
    ></ReturnHead>
    <div class="head clearfix">
      <div class="title">
        {{
          info && info.discussDtoList && info.discussDtoList.length !== 0
            ? info?.discussDtoList[0].discussName
            : "-"
        }}
      </div>
      <div class="title" style="margin-top: 0px">
        {{
          info && info.discussDtoList && info.discussDtoList.length !== 0
            ? info?.discussDtoList[0].discussExplain
            : "-"
        }}
      </div>
    </div>

    <div class="preview">
      <div class="previewbox">
        <div class="previewmani">
          <div class="firstbtncontainer">
            <div class="inbtn">
              <button
                @click="nowPost(info.discussDtoList[0].id)"
                :class="searchType === 1 ? 'new samebtn' : 'samebtn hot'"
                style="padding: 1px 8px 1px 8px"
              >
                最新
              </button>

              <button
                @click="hotPost(info.discussDtoList[0].id)"
                :class="searchType === 2 ? 'new samebtn' : 'samebtn hot'"
                style="margin-left: 15px; padding: 1px 8px 1px 8px"
              >
                最热
              </button>
            </div>
          </div>

          <div class="discusscontainer clearfix">
            <div class="item" v-for="(item, index) in postList" :key="index">
              <div class="thinline"></div>
              <div class="coni" @click="goDetails(item)">
                <div class="conin">
                  <div class="tit">{{ item.title }}</div>
                  <div
                    class="inn discusspage_img_class"
                    v-html="item.content"
                  ></div>
                </div>
              </div>
              <div class="thinline"></div>
              <div class="bott">
                <div class="dicon">
                  <div class="imgcont" @click="goDetails(item)">
                    <img
                      class="imgs"
                      src="../../assets/image/discuss/pinglun.png"
                    />
                    <div class="samei" style="margin-top: 2px">
                      {{ item.commentNum || 0 }}
                    </div>
                  </div>

                  <div class="imgcont" @click="like(item)">
                    <img
                      v-if="item.praised"
                      style="margin-left: 56px"
                      class="imgs"
                      src="../../assets/image/discuss/dianzan2.png"
                    />
                    <img
                      v-else
                      style="margin-left: 56px"
                      class="imgs"
                      src="../../assets/image/discuss/dianzan.png"
                    />
                    <div
                      :class="item.praised ? 'sameii' : 'samei'"
                      style="margin-top: 2px"
                    >
                      {{ item.praiseNum || 0 }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="clickMoreBox" v-if="!noMore && total > 10">
            <div class="clickMore" @click="handleCurrentChange">
              点击加载更多~
            </div>
          </div>
          <div class="clickMoreBox" v-if="noMore">
            <div class="clickMore" style="color: rgba(95, 109, 117, 1)">
              已经到底啦~
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, watch, ref } from "vue";
// import TitleHead from "@/components/TitleHead.vue";
import ReturnHead from "@/components/ReturnHead.vue";
import { request, useRequest } from "@/api/request";
import { useRoute } from "vue-router/dist/vue-router";
import { useRouter } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";
import {
  COMMENT_COLLECTION,
  COMMENT_PRAISE,
  DISCUSS_LIST,
  QueryDiscussSubmitDetailByDiscussId,
  PostList,
  PostPraise,
  checkStudentExist,
} from "@/api/api";
const router = useRouter();
const state = reactive({
  onfo: true,
  info: {},
  pageNo: 1,
  pageSize: 10,
  searchType: 1,
  postList: [], //帖子列表
  total: 0, // 帖子总条数
  currentPage: 1,
  content: 1,
  discussId: null,
  noMore: false,
});
const {
  onfo,
  discuss,
  info,
  pageNo,
  pageSize,
  searchType,
  postList, //帖子列表
  total, // 帖子总条数
  currentPage,
  content,
  discussId,
  noMore,
} = toRefs(state);
const loading = ref(false); // loading
const openLoading = () => {
  loading.value = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
};
const closeLoading = () => {
  loading.value.close();
};
//获取讨论详情
const discussSettings = ref("");
const {
  query: { id, type, infoId, chapterOrStageId, id: taskId },
} = useRoute();
request(DISCUSS_LIST, {
  type: type,
  id,
})
  .then((e) => {
    useRequest(
      checkStudentExist,
      {
        targetId: infoId,
        type: type,
        chapterId: chapterOrStageId,
        courseId: taskId,
      },
      (res) => {
        console.log("判断任务是否删除", res);
        if (res.code === 7) {
          router.push({
            path: "/loseefficacy",
          });
        } else {
          if (res.code === 6) {
            router.push({
              path: "/notpath",
            });
          }
          discussSettings.value = e.data.discussDtoList[0].discussSettings;
          state.info = e.data;
          console.log("讨论详情", state.info);
          state.discussId = e.data.discussDtoList[0].id;
          getPostList(e.data.discussDtoList[0].id);
        }
      }
    );
  })
  .catch((err) => {
    console.log(err);
  });
// 获取帖子
function getPostList(discussId) {
  console.log("获取帖子参数", {
    pid: discussId,
    current: state.pageNo,
    order: 1,
  });
  openLoading();
  request(PostList, {
    pid: discussId,
    current: state.pageNo,
    order: state.content,
  })
    .then((e) => {
      console.log("我是当前讨论下的帖子", e);
      // if (e.data.records) {
      //   let arr = e.data.records;
      //   for (let i = 0; i < arr.length; i++) {
      //     let obj = arr[i].content;
      //     let regex = new RegExp("<img", "gi");
      //     let deleteStyle = /(?<=\" )style=\".*?\"/gi;
      //     obj = obj.replace(deleteStyle, "");
      //     obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
      //     arr[i].content = obj;
      //   }
      // }
      state.postList = state.postList.concat(e.data.records);
      state.total = Number(e.data.total);
      if (e.data.records.length === 0 || e.data.records.length < 10) {
        state.noMore = true;
      }
      closeLoading();
    })
    .catch((err) => {
      console.log(err);
    });
}

// 最新
function nowPost(discussId) {
  state.content = 1;
  state.searchType = 1;
  state.pageNo = 1;
  state.currentPage = 1;
  state.postList = [];
  state.noMore = false;
  getPostList(discussId);
}
// 最热
function hotPost(discussId) {
  state.content = 2;
  state.searchType = 2;
  state.pageNo = 1;
  state.currentPage = 1;
  state.postList = [];
  state.noMore = false;
  getPostList(discussId);
}

//跳转到讨论详情
const goDetails = (item) => {
  console.log("item", item, state.info);
  router.push({
    path: "/discussdetail",
    query: {
      targetId: id,
      id: item.discussId,
      type,
      postID: item.id,
      postName: state.info.discussDtoList[0].discussName,
      discussSettings: discussSettings.value
    },
  });
};
// 帖子点赞
function like(d) {
  console.log("点击参数", d);
  d.praised
    ? (d.praiseNum = Number(d.praiseNum) - 1)
    : (d.praiseNum = Number(d.praiseNum) + 1);
  d.praised = !d.praised;
  console.log("我是点赞传递的参数", { targetId: d.id, type: 2 });
  request(PostPraise, { targetId: d.id, type: 3 })
    .then((res) => {
      console.log("我是点赞的操作", res);
    })
    .catch((err) => {
      console.log(err);
    });
}

// 分页
function handleCurrentChange(e, k) {
  console.log("分页打印", e, k);
  state.currentPage = state.currentPage + 1;
  state.pageNo = state.pageNo + 1;
  getPostList(state.info.discussDtoList[0].id);
}

// watch(state.postList, () => {
//   console.log("state.postList", state.postList);
//   // if (data.value.offcourseDto && data.value.offcourseDto.outline) {
//   //   let obj = data.value.offcourseDto.outline;
//   //   let regex = new RegExp("<img", "gi");
//   //   let deleteStyle = /(?<=\" )style=\".*?\"/gi;
//   //   obj = obj.replace(deleteStyle, "");
//   //   obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
//   //   data.value.offcourseDto.outline = obj;
//   //   console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
//   // }
// });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.discusspage {
  width: 100%;
  .discusspage_img_class img {
    max-width: 100% !important;
  }
  .head {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #fff;
    .title {
      width: 90%;
      margin-top: 10px;
      margin-bottom: 10px;
      color: #333330;
      font-size: 13px;
      line-height: 24px;
    }
  }
  .preview {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;

    .previewbox {
      width: 100%;
      // height: 200px;
      background: #fff;
      border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .previewmani {
        width: 100%;
        margin-top: 17px;
        .firstbtncontainer {
          width: 100%;
          margin-bottom: 12px;
          display: flex;
          justify-content: center;
          .inbtn {
            width: 90%;
            display: flex;
            .dd {
              width: 20px;
              height: 10px;
            }
            .samebtn {
              // width: 42.5px;
              // height: 23px;
              font-size: 13px;
              border: 0;
              border-radius: 2px;
            }
            .new {
              color: #fff;
              background-color: #387df7;
              // margin-right: 10px;
            }
            .hot {
              color: #6e7b84;
              background-color: #fff;
            }
          }
        }
        .discusstitle {
          width: 100%;
          margin-top: 15px;
          background-color: #f9f9f9;
          // height: 20px;
          display: flex;
          justify-content: center;
          .titcon {
            margin-top: 11px;
            width: 95%;
            display: flex;
            justify-content: space-between;
            .maint {
              color: #333330;
              font-size: 14px;
              line-height: 24px;
              font-weight: bold;
              width: 75%;
              margin-bottom: 16px;
            }
            .intime {
              display: flex;
              margin-top: 2px;
              .yuna {
                margin-top: 4px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 1px solid #0060ff;
              }
              .in {
                margin-left: 3px;
                color: #0060ff;
                font-size: 14px;
              }
            }
          }
        }

        .discusscontainer {
          // padding-bottom: 20px;
          width: 100%;

          .item {
            width: 90%;
            // position:relative;

            .thinline {
              // position:absolute;
              // margin-top: 12px;
              width: 100%;
              height: 0;
              left: 0;
              border-top: 1px solid #f1f2f3;
            }
            .coni {
              width: 100%;
              display: flex;
              justify-content: center;
              .conin {
                width: 90%;
                .tit {
                  margin-top: 25px;
                  color: #04243c;
                  font-weight: bold;
                  font-size: 14px;
                  // line-height: 24px;
                }
                .inn {
                  margin-bottom: 20px;
                  color: #6e7b84;
                  font-size: 13px;
                  line-height: 24px;
                  max-height: 200px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                }
              }
            }

            .bott {
              width: 100%;
              display: flex;
              justify-content: center;
              .dicon {
                display: flex;
                width: 90%;
                height: 35px;
                // background-color: #bfa;
                .imgcont {
                  margin-top: 10px;
                  display: flex;
                  align-items: center;
                  .imgs {
                    width: 14px;
                    height: 14px;
                  }
                }
                .samei {
                  color: #b3bdc4;
                  font-size: 13px;
                  line-height: 35px;
                  margin-left: 9.5px;
                }

                .sameii {
                  color: #387df7;
                  font-size: 13px;
                  line-height: 35px;
                  margin-left: 9.5px;
                }
              }
            }
          }
        }
        .clickMoreBox {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 400;
          color: #2478ff;
          padding-bottom: 20px;
        }
      }
    }
  }
}
</style>
