<template>
  <div class="CommentReply">
    <div class="reshead">
      <div
        style="
          opacity: relative;
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: center;
        "
      >
        <div
          class="reply"
          :style="{
            opacity: reply1Show ? 0 : 1,
            zIndex: reply1Show ? 0 : 100,
          }"
        >
          <UploadPostImg
            :max="3"
            v-model="commentSubmitFileList"
            @fileUploadValue="uploadBack"
          >
            <img
              style="width: 28px; height: 28px; margin-right: 5px"
              src="@/assets/image/uploadImg2.png"
            />
          </UploadPostImg>
          <el-input
            type="text"
            v-model="disComment.content"
            resize="none"
            maxlength="200"
            placeholder="写评论~"
            style="width: calc(100% - 40px)"
          />
        </div>

        <div
          class="reply"
          :style="{
            opacity: reply1Show ? 1 : 0,
            zIndex: reply1Show ? 100 : 0,
          }"
        >
          <el-input
            type="text"
            v-model="replayComment.content"
            resize="none"
            maxlength="200"
            :placeholder="replayComment.placeholder"
            style="width: calc(100% - 40px)"
            class="replyInp"
          />
          <UploadPostImg
            :max="3"
            v-model="fileListCommentRelpay"
            @fileUploadValue="uploadReplyBack"
          >
            <img
              style="width: 28px; height: 28px; margin-left: 5px"
              src="@/assets/image/uploadImg2.png"
            />
          </UploadPostImg>
        </div>
      </div>

      <div class="imgbtns">
        <div style="display: flex">
          <div
            v-for="(v, i) in reply1Show
              ? fileListCommentRelpay
              : fileListComment"
            :key="i"
            style="position: relative"
          >
            <img
              :src="fielPath + v.url"
              style="width: 66px; height: 66px; margin-left: 5px"
            />
            <div
              class="cha"
              @click="reply1Show ? removeImg(i) : removeCommentImg(i)"
            ></div>
          </div>
        </div>
        <div class="btns">
          <button class="btns1" @click="reply1Blur">取消</button>
          <button class="btns2" @click="send" v-loading="submitLoading">
            发布
          </button>
        </div>
      </div>
    </div>
    <!-- <div class="linee"></div> -->

    <div class="restorebox" v-for="(item, index) in commontList" :key="index">
      <div class="restoremani">
        <div class="rescon clearfix">
          <div class="head">
            <div>
              <img
                class="headavator"
                :src="
                  item.studentAvatar.includes('upload')
                    ? item.studentAvatar
                    : fielPath + item.studentAvatar
                "
              />
            </div>
            <div class="namehead">
              {{ item.createName }}
            </div>
          </div>
          <div class="inner">
            <div class="recon">{{ item.content }}</div>
            <div
              style="display: flex; margin-top: 6px; margin-bottom: 6px"
              v-if="item.img"
            >
              <div
                v-for="(rowimg, i) in item.img.split(',')"
                :key="i"
                style="width: 55px; height: 55px; margin-right: 5px"
              >
                <img
                  class="image"
                  style="width: 55px; height: 55px; border-radius: 4px"
                  :src="fielPath + rowimg"
                />
              </div>
            </div>
            <div class="botto">
              <div class="time">{{ item.createTime }}</div>
              <div class="re" @click="commentComment(item)">回复</div>
              <div class="right" @click="commentLike(item)">
                <div class="good">
                  <img
                    v-if="item.praised"
                    src="../assets/image/discuss/elsedianzan1.png"
                  />
                  <img v-else src="../assets/image/discuss/elsedianzan.png" />
                </div>
                <div class="gocount">{{ item.praiseNum || 0 }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="newre" v-if="item.children && item.children.length !== 0">
          <div class="tri"></div>
          <div class="reccon">
            <div class="rec clearfix">
              <div
                class="it"
                v-for="(itemc, key) in item.children"
                :key="key"
                :style="{
                  display:
                    spreadReply !== index && key == 0
                      ? 'block'
                      : spreadReply == index
                      ? 'block'
                      : 'none',
                }"
              >
                <div class="ava">
                  <img
                    class="avainner"
                    :src="
                      itemc.studentAvatar.includes('upload')
                        ? itemc.studentAvatar
                        : fielPath + itemc.studentAvatar
                    "
                  />
                  <div class="rename">{{ itemc.studentName }}</div>
                </div>
                <div class="redetail">
                  <div class="rein">{{ itemc.content }}</div>
                  <div
                    style="display: flex; margin-top: 6px; margin-bottom: 6px"
                    v-if="itemc.img"
                  >
                    <div
                      v-for="(rowimg, i) in itemc.img.split(',')"
                      :key="i"
                      style="width: 55px; height: 55px; margin-right: 5px"
                    >
                      <img
                        class="image"
                        style="width: 55px; height: 55px; border-radius: 4px"
                        :src="fielPath + rowimg"
                      />
                    </div>
                  </div>
                  <div class="detre">
                    <div class="day">{{ itemc.createTime }}</div>
                    <!-- <div class="huifu" @click="commentComment(itemc)">
                        回复
                      </div> -->
                    <div class="good" @click="commentLike(itemc)">
                      <img
                        v-if="itemc.praised"
                        class="gimg"
                        src="../assets/image/discuss/elsedianzan1.png"
                      />
                      <img
                        v-else
                        class="gimg"
                        src="../assets/image/discuss/elsedianzan.png"
                      />
                      <div class="gcou">
                        {{ itemc.praiseNum || 0 }}
                      </div>
                    </div>
                  </div>
                  <!-- <div class="line"></div> -->
                  <!-- <div
                      :class="index === newrestore.length - 1 ? null : 'line'"
                    ></div> -->
                </div>
              </div>
            </div>
          </div>
          <!-- 查看更多 -->
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              width: 100%;
              margin-top: 10px;
            "
            v-if="item.children && item.children.length > 1"
          >
            <span
              @click="lookMore(index)"
              style="font-size: 14px; color: #2478ff"
              >{{
                index == spreadReply
                  ? "收起"
                  : "查看全部" + item.children.length + "条评论"
              }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="btncon clearfix">
      <button
        class="btnn"
        v-if="!noMorePost && hfPage.total > 10"
        @click="handleCurrentChange"
      >
        点击加载更多~
      </button>
      <button class="btnn" v-else style="color: rgba(95, 109, 117, 1)">
        已经到底啦~
      </button>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, computed, defineProps, watch } from "vue";
