<template>
  <div v-if="show" class="right">
    <div class="showTitle">
      <el-icon><ZoomOut /></el-icon>
      <h2 @click="showComment">我的评价</h2>
    </div>
    <div class="Comment" id="CommentMSg" v-for="(item, i) in this.rows">
      <div id="commentTitle">
        <h4 id="order">订单编号:</h4>
        <div id="orderDetail">
          <h4>{{ item.id }}</h4>
        </div>
        <h4 id="range">分类范围：</h4>
        <div id="rangeDetail">
          <h4>{{ item.categoryName }}</h4>
        </div>
        <h4 id="date">日期：</h4>
        <div id="dateDetail">
          <h4>{{ item.createTime }}</h4>
        </div>
        <span id="detail">查看订单详情</span><br />
        <div id="commentMain">
          <div id="detailTop">
            <div>
              订单信息
            </div>
            <br>
            <br>
            <h6 id="nameDetail">{{ item.userName }}</h6>
            <h6 id="createTime" class="bigTime">{{ item.createTime }}</h6>
            <br />
            <h4 id="commentContext">{{ item.content }}</h4>
            <div></div>
            <hr />
            <div id="replyMsg" v-for="(item2, i) in item.children">
              <h6 id="nameDetail">{{ item2.username }}</h6>
              <h6 id="nameDetail" class="textReply">回复</h6>
              <h6 id="nameDetail" class="theBoss">
                {{ item2.toCommentUserName }}
              </h6>
              <h6 id="createTime" class="littleTime">{{ item2.createTime }}</h6>
              <h6 id="reply" class="littleReply" @click="replyPrompt($event)">
                回复
              </h6>
              <br />
              <h6 class="replyContext">{{ item2.content }}</h6>
              <hr id="replyHr" />
            </div>

            <br />
            <div class="showReply" id="replyMsg">
              <input type="text" /> <input type="button" value="发布" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav v-if="this.total * 1" style="text-align: -webkit-center">
      <!-- 分页居中放置-->
      <el-pagination
        :page-size="5"
        background
        style="width: max-content"
        :current-page="this.getPageNum"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="this.total * 1"
      />
    </nav>
    <div v-if="!(this.total * 1)">
      <img id="noImg" src="../img/noContent.png" />
      <h4>没有关于你的评价....</h4>
    </div>
  </div>
</template>

<script>
import { serverCommentList, userInfo } from "@/api";
import { ZoomOut } from "@element-plus/icons-vue";
export default {
  name: "MyComment",
  created() {
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    }
    userInfo().then((response) => {
      if (response.data.code === 200) {
        this.serverId = response.data.data.id;
        const params = {
          userId: this.serverId,
          pageNum: "1",
          pageSize: "5",
        };
        serverCommentList(params).then((response) => {
          if (response.data.code == 200) {
            this.rows = response.data.data.rows;
            this.total = parseInt(response.data.data.total);
          }
        });
      } else {
        alert("获取用户id失败");
      }
    });
  },
  data() {
    return {
      show: true,
      total: 0,
      pageCount: 9,
      serverId: "",
      pageNum: "1",
      pageSize: "5",
      rows: [],
    };
  },
  components: {
    ZoomOut,
  },

  methods: {
    /* ...mapActions("PerCent", ["postComment"]),
    async postCom(serverid, token) {
      await this.$store.dispatch("postComment", { serverId: serverid, token });
    }, */
    //获取大页码
    handleCurrentChange(val) {
      const params = {
        serverId: this.serverId,
        pageNum: val,
        pageSize: "5",
      };

      serverCommentList(params).then((response) => {
        if (response.data.code == 200) {
          this.rows = response.data.data.rows;
          this.total = parseInt(response.data.data.total);
        }
      });
    },
    showComment() {
      const p = {
        serverId: this.serverId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      serverCommentList(p).then((response) => {
        console.log(response.data.data.total);
      });
    },
  },
};
</script>
<style scoped>
.right {
  width: 59rem;
  background-color: rgb(255, 255, 255);
  top: 1rem;
  left: 24rem;
  border: 1px solid gray;
  border-radius: 10px;
  margin-left: 25rem;
}
.showTitle {
  position: relative;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid rgb(165, 162, 162);
  box-sizing: border-box;
  text-align: start;
  padding-left: 2rem;
}
.showTitle h2 {
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
}
/* 评价表 */
#commentTitle {
  /*   position: absolute; */
  margin: 0 auto;
  padding: 0;
  margin-top: 2rem;
  background-color: #f5f5f5;
  text-align: left;
  width: 85%;
  border-radius: 1rem;
}

