<template>
  <view>
    <u-popup
      :show="orderModalShow"
      mode="bottom"
      :round="8"
      :background="'#fff'"
      style="background: #fff" backgroundColor="#fff"
    >
      <view class="orderModalShow popup_box">
        <view style="text-align: center"
          >全部 {{ articleInfo.likeCount }} 人点赞</view
        >

        <u-icon
          name="close"
          color="#333"
          size="18"
          @click="closeOrderModalShow"
          style="
            display: inline-block;
            position: absolute;
            right: 20rpx;
            top: 20rpx;
          "
        ></u-icon>
        <view style="padding-top: 40rpx; overflow: auto; padding-bottom: 0rpx">
        
        
        
        
          <view class="hb-comment" style="height: 80vh">
          <view class="comment-list" v-if="likeList.length != 0">
          <view class="comment-box" v-for="(item, index) in likeList">
        <view class="comment-box-item">
          <view>
            <image
              v-if="item.user.avatar"
              :src="item.user.avatar"
              mode="aspectFill"
              class="avatar"
            ></image>
            <image
              v-else
              src="/static/icon/noIcon.png"
              mode="aspectFill"
              class="avatar"
            ></image>
          </view>
          <view class="comment-main">
            <!-- 父评论体-start -->
            <view class="comment-main-top">
              <view class="nick-name-box">
                <view class="nick-name"
                  >{{ item.user.nickname ? item.user.nickname : "普通用户" }}
                  </view
                >
              </view>
            </view>
        
           
          
          </view>
        </view>
      </view>
      </view>
      </view>
        </view>
        <!-- <hb-comment
          
          :user="currentUser"
          ref="hbComment"
          @add="sendComment"
          @del="del"
          @focusOn="focusOn"
          :deleteTip="'确认删除？'"
          :cmData="commentData"
          v-if="commentData"
        ></hb-comment> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";