import ReturnHead from "@/components/ReturnHead.vue";
import px from "@/assets/image/discuss/px.jpg";
import { request, useRequest } from "@/api/request";
import {
  PostDetails,
  COMMENT_LIST,
  DISCUSS_LIST,
  COMMENT_PRAISE,
  COMMENT_ADD,
} from "@/api/api";
import { useRoute, useRouter } from "vue-router/dist/vue-router";
import UploadPostImg from "@/components/img/UploadPostImg.vue";
import { ElMessage } from "element-plus";
import { toDate } from "@/api/method";
import store from "@/store";
const props = defineProps({
  type: {
    type: Number,
    default: null,
  },
  faceId: {
    type: Number,
    default: null,
  },
});
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const userInfo = computed(() => store.state.userInfo);

const disDetail = ref({});
const commontList = ref([]);
const spreadReply = ref(-1);
const hfPage = ref({
  currentPage: 1,
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const noMorePost = ref(false);
// 获取数据
console.log("props.faceId", props.faceId);
const getData = () => {
  // 获取帖子下的评论
  request(COMMENT_LIST, {
    id: props.faceId,
    type: props.type,
    current: hfPage.value.currentPage,
    pageSize: 10,
  })
    .then((res) => {
      console.log("我是获取当前帖子的评论", res);
      commontList.value = commontList.value.concat(res.data.records);
      hfPage.value.total = Number(res.data.total);
      clearText();
      submitLoading.value = false;
      if (res.data.records.length === 0 || res.data.records.length < 10) {
        noMorePost.value = true;
      }
    })
    .catch((err) => {
      console.log(err);
      submitLoading.value = false;
    });
};
getData();
// watch(
//   props.faceId,
//   () => {
//     console.log("props.faceId", props.faceId);
//     getData();
//   },
//   {
//     deep: true,
//   }
// );

// 查看更多-展开回复列表
function lookMore(i) {
  i == spreadReply.value ? (spreadReply.value = -1) : (spreadReply.value = i);
}
// 清空回复及评论输入框
const clearText = () => {
  disComment.value.content = "";
  fileListComment.value = [];
  fileListCommentRelpay.value = [];
  replayComment.value.content = "";
};

// 评论分页
function handleCurrentChange(e, k) {
  console.log("分页打印", e, k);
  hfPage.value.currentPage = hfPage.value.currentPage + 1;
  hfPage.value.pageNo = hfPage.value.pageNo + 1;
  getData();
}
const commentSubmitFileList = ref([]);

const disComment = ref({
  content: "",
});
const replayComment = ref({
  placeholder: "",
  content: "",
  pid: "",
});

// 评论图片展示数组
const fileListComment = ref([]);
// 回复图片展示数组
const fileListCommentRelpay = ref([]);

// 上传图片成功返回的URL
const uploadBack = (e) => {
  console.log("--------->", e);
  fileListComment.value.push(e);
};

const uploadReplyBack = (e) => {
  console.log("--------->", e);
  fileListCommentRelpay.value.push(e);
};

function removeImg(i) {
  fileListCommentRelpay.value.splice(i, 1);
}

function removeCommentImg(i) {
  fileListComment.value.splice(i, 1);
}

function commentLike(obj) {
  obj.praised
    ? (obj.praiseNum = Number(obj.praiseNum) - 1)
    : (obj.praiseNum = Number(obj.praiseNum) + 1);
  obj.praised = !obj.praised;
  request(COMMENT_PRAISE, { targetId: obj.id, type: 1 });
}

const reply1Show = ref(false);
const autofocus = ref(false);
function commentComment(obj) {
  reply1Show.value = true;
  // autofocus.value = true;
  replayComment.value.placeholder = "@ " + obj.createName;
  replayComment.value.pid = obj.id;
  if (document.getElementsByClassName("replyInp")[0]) {
    document
      .getElementsByClassName("replyInp")[0]
      .querySelector("input")
      .focus();
  }

  console.log("获得焦点", document.getElementsByClassName("replyInp")[0]);
}
function reply1Blur() {
  reply1Show.value = false;
  console.log("失去焦点");
}
// function reply1Focus() {
//   reply1Show.value = true;
//   autofocus.value = true;
// }

// 提交评论
const submitLoading = ref(false);
function submitComment() {
  console.log(disDetail.value, fileListComment.value);
  let imgFileUrl = [];
  for (let i = 0; i < fileListComment.value.length; i++) {
    imgFileUrl.push(fileListComment.value[i].url);
  }
  console.table("帖子评论参数", {
    id: disDetail.value.id,
    targetId: disDetail.value.id,
    content: disComment.value.content,
    type: 2,
    img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
  });
  if (!disComment.value.content && imgFileUrl.length === 0)
    return ElMessage.success("请输入评论内容");
  if (submitLoading.value) {
    ElMessage.error(`请勿频繁点击`);
    return;
  }
  submitLoading.value = true;
  request(COMMENT_ADD, {
    id: props.faceId,
    targetId: props.faceId,
    content: disComment.value.content,
    type: props.type,
    img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
  })
    .then((res) => {
      console.log("评论发表成功", res);
      ElMessage.success("发布成功");
      hfPage.value.pageNo = 1;
      hfPage.value.currentPage = 1;
      commontList.value = [];
      submitLoading.value = false;
      getData();
    })
    .catch((err) => {
      console.log("评论发表失败", err);
    });
}

// 回复评论
function submitReplayComment() {
  let imgFileUrl = [];
  for (let i = 0; i < fileListCommentRelpay.value.length; i++) {
    imgFileUrl.push(fileListCommentRelpay.value[i].url);
  }

  console.table("帖子回复评论参数", {
    id: disDetail.value.id,
    targetId: disDetail.value.id,
    content: replayComment.value.content,
    type: 2,
    pid: replayComment.value.pid,
    img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
  });
  if (!replayComment.value.content && imgFileUrl.length === 0)
    return ElMessage.success("请输入回复内容");
  if (submitLoading.value) {
    ElMessage.error(`请勿频繁点击`);
    return;
  }
  submitLoading.value = true;
  request(COMMENT_ADD, {
    targetId: disDetail.value.id,
    content: replayComment.value.content,
    type: 2,
    pid: replayComment.value.pid,
    img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
  })
    .then((res) => {
      console.log("回复成功", res);
      // getData();
      ElMessage.success("回复成功");
      for (let i = 0; i < commontList.value.length; i++) {
        if (commontList.value[i].id === replayComment.value.pid) {
          //获取当前时间
          let nowTime = toDate(new Date().getTime() / 1000, "Y-M-D h:m:s");
          let obj = {
            id: res.data,
            studentAvatar: userInfo.value.avatar,
            studentName: userInfo.value.realName,
            content: replayComment.value.content,
            praised: false,
            praiseNum: 0,
            createTime: nowTime,
          };
          commontList.value[i].children.unshift(obj);
        }
      }
      reply1Show.value = false;
      submitLoading.value = false;
      clearText();
    })
    .catch((err) => {
      console.log(err);
    });
}
//发布
function send() {
  if (reply1Show.value) {
    console.log("回复--------");
    submitReplayComment();
  } else {
    console.log("评论--------");
    submitComment();
  }
}
</script>
<style lang="scss">
.CommentReply {
  width: 100%;
  // display: flex;
  // justify-content: center;
  margin-top: 10px;
  background: #fff;
  .reshead {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    .headn {
      width: 90%;
      display: flex;
      justify-content: space-between;
      .pl {
        color: #0d233a;
        font-size: 16px;
        line-height: 50px;
      }
      .ts {
        color: #6e7b84;
        font-size: 13px;
        line-height: 50px;
      }
    }
    .reply {
      display: flex;
      align-items: center;
      width: 90%;
      position: absolute;
    }
    .imgbtns {
      width: 90%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // margin-top: 10px;
      .cha {
        position: absolute;
        top: 2px;
        right: 2px;
        // right: 0;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background-image: url(../assets/image/discuss/close.png);
        background-size: 100%;
      }
      .btns {
        display: flex;
      }
      .btns1 {
        // width: 50px;
        // height: 25px;
        border: 1px solid #999999;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-right: 16px;
        padding: 1px 8px 1px 8px;
      }
      .btns2 {
        // width: 50px;
        // height: 25px;
        background: #2478ff;
        border: 1px solid #2478ff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        padding: 1px 8px 1px 8px;
      }
    }
  }
  .linee {
    height: 0;
    width: 100%;
    border-top: 1px solid #f1f2f3;
  }
  .restorebox {
    width: 100%;
    // height: 200px;
    border-top: 1px solid #f1f2f3;
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    .restoremani {
      width: 90%;
      margin-top: 17px;
      position: relative;
      .rescon {
        position: relative;
        width: 100%;
        // height: 100px;
        // background-color: #bfa;
        .head {
          display: flex;
          width: 100%;
          .headavator {
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }
          .namehead {
            margin-left: 5px;
            color: #02172a;
            font-size: 14px;
            line-height: 36px;
          }
        }
        .inner {
          margin-top: 8px;
          margin-left: 36px;

          .recon {
            margin-top: 7px;
            color: #5f6d75;
            font-size: 14px;
            line-height: 18px;
          }
          .botto {
            display: flex;
            margin-top: 20px;
            position: relative;
            .time {
              color: #5f6d75;
              font-size: 14px;
              margin-right: 16.5px;
            }
            .re {
              color: #00152a;
              font-size: 14px;
              margin-top: -2px;
            }
            .right {
              display: flex;
              position: absolute;
              right: 0;
              .good {
                margin-top: -2px;
              }
              .gocount {
                color: #4e5e67;
                font-size: 13px;
                margin-left: 6.5px;
              }
            }
          }
        }
      }

      .newre {
        margin-top: 7.5px;
        padding-bottom: 20px;
        .tri {
          margin-left: 80px;
          height: 0px;
          width: 0px;
          border-bottom: 10px solid #f0f3f6;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
        }
        .reccon {
          width: 100%;
          display: flex;
          justify-content: right;
          // padding-bottom: 20px;
          .rec {
            background-color: #f0f3f6;
            border-radius: 13px;
            width: 90%;
            .it {
              margin-left: 12.5px;
              width: 92%;
              // display: flex;
              margin-top: 20px;
              // margin-bottom: 20px;
              .ava {
                // margin-top: 20px;
                display: flex;
                align-items: center;
                .avainner {
                  width: 36px;
                  height: 36px;
                  border-radius: 50%;
                }
                .rename {
                  color: #02172a;
                  font-size: 14px;
                  margin-left: 5px;
                }
              }
              .redetail {
                width: 100%;
                margin-left: 12.5px;

                .rein {
                  color: #5f6d75;
                  font-size: 14px;
                  margin-top: 16.5px;
                }
                .detre {
                  margin-top: 10px;
                  display: flex;
                  position: relative;
                  margin-bottom: 20px;
                  .day {
                    color: #5f6d75;
                    font-size: 14px;
                    margin-right: 14px;
                  }
                  .huifu {
                    color: #00152a;
                    font-size: 14px;
                  }
                  .good {
                    position: absolute;
                    right: 2px;
                    display: flex;
                    .gimg {
                      width: 14px;
                      height: 15px;
                    }
                    .gcou {
                      color: #4e5e67;
                      font-size: 13px;
                      margin-top: 2px;
                      margin-left: 7px;
                    }
                  }
                }
                .line {
                  // margin-top: 24.5px;
                  margin-left: -45px;
                  height: 0;
                  width: 117%;
                  border-top: 1px solid #dcdedf;
                }
              }
            }
          }
        }
      }
    }
  }
  .btncon {
    width: 100%;
    height: 60px;
    position: relative;
    .btnn {
      margin-top: 30px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      border: 0;
      background-color: #fff;
      color: #2478ff;
    }
  }
  .reply1 {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    position: absolute;
    bottom: 100px;
  }
}
</style>