<template>
  <div class="discussdetail">
    <!-- <TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead> -->
    <ReturnHead text="评论详情"></ReturnHead>
    <div class="tithead">
      <div class="headin">
        <div class="vaa">
          <img class="vaaimg" :src="disDetail?.userAvatar" />
        </div>
        <div class="vaainfo">
          <div class="vaana">{{ disDetail?.userName }}</div>
          <div class="vaanato">-</div>
        </div>
      </div>
    </div>

    <div class="preview">
      <div class="previewbox">
        <div class="previewmani">
          <div class="alltalkcontainer">
            <div class="inne">
              <div class="takltitle">{{ disDetail?.title }}</div>
              <div
                class="taklcon discussdetail_img_class"
                v-html="disDetail?.content"
              ></div>
              <div class="tt clearfix">
                <div class="ttin">
                  {{ discussInfo ? discussInfo : "-" }}
                </div>
              </div>
              <div class="botime">{{ disDetail?.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="restore">
      <div v-if="discussSettings=='true'" class="reshead">
        <div class="headn">
          <div class="pl">评论</div>
          <div class="ts">{{ hfPage?.total }}条</div>
        </div>
        <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>
    <!-- <div
      class="restore"
      v-else v-if="discussSettings"
      style="height: 60px; font-size: 14px; padding-top: 10px"
    >
      <div style="margin-left: 20px">暂不支持评论</div>
    </div> -->
    <!-- 回复框 -->
    <!-- <div class="reply1" v-if="reply1Show">
      <el-input
        type="text"
        v-model="replayComment.content"
        resize="none"
        maxlength="100"
        :placeholder="replayComment.placeholder"
        style="width: calc(100% - 40px)"
        @blur="reply1Blur"
        :autofocus="autofocus"
      />
      <img
        style="width: 28px; height: 28px; margin-left: 5px"
        src="../../assets/image/uploadImg2.png"
      />
    </div> -->
  </div>
</template>

<script setup>
import { reactive, ref, computed, 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 userInfo = computed(() => store.state.userInfo);
const {
  query: { id, type, postID, targetId, discussSettings },
} = useRoute();
const restore = ref([
  {
    name: "罗宗梅",
    time: "2022-09-01",
    re: "教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。",
    head: px,
    reimg: px,
  },
]);
const newrestore = ref([
  {
    name: "赵雪梨",
    time: "3天前",
    re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
    head: px,
  },
]);
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const disDetail = ref({});
const commontList = ref([]);
const spreadReply = ref(-1);
const hfPage = ref({
  currentPage: 1,
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
//获取讨论详情
const discussInfo = ref("");
request(DISCUSS_LIST, {
  type: type,
  id: targetId,
})
  .then((e) => {
    console.log("讨论详情", e);
    discussInfo.value = e.data.discussDtoList[0].discussExplain;
  })
  .catch((err) => {
    console.log(err);
  });
const noMorePost = ref(false);
// 获取数据
const getData = () => {
  useRequest(PostDetails, { id: postID }, (e) => {
    console.log("disDetail", e);
    disDetail.value = e.data;
    console.log("查询帖子下的评论参数", {
      statementId: e.data.discussId,
      pageNo: 10,
      pageSize: 1,
    });
    // 获取帖子下的评论
    request(COMMENT_LIST, {
      id: e.data.id,
      type: 1,
      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();

// 查看更多-展开回复列表
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 like() {
  console.log(disDetail.value);
  disDetail.value.praised
    ? (disDetail.value.praiseNum = Number(disDetail.value.praiseNum) - 1)
    : (disDetail.value.praiseNum = Number(disDetail.value.praiseNum) + 1);
  disDetail.value.praised = !disDetail.value.praised;
  request(PostPraise, { targetId: disDetail.value.id, type: 3 });
}

function collection() {
  disDetail.value.collected
    ? (disDetail.value.collectionNum =
        Number(disDetail.value.collectionNum) - 1)
    : (disDetail.value.collectionNum =
        Number(disDetail.value.collectionNum) + 1);
  disDetail.value.collected = !disDetail.value.collected;
  request(PostPraise, { targetId: disDetail.value.id, type: 4 });
}

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: 1,
    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, {
    targetId: disDetail.value.id,
    content: disComment.value.content,
    type: 1,
    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: 1,
    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: 1,
    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();
  }
}

// watch(disDetail, () => {
//   console.log(" disDetail.value.content", disDetail.value.content);
//   if (disDetail.value.content) {
//     let obj = disDetail.value.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"');
//     disDetail.value.content = obj;
//     console.log("disDetail.value.content", disDetail.value.content);
//   }
// });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.discussdetail {
  width: 100%;
  .discussdetail_img_class img {
    max-width: 100% !important;
  }
  .tithead {
    margin-top: 10px;
    height: 77px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
    .headin {
      width: 90%;
      height: 100%;
      display: flex;
      // background-color: lightcoral;
      .vaa {
        margin-top: 22px;
        .vaaimg {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      .vaainfo {
        margin-left: 8px;
        margin-top: 16.5px;
        .vaana {
          color: #0d233a;
          font-size: 14px;
        }
        .vaanato {
          margin-top: 4px;
          color: #747474;
          font-size: 12px;
        }
      }
    }
  }
  .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: 90%;

        // .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: 100%;
        //       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;
        //       }
        //     }
        //   }
        // }

        .alltalkcontainer {
          width: 100%;
          // background-color: #bfa;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          .inne {
            width: 95%;
            .takltitle {
              color: #04243c;
              font-size: 14px;
              line-height: 24px;
              font-weight: bold;
              margin-bottom: 5px;
            }
            .taklcon {
              color: #333330;
              font-size: 13px;
              line-height: 24px;
            }

            .tt {
              margin-top: 20px;
              background-color: #f0f3f6;
              border-radius: 10px;
              width: 100%;
              display: flex;
              justify-content: center;
              .ttin {
                width: 90%;
                margin-top: 25px;
                font-size: 13px;
                line-height: 24px;
                margin-bottom: 30px;
              }
            }
            .botime {
              width: 100%;
              text-align: right;
              color: #6e7b84;
              font-size: 13px;
              line-height: 24px;
              margin: 16.5px 0 18.5px 0;
            }
          }
        }
      }
    }
  }

  .restore {
    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>