export default {
  components: {

  },
  props:[],
  data() {
    return {
      articleId: null,
      currentUser: {},

      orderModalShow: false,
      likeList: [],
      articleInfo: {},

    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  async onLoad(options) {

  },
   onShow() {



  },

  methods: {
    // 自适应判断



   async onHandleClickOpenComment(id) {
      this.articleId=id;
      console.log("111 at line 384:", 111);
      console.log(
        "this.currentUser at line 365:",
        this.articleInfo.taihuTalent
      );
      await this.getMedicalDetail(()=>{
        this.orderModalShow = true;
      });

      
    },
    closeOrderModalShow() {
      this.orderModalShow = false;
      this.$emit("close",this.articleId);

    },
    saveContens(content) {
      console.log("content at line 322:", content);
      this.formData.message = content;
    },
    handleSubmit(type, isNewSave) {
      console.log("this.editableMap at line 243:", this.formData);

      if (!this.formData.title) {
        this.$commonJS.showToast("请输入文章标题");
        return;
      }
      if (!this.formData.message) {
        this.$commonJS.showToast("请输入文章正文内容");
        return;
      }
      if (this.fileList1.length == 0) {
        this.$commonJS.showToast("请至少上传一张图片");
        return;
      }

      var data = {
        img:
          this.fileList1.length > 0
            ? this.fileList1.map((e) => e.url).toString()
            : "",
        title: this.formData.title ? this.formData.title : "",
        content: this.formData.message ? this.formData.message : "",
      };

      this.$http
        .request({
          url: "common/taihuTalentArticle/addArticle",
          method: "POST",
          data: {
            ...data,
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            uni.redirectTo({
              url: "/pages/articleList/index",
            });
          } else {
            this.$commonJS.showToast(res.msg);
          }
        })
        .catch((err) => {});
    },




    //点击每个记录


    //创建新对话
    sendComment(comment, pid) {
      this.$http
        .request({
          url: "common/taihuTalentArticle/addArticleComment",
          method: "POST",
          data: {
            pid: pid ? pid : 0, //第一条评论为0
            articleId: this.articleId, //文章id

            content: comment, //内容
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("res at line 713:", res);
          if (res.code == 0) {
            this.getMedicalDetail();
          } else {
            this.$commonJS.showToast("评论失败");
          }
        });
    },

    //交谈请求，获取回答
    getTree(data) {
      let result = [];
      let map = {};
      data.forEach((item) => {
        map[item.id] = item;
      });
      data.forEach((item) => {
        let parent = map[item.parentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    getMedicalDetail(fn) {
      //清空消息记录

      this.$http
        .request({
          url: "common/taihuTalentArticle/getArticleLikeAndComment",
          method: "POST",
          data: {
            articleId:  this.articleId,
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("res at line 682:", res);
          if (res.code == 0) {
            this.loading = false;

            this.articleInfo = res.article;
            this.medicalForm = { ...this.articleInfo };
            console.log("this.medicalForm at line 193:", this.articleInfo);
           
            this.$nextTick(() => {
              // if (this.userInfo.id == this.articleInfo.userId) {
              //   this.currentUser = this.articleInfo.taihuTalent;
              // } else {
                this.currentUser = {...this.userInfo,icon:this.userInfo.avatar};

                console.log('this.currentUser at line 823:', this.currentUser)
              // }
            });
            this.likeList = res.article.likeList;
           
           
            if(fn){
              fn();
            }

            // 滚动到最底部锚点
            //   that.$nextTick(() => {
            //     that.scrollToBottom();
            //   });
            // 停止轮询
          }
        })
        .catch((error) => {
          console.log("请求出错:", error);
        });

      //调用后端 SSE 接口，发送问题并接收实时回答
      // this.startSSE(params);
    },
  },
  onHide() {},
  onUnload() {},
};
</script>

<style lang="scss" scoped>
@import "@/static/mixin.scss";

.hb-comment {
  //   padding: 10rpx;
}

.top-read {
  font-size: 28rpx;
  padding-left: 10rpx;
  color: #999999;
}

.seg_line_box {
  display: flex;
  height: 5rpx;
  justify-content: space-between;
  margin: 5rpx 0;
}

.seg_line {
  width: 45%;
  border-bottom: 1rpx solid #e1e1e1;
}

.seg_dot {
  width: 8%;
  border-bottom: 5rpx dotted #dbdbdb;
}

.comment-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.comment-box {
  padding: 20rpx 0;
}

.comment-box-item {
  width: 100%;
  display: flex;
}

.comment-main {
  width: calc(100% - 70rpx);

  padding-left: 20rpx;
}

.comment-main-top {
  width: 600rpx;
  padding-top: 12rpx;
  display: flex;
  justify-content: space-between;
}

.sub-comment-main-top {
  width: 510rpx;
  padding-top: 6rpx;
  display: flex;
  justify-content: space-between;
}

.avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.nick-name-box {
  display: flex;
  align-items: center;
}

.comLogo {
  margin-right: 18rpx;
  font-size: 22rpx;
  border-radius: 10rpx;
  padding: 5rpx 15rpx;
  color: #ffffff;
}

.com1 {
  background-color: #d218b1;
}

.com2 {
  background-color: #f19c0b;
}

.com3 {
  background-color: #c8da85;
}

.com4 {
  background-color: #bfd0da;
}

.nick-name {
  color: #2d8cf0;
  color: #494943;
  line-height: 50rpx;
  // font-size: 40rpx;
}

.isLike {
  font-size: 28rpx;
  padding-right: 10rpx;
  color: #2d8cf0;
}

.notLike {
  font-size: 28rpx;
  padding-right: 10rpx;
  color: #999999;
}

.comment-main-content {
  width: 100%;
  padding: 8rpx 10rpx 8rpx 0;
  text-align: justify;
  white-space: pre-wrap;
  word-wrap: break-word;
  //   font-size: 30rpx;
}

.comment-main-foot {
  display: flex;
  font-size: 22rpx;
  line-height: 24rpx;
  margin-top: 6rpx;
  margin-top: 6rpx;
}

.replayTag {
  color: #909399;
  margin-bottom: 5px;
  border: 1px solid #c8c9cc;
  background-color: #f4f4f5;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16rpx;
  padding: 5px 10px;
}

.replyTagClose {
  font-size: 20px;
  line-height: 12px;
  padding: 0 0 2px 5px;
}

.foot-btn {
  padding-left: 20rpx;
  color: #007aff;
}

.comment-sub-box {
  padding: 20rpx 0;
}

.comment-sub-item {
  display: flex;
  margin-bottom: 12rpx;
}
.popup_box {
  padding: 20rpx;

  box-sizing: border-box;
  .curriulum_title_box {
    .title {
      text-align: center;
      font-size: 34rpx !important;
    }
  }
}
</style>