#commentTitle h4 {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#commentTitle #order {
  margin-left: 1rem;
  margin-top: 2rem;
}
#commentTitle #detail {
  margin-left: 3em;
  color: #4c96b3;
}
#commentTitle #date {
  margin-left: 2rem;
}
#commentTitle div {
  display: inline-block;
  /*   background-color: aqua; */
  position: relative;
  top: 0.3rem;
}
#commentTitle #orderDetail {
  width: 8rem;
  overflow: hidden;
}
#commentTitle #range {
  margin-left: 0rem;
}
#commentTitle #rangeDetail {
  top: 0.2rem;
  width: 4.5rem;
  overflow: hidden;
}
.bigTime {
  margin-left: 0rem !important;
}
#commentTitle #dateDetail {
  position: relative;
  top: 0.3rem;
  width: 11rem;
  overflow: hidden;
}
#commentMain {
  background-color: #fdfdfd;
  margin: 0 auto;
  margin-left: 0.5rem;
  width: 98%;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

#commentMain h6 {
  /*  background-color: #4c96b3; */
  color: #726f6f;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-left: 1.5rem;
}
#commentMain #nameDetail {
  width: 6rem;
  overflow: hidden;
  margin-top: 1rem;
}
#commentMain #createTime {
  overflow: hidden;
  width: 11rem;
}
#commentMain #reply {
  cursor: pointer;
  margin-left: 26rem;
}
#commentMain hr {
  display: block;
  width: 95%;
  unicode-bidi: isolate;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  border-style: inset;
  border-width: 1px;
}
#commentMain #commentContext {
  margin-top: 0.5rem;
  margin-left: 2rem;
  margin-bottom: 1rem;
}
/* #CommentMSg :nth-child(3) {
  margin-bottom: 5rem;
} */
::v-deep .el-pagination {
  --el-pagination-font-size: 14px;
  --el-pagination-bg-color: var(--el-fill-color-blank);
  --el-pagination-text-color: var(--el-text-color-primary);
  --el-pagination-border-radius: 2px;
  --el-pagination-button-color: var(--el-text-color-primary);
  --el-pagination-button-width: 32px;
  --el-pagination-button-height: 32px;
  --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
  --el-pagination-button-bg-color: var(--el-fill-color);
  --el-pagination-hover-color: var(--el-color-primary);
  --el-pagination-font-size-small: 12px;
  --el-pagination-button-width-small: 24px;
  --el-pagination-button-height-small: 24px;
  --el-pagination-item-gap: 16px;
  white-space: nowrap;
  color: var(--el-pagination-text-color);
  font-size: var(--el-pagination-font-size);
  font-weight: 400;
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 3rem;
  justify-content: center;
  /*   position: fixed;
  top: 56rem;
  left: 11rem; */
}

/* 回复 */
.right #replyMsg {
  /*   display: none; */
  margin-bottom: 1rem;
}
input[type="button"] {
  background-color: #409eff;
  width: 6rem;
  height: 2rem;
  border-radius: 1rem;

  right: 2rem;
  border: none;

  color: white;
  text-align: center;
  letter-spacing: 0.3rem;
  cursor: pointer;
}
#replyMsg input[type="text"] {
  width: 22rem;
  height: 1.7rem;
  font-size: 1.2rem;
  margin-left: 2rem;
}

/* 回复小框内容 */
.right #detailTop .textReply {
  margin-left: -1rem;
}
.right #detailTop .theBoss {
  margin-left: -2rem;
}
.right #detailTop .littleReply {
  margin-left: 14rem !important;
  padding-right: 2rem !important;
}
.right #detailTop .replyContext {
  color: #282727;
  font-size: 1rem;
  margin-top: 1rem !important;
}
.right #detailTop .replyHr {
}
.right #detailTop #replyMsg {
  padding-left: 4rem;
}
.right #detailTop #replyMsg h6 {
  margin-top: 0rem;
}
.right #detailTop .littleTime {
  margin-left: -1rem;
}
/* 缺省页 */
#noImg {
  width: 26rem;
  margin-left: 2rem;
}
#noH3 {
  margin-left: 32rem;
}
</style>
