<template>
  <view>
    <u-navbar title="详情">
      <template #right>
        <!-- <view style="width: 50rpx; font-size: 32rpx; margin-right: 0.1rem">
          <u-icon
            style="font-size: 0.22rem; color: #b4b6bd"
            v-if="!detailsData.isCllect"
            name="star"
            @click="onStar(0)"
          ></u-icon>
          <u-icon
            style="font-size: 0.22rem; color: #ffc300"
            v-else
            name="star-fill"
            @click="onStar(1)"
          ></u-icon>
        </view> -->
      </template>
    </u-navbar>

    <!-- <view class="detail">
      <view class="flex-col section_3">
        <view class="justify-between group">
          <view class="flex-row">
            <image
              :src="$u.http.config.imgUrl + detailsData.userHead"
              class="image image_4"
            />
            <view class="flex-col items-start group_3">
              <text class="text_1">{{detailsData.userName}}</text>
              <text class="text_2">{{detailsData.schoolName}}</text>
            </view>
          </view>
          <text class="text_3">{{detailsData.creationTime}}</text>
        </view>
        <text class="text_4">{{detailsData.title}}</text>
        <view class="flex-col group_4">
          <view class="flex-col group_31">
			  {{detailsData.content}}
          </view>
		  <view v-if="detailsData.imageUrl.indexOf('.')>0">
			  <image
			  v-for="(v, i) in detailsData.imageUrl.split(',')" :key="i" :src="v?$u.http.config.imgUrl + v:''"
			    class="image_5"
			  />
		  </view>
        </view>
		<view class="flex-row" v-if="detailsData.type==1">
        <text v-for="(v, i) in detailsData.sysSignStr.split(',')" :key="i" class="text_21" ># {{v}}</text>
		</view>
      </view>
    </view> -->
    <information :list="[detailsData]" :type="2" :nolink="true" :isDel="isDel" @onDelete="onDelete"></information>
    <!-- 评论 -->
    <view class="comment" v-if="detailsData.type != 3">
      <view class="flex-col section_4">
        <view class="justify-between group_8">
          <text class="text_22">评论 {{ detailsData.commentCount }}</text>
          <!-- {{ detailsData.collectCount }} 收藏 -->
          <text class="text_23">
            <text v-if="detailsData.type != 0" style="padding: 0 0.1rem">|</text><text v-if="detailsData.type != 0">{{
              detailsData.forwardCount }} 转发</text></text>
        </view>
        <scroll-view scroll-y="true" style="width: 100%; height: calc(100vh - 1.4rem)" @scrolltolower="onreachBottom">
          <view class="flex-col group_27">
            <view class="flex-col group" v-for="(item, index) in commonData" :key="index">
              <view class="justify-between group_6">
                <view class="flex-row reply-title">
                  <u-avatar :src="$u.http.config.imgUrl + item.userHead" class="image image_6"></u-avatar>
                  <text class="text_24">{{ item.userName }}</text>
                  <text class="author" v-if="item.userId == detailsData.userId">作者</text>
                  <text class="text_27">{{ item.creationTime }}</text>
                </view>

                <!-- <view class="text-delete" v-if="
                  item.userId == vuex_user.id ||
                  detailsData.userId == vuex_user.id
                " @tap="DelateComment(item.commendId,item.listCount)"> 删除
                </view> -->
                <view class="flex-row" style="align-items: center;">
                <!-- flex-row group_12 -->
                  <view  @click="onLike(item, index)">
                    <image src="/static/common/img/homepage/like.png" class="icon-like" v-if="!item.isLike" />
                    <image src="/static/common/img/homepage/like-active.png" class="icon-like" v-else />
                    <!-- <text class="text_25">{{ item.likesCount }}</text> -->
                  </view>
                  <u-icon class="icon-1" name="trash" color="#999" size="40" v-if="
                    item.userId == vuex_user.id ||
                    detailsData.userId == vuex_user.id
                  " @click="DelateComment(item.commendId, item.listCount)"></u-icon>
                </view>

              </view>
              <view class="flex-col gruop_8">
                <view class="justify-around group_8_1">
                  <text class="text_26" @click="onreply(item)">{{
                    item.content
                  }}</text>

                </view>



              </view>
              <view class="flex-col items-start group_9" v-for="i in item.list" :key="i.commendId">
                <view class="flex-row group_13">
                  <u-avatar :src="$u.http.config.imgUrl + i.userHead" class="image image_9"></u-avatar>
                  <view class="flex-col group_14">
                    <view class="justify-between">
                      <view>

                        <text class="text_28">{{ i.userName }}</text>
                        <text class="author" v-if="i.userId == detailsData.userId">作者</text>
                        <text class="text_30">{{ i.creationTime }}</text>
                      </view>
                      <u-icon class="icon-1" name="trash" color="#999" size="40" v-if="
                          item.userId == vuex_user.id ||
                          detailsData.userId == vuex_user.id
                        " @click="DelateComment(item.commendId, item.listCount)"></u-icon>
                    </view>
                    <view class="flex-col items-start group_15">
                      <view class="justify-between" style="width: 100%;">
                        <text class="text_29">{{ i.content }}</text>
                        <!-- <text style="color: #999;" v-if="
                          item.userId == vuex_user.id ||
                          detailsData.userId == vuex_user.id
                        " @tap="DelateComment(i.commendId)">删除</text> -->

                        
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="justify-evenly section_5" @click="onReplyDetails(item)" v-show="item.listCount > 3">
                <text class="text_42">{{ item.listCount }}回复</text>
                <image src="/static/common/img/16486282410596443868.png" class="image_12" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <u-mask :show="show" @click="isMask">
      <view @tap.stop>
        <msgbox :isCommonWords="true" @onsend="onSend" @onmsgShow="onMsgShow" ref="msg" :placeholder="placeholder">
        </msgbox>
      </view>
    </u-mask>
    <view v-if="detailsData.type != 3">
      <view class="flex-row btn" v-show="!isMsgShow">
        <view class="icon-1" @click="onMsg()">
          <image src="/static/common/img/homepage/comment.png" class="image_7" />
          <!-- <text>评论</text> -->
          <text>{{ detailsData.commentCount }}</text>
        </view>
        <view class="icon-2">
          <!-- <u-icon
            style="font-size: 0.22rem; color: #b4b6bd"
            v-if="!detailsData.isCllect"
            name="star"
            @click="onStar(0)"
          ></u-icon> -->
          <image v-if="!detailsData.isCllect" src="/static/common/img/homepage/star.png" class="image_7"
            @click="onStar(0)" />
          <u-icon style="font-size: 0.2rem; color: #ffc300" v-else class="image_8" name="star-fill"
            @click="onStar(1)"></u-icon>
          {{ detailsData.collectCount }}
        </view>
        <!--  <view class="icon-2">
				   <image src="/static/common/img/16486275583636337201.png" class="image_8" />
				   <text>转发</text>
			   </view> -->
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import information from "../../../components/Information.vue";
import msgbox from "../../../components/messageBox.vue";
export default {
  data() {
    return {
      detailsData: {},
      obj: {},
      commonData: [],
      isMsgShow: false,
      level: "",
      replyUserId: "",
      placeholder: "",
      show: false,
      commendId: "",
      PageIndex: 1,
      PageSize: 10,
      total: 0,
      flag: "",
      isDel: false, // 是否显示删除按钮
    };
  },
  onLoad(e) {
    this.isDel = e.isDel
    this.detailsData = JSON.parse(e.data);
    console.log('this.detailsData======>', this.detailsData);

    if (this.detailsData.type == undefined) {
      this.detailsData.type = this.detailsData.mytype;
    }
    console.log(JSON.parse(e.data));
    // console.log(this.detailsData)
    if (this.detailsData.flag == "Collection") {
      // console.log('收藏')
      // this.detailsData.mytype = this.detailsData.type
      this.detailsData.id = this.detailsData.articleId;
      this.detailsData.isCllect = true;
    }

    this.getJournaArticle();
  },
  methods: {
    //删除我的发布
    onDelete(val) {
      const data = {
        type: 1,
        id: val.id
      }
      if (this.type == 0) {
        data.type = 3
      }
      uni.showModal({
        content: '确定删除此内容？',
        success: (res) => {
          if (res.confirm) {
            this.$u.apiList.DelateArticle(data).then(res => {
              this.$refs.uToast.show({
                title: '删除成功',
                type: 'success',
              })
              uni.navigateBack({
                delta: 1
              })
            })
              .catch(err => {
                this.$refs.uToast.show({
                  title: '删除失败',
                  type: 'error',
                })
              })
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        }
      });

    },
    // 删除评论
    async DelateComment(id, listCount) {
      // 判断当前学校是否认证，未认证不可删除
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyPage(req);
      console.log(JSON.parse(JSON.stringify(res)), "res");
      const edcationList = res.edcationList;
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: "认证后可进行删除操作",
          type: "none",
        });
      }
      const findRow = edcationList.find((x) => x.isSelected === true);
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: "认证后可进行删除操作",
          type: "none",
        });
      }

      uni.showModal({
        // title: "提示",
        content: "确定删除该评论",
        success: (res) => {
          if (res.confirm) {
            this.$u.api
              .DelateComment({
                id: id,
              })
              .then((res) => {
                this.commonData = [];
                this.PageIndex = 1;
                this.getJournaArticle(2, listCount);
                this.$refs.uToast.show({
                  title: "删除成功",
                  type: "success",
                });
              })
              .catch((err) => {
                this.$refs.uToast.show({
                  title: "删除失败",
                  type: "error",
                });
              });
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    onSend(msg) {
      const data = {
        commendId: this.commendId,
        articleId: this.detailsData.id,
        userId: this.vuex_user.id,
        replyUserId: this.replyUserId,
        content: msg,
        level: this.level,
        type: this.detailsData.mytype,
      };
      if (!this.detailsData.id) {
        data.articleId = this.detailsData.articleId;
      }
      if (this.detailsData.mytype == 2) {
        if (this.detailsData.type || this.detailsData.type == 0) {
          data.type = this.detailsData.type;
        } else {
          data.type = 1;
        }
      }
      this.$u.apiList.InsertComment(data).then((res) => {
        this.commonData = [];
        this.PageIndex = 1;
        this.getJournaArticle(1);
      });
    },
    getJournaArticle(val, listCount) {
      const data = {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        Title: this.detailsData.title,
        Keyword: this.detailsData.content,
        id: this.detailsData.id,
        type: this.detailsData.mytype,
      };
      if (this.detailsData.mytype == 2) {
        if (this.detailsData.type || this.detailsData.type == 0) {
          data.type = this.detailsData.type;
        } else {
          data.type = 1;
        }
      }
      if (!this.detailsData.id) {
        data.id = this.detailsData.articleId;
      }
      this.$u.apiList.GetJournaArticle(data).then((res) => {
        this.total = res.total;
        if (this.commonData.length == 0) {
          this.commonData = res.items;
        } else if (this.commonData.length < res.total) {
          this.commonData = this.commonData.concat(res.items);
        }
        if (val == 1) {
          this.detailsData.commentCount++;
        }

        if (val == 2) {
          if (listCount) {
            console.log('listCount======>', listCount, this.detailsData.commentCount);
            this.detailsData.commentCount = this.detailsData.commentCount - listCount - 1;
            console.log('listCount======>', listCount, this.detailsData.commentCount);
          } else {
            this.detailsData.commentCount--;
          }
        }
        uni.$emit("echoList", {
          type: "evaluate",
          data: {
            commentCount: this.detailsData.commentCount,
          },
        });
      });
    },
    //收藏
    async onStar(val) {
      // 判断当前学校是否认证，未认证不可收藏
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyPage(req);
      console.log(JSON.parse(JSON.stringify(res)), "res");
      const edcationList = res.edcationList;
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: "认证后可进行收藏操作",
          type: "none",
        });
      }
      const findRow = edcationList.find((x) => x.isSelected === true);
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: "认证后可进行收藏操作",
          type: "none",
        });
      }
      const data = {
        id: this.detailsData.id,
        type: this.detailsData.type,
      };
      if (!this.detailsData.id) {
        data.id = this.detailsData.articleId;
      }
      this.$u.apiList
        .LikeCollect(data)
        .then((res) => {
          if (val == 0) {
            let a = this.detailsData;
            a.isCllect = true;
            this.detailsData = "";
            this.detailsData = a;
            this.$refs.uToast.show({
              title: "收藏成功",
              type: "success",
            });
            this.detailsData.collectCount++;
            uni.$emit("echoList", {
              type: "star",
              data: {
                isCllect: true,
              },
            });
          } else if (val == 1) {
            let a = this.detailsData;
            a.isCllect = false;
            this.detailsData = "";
            this.detailsData = a;
            this.$refs.uToast.show({
              title: "取消收藏成功",
              type: "success",
            });
            this.detailsData.collectCount--;
            uni.$emit("echoList", {
              type: "star",
              data: {
                isCllect: false,
              },
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: "收藏失败",
            type: "error",
          });
        });
    },
    //评论
    async onMsg() {
      // 判断当前学校是否认证，未认证不可评论
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyPage(req);
      console.log(JSON.parse(JSON.stringify(res)), "res");
      const edcationList = res.edcationList;
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: "认证后可进行评论操作",
          type: "none",
        });
      }
      const findRow = edcationList.find((x) => x.isSelected === true);
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: "认证后可进行评论操作",
          type: "none",
        });
      }
      this.show = true;
      this.isMsgShow = true;
      //   this.$refs.msg.placeholder = "请输入内容";
      this.$refs.msg.placeholder = "高楼平地起，评论全靠你...";
      this.$refs.msg.inputFocus();
      this.level = 0;
    },
    //点赞
    async onLike(item, index) {
      // 判断当前学校是否认证，未认证不可点赞
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyPage(req);
      console.log(JSON.parse(JSON.stringify(res)), "res");
      const edcationList = res.edcationList;
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: "认证后可进行点赞操作",
          type: "none",
        });
      }
      const findRow = edcationList.find((x) => x.isSelected === true);
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: "认证后可进行点赞操作",
          type: "none",
        });
      }
      const data = {
        id: item.commendId,
        type: 2,
      };
      this.$u.apiList
        .LikeHe(data)
        .then((res) => {
          if (this.commonData[index].isLike == false) {
            this.commonData[index].isLike = true;
            this.commonData[index].likesCount++;
            this.$refs.uToast.show({
              title: "点赞成功",
              type: "success",
            });
          } else {
            if (this.commonData[index].likesCount > 0) {
              this.commonData[index].isLike = false;
              this.commonData[index].likesCount--;
              this.$refs.uToast.show({
                title: "取消点赞成功",
                type: "success",
              });
            }
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: "点赞失败",
            type: "error",
          });
        });
    },
    //回复
    onreply(item) {
      this.show = true;
      this.placeholder = "回复@" + item.userName;
      this.$refs.msg.placeholder = this.placeholder;
      this.$refs.msg.inputFocus();
      this.level = 1;
      this.replyUserId = item.userId;
      this.commendId = item.commendId;
    },
    isMask() {
      this.show = false;
      this.isMsgShow = false;
    },
    onMsgShow(val) {
      this.isMsgShow = val;
      this.show = val;
    },
    onReplyDetails(item) {
      const data = {
        Title: this.detailsData.title,
        Keyword: this.detailsData.content,
        id: item.commendId,
      };
      item.type = this.detailsData.mytype;
      item.articleId = this.detailsData.id;
      this.$u.route({
        url: "pages/AlumniCircle/ReplyDetails/ReplyDetails",
        params: {
          data: JSON.stringify(data),
          head: JSON.stringify(item),
        },
      });
    },
    onreachBottom() {
      let num = this.PageIndex * this.PageSize;
      if (num > this.total) return;
      this.PageIndex++;
      this.getJournaArticle();
    },
    //返回上一级
    router() {
      if (this.detailsData.route == 1) {
        uni.switchTab({
          url: "../../my/my/my",
        });
      } else if (this.detailsData.route == 2) {
        if (this.detailsData.flag == 0) {
          this.$u.route({
            url:
              "pages/AlumniCircle/userDetail/userDetail?id=" +
              this.detailsData.userId +
              "&type=0",
          });
        } else {
          this.$u.route({
            url:
              "pages/AlumniCircle/userDetail/userDetail?id=" +
              this.detailsData.userId +
              "&type=3",
          });
        }
      } else if (this.detailsData.route == 3) {
        this.$u.route({
          url:
            "pages/my/ReleaseList/ReleaseList?Id=" +
            this.detailsData.myschoolId +
            "&type=" +
            this.detailsData.mytype,
        });
      } else {
        uni.switchTab({
          url: "/pages/AlumniCircle/alumnus/alumnus",
        });
      }
    },
  },
  components: {
    msgbox,
    information,
  },
};
</script>

<style lang="scss" scoped>
.detail {
  .section_3 {
    padding: 0.11rem 0.14rem 0.11rem 0.15rem;
    background-color: rgb(255, 255, 255);

    .group {
      padding: 0 0.005rem;

      .text_3 {
        margin-top: 0.035rem;
        color: rgb(180, 182, 189);
        font-size: 0.12rem;
        font-family: PingFang;
        line-height: 0.12rem;
      }

      .image {
        width: 0.3rem;
        height: 0.3rem;
      }

      .image_4 {
        margin-bottom: 0.02rem;
      }

      .group_3 {
        margin-left: 0.05rem;
        margin-top: 0.02rem;

        .text_1 {
          margin-left: 0.02rem;
          color: rgb(2, 2, 2);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.13rem;
        }

        .text_2 {
          margin-top: 0.055rem;
          color: rgb(180, 182, 189);
          font-size: 0.12rem;
          font-family: PingFang;
          line-height: 0.12rem;
        }
      }
    }

    .text_4 {
      margin-left: 0.01rem;
      margin-top: 0.23rem;
      color: rgb(2, 2, 2);
      font-size: 0.18rem;
      font-family: Adobe Heiti Std;
      line-height: 0.17rem;
    }

    .group_4 {
      margin-top: 0.2rem;

      .image_5 {
        margin-top: 0.025rem;
        width: 3.45rem;
        height: 1.66rem;
      }

      .group_31 {
        padding: 0 0.01rem;

        .group_5 {
          margin-left: 0.01rem;
          align-self: flex-start;

          .text_5 {
            margin-top: 0.015rem;
            color: rgb(160, 162, 172);
            font-size: 0.15rem;
            font-family: PingFang;
            line-height: 0.14rem;
          }

          .text_6 {
            margin-left: 0.07rem;
            color: rgb(255, 88, 109);
            font-size: 0.18rem;
            font-family: PingFang;
            line-height: 0.16rem;
          }
        }

        .group_28 {
          margin-top: 0.065rem;
          align-self: flex-start;

          .text_7 {
            color: rgb(160, 162, 172);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }

          .text_8 {
            margin-left: 0.05rem;
            color: rgb(55, 59, 72);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }
        }

        .group_7 {
          margin-left: 0.01rem;
          align-self: flex-start;

          .text_9 {
            color: rgb(180, 182, 189);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }

          .text_10 {
            margin-left: 0.055rem;
            color: rgb(55, 59, 72);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }
        }

        .group_29 {
          align-self: flex-start;

          .text_11 {
            color: rgb(180, 182, 189);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }

          .text_12 {
            margin-left: 0.04rem;
            color: rgb(55, 59, 72);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }
        }

        .group_30 {
          align-self: flex-start;

          .text_13 {
            color: rgb(180, 182, 189);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }

          .text_14 {
            margin-left: 0.05rem;
            color: rgb(55, 59, 72);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }
        }

        .group_10 {
          align-self: flex-start;

          .text_15 {
            color: rgb(180, 182, 189);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }

          .text_16 {
            margin-left: 0.04rem;
            color: rgb(55, 59, 72);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }
        }

        .group_11 {
          align-self: flex-start;

          .text_17 {
            color: rgb(180, 182, 189);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }

          .text_18 {
            margin-left: 0.04rem;
            color: rgb(55, 59, 72);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.24rem;
          }
        }

        .text_19 {
          color: rgb(180, 182, 189);
          font-size: 0.15rem;
          font-family: Adobe Heiti Std;
          line-height: 0.24rem;
        }

        .text_20 {
          margin-left: 0.065rem;
          color: rgb(55, 59, 72);
          font-size: 0.15rem;
          font-family: Adobe Heiti Std;
          line-height: 0.24rem;
        }
      }
    }

    .text_21 {
      margin-left: 0.05rem;
      margin-top: 0.11rem;
      align-self: flex-start;
      color: rgb(44, 109, 255);
      font-size: 0.14rem;
      font-family: PingFang;
      line-height: 0.16rem;
    }
  }
}

.comment {
  .section_4 {
    padding: 0.2rem 0 0.5rem 0;
    background-color: rgb(255, 255, 255);
    // margin-top: 0.1rem;

    .section_5 {
      margin: 0.13rem 0.85rem;
      padding: 0.04rem 0.05rem 0.05rem 0.095rem;
      background-color: rgb(246, 247, 250);
      border-radius: 8rpx;
      width: 0.6rem;

      .text_42 {
        color: rgb(2, 2, 2);
        font-size: 0.12rem;
        font-family: Adobe Heiti Std;
        line-height: 0.11rem;
      }

      .image_12 {
        margin-top: 0.015rem;
        width: 0.05rem;
        height: 0.09rem;
      }
    }

    .group_8 {
      margin-left: 0.025rem;
      padding: 0 0.15rem;

      .text_22 {
        margin-bottom: 0.1rem;
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
        font-family: Adobe Heiti Std;
        line-height: 0.14rem;
      }

      .text_23 {
        color: rgb(180, 182, 189);
        font-size: 0.15rem;
        font-family: Adobe Heiti Std;
        line-height: 0.17rem;
      }
    }

    .group_27 {
      margin-top: 0.1rem;

      .group {
        padding: 0.1rem 0.2rem;
        // border-bottom: 1px solid #eee;

        .gruop_8 {
          .group_8_1 {
            padding-right: 0.2rem;
          }
        }

        .group_12 {
          margin-right: 4rpx;
          margin-top: 0.1rem;
          // width: 100%;
          // display: flex;
          justify-content: flex-end;

          .text_25 {
            // margin-top: 0.04rem;
            margin-top: 7rpx;
            color: #797979;
            font-size: 28rpx;
            font-family: Adobe Heiti Std;
            line-height: 0.12rem;
          }

          .image_8 {
            margin-left: 0.045rem;
            flex-shrink: 0;
            width: 0.16rem;
            height: 0.15rem;
          }
        }

        .group_6 {
          // padding-right: 2rpx;
          // margin-right: 0.02rem;



          .image_6 {
            border-radius: 50%;
            flex-shrink: 0;
            width: 0.3rem !important;
            height: 0.3rem !important;
            flex: 0 0 0.3rem !important;
          }

          .text_24 {
            margin-left: 0.13rem;
            margin-top: 0.07rem;
            color: rgb(2, 2, 2);
            font-size: 0.15rem;
            font-family: Adobe Heiti Std;
            line-height: 0.13rem;
          }

          .author {
            color: #797979;
            background-color: #f2f2f2;
            margin-top: 0.05rem;
            font-size: 0.13rem;
            line-height: 0.2rem;
            margin-left: 0.13rem;
            height: 0.2rem;
            padding: 0 0.05rem;
            border-radius: 1rem;
          }

          //  .author {
          // border-radius: 25%;
          //          margin-left: 0.13rem;
          //          margin-top: 0.04rem;
          // padding:0 0.05rem;
          //          color: #797979;
          //          font-size: 0.12rem;
          //          font-family: Adobe Heiti Std;
          // height: 0.13rem;
          //          line-height: 0.13rem;
          // background-color: #F2F2F2;
          //        }

          .reply-title {
            display: flex;
            // justify-content: space-between;
            align-items: flex-start;
          }
        }

        .text_26 {
          width: 100%;
          padding-left: 0.45rem;
          align-self: center;
          color: rgb(55, 59, 72);
          font-size: 0.13rem;
          font-family: Adobe Heiti Std;
          word-break: break-all;
        }

        .text_27 {
          margin-left: 0.13rem;
          // margin-top: 0.13rem;
          margin-top: 0.08rem;
          align-self: flex-start;
          color: rgb(180, 182, 189);
          font-size: 0.12rem;
          font-family: Adobe Heiti Std;
          line-height: 0.12rem;
        }
      }

      .group_9 {
        margin-top: 0.14rem;
        padding: 0 0 0 0.38rem;

        view {
          // width: 100%;
        }

        .group_13 {
          // margin-left: 0.035rem;
          width: 100%;

          .image_9 {
            width: 0.3rem !important;
            height: 0.3rem !important;
            flex: 0 0 0.3rem !important;
            border-radius: 50%;
            flex-shrink: 0;
          }

          .group_14 {
            margin-left: 0.18rem;
            margin-top: 0.05rem;
            flex: 1 1 auto;

            .author {
              color: #797979;
              background-color: #f2f2f2;
              margin-top: 0.05rem;
              font-size: 0.13rem;
              line-height: 0.2rem;
              margin-left: 0.13rem;
              height: 0.2rem;
              padding: 0 0.05rem;
              border-radius: 30%;
            }

            .text_28 {
              align-self: flex-start;
              color: rgb(2, 2, 2);
              font-size: 0.13rem;
              font-family: Adobe Heiti Std;
              line-height: 0.13rem;
            }

            .group_15 {
              margin-top: 0.12rem;
              width: 100%;

              .text_29 {
                color: rgb(55, 59, 72);
                font-size: 0.13rem;
                font-family: Adobe Heiti Std;
                // line-height: 0.14rem;
                width: 90%;
                word-break: break-all;
              }
            }

            .text_30 {
              margin-left: 0.13rem;
              margin-top: 0.045rem;
              color: rgb(180, 182, 189);
              font-size: 0.12rem;
              font-family: Adobe Heiti Std;
              line-height: 0.12rem;
            }
          }
        }

        .group_16 {
          margin-left: 0.035rem;
          margin-top: 0.11rem;
          width: 1.09rem;

          .group_17 {
            margin-top: 0.075rem;

            .text_31 {
              align-self: flex-start;
              color: rgb(2, 2, 2);
              font-size: 0.13rem;
              font-family: Adobe Heiti Std;
              line-height: 0.1rem;
            }

            .group_18 {
              margin-top: 0.14rem;
              padding-left: 0.015rem;

              .text_32 {
                color: rgb(55, 59, 72);
                font-size: 0.15rem;
                font-family: Adobe Heiti Std;
                line-height: 0.14rem;
              }

              .text_33 {
                margin-top: 0.03rem;
                color: rgb(180, 182, 189);
                font-size: 0.12rem;
                font-family: Adobe Heiti Std;
                line-height: 0.12rem;
              }
            }
          }
        }

        .group_19 {
          margin-left: 0.05rem;
          margin-top: 0.12rem;
          width: 1.07rem;

          .group_20 {
            margin-top: 0.07rem;

            .text_34 {
              align-self: flex-start;
              color: rgb(2, 2, 2);
              font-size: 0.13rem;
              font-family: Adobe Heiti Std;
              line-height: 0.12rem;
            }

            .group_21 {
              margin-top: 0.14rem;

              .text_35 {
                color: rgb(55, 59, 72);
                font-size: 0.15rem;
                font-family: Adobe Heiti Std;
                line-height: 0.14rem;
              }

              .text_36 {
                margin-left: 0.01rem;
                margin-top: 0.03rem;
                color: rgb(180, 182, 189);
                font-size: 0.12rem;
                font-family: Adobe Heiti Std;
                line-height: 0.12rem;
              }
            }
          }
        }
      }

      .image {
        width: 0.3rem;
        height: 0.3rem;
      }
    }

    .group_27:first-child {
      margin-top: 0;
    }
  }

  .icon-like {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
    margin-top: 6rpx;
  }

  .text-delete {
    color: #999;
    margin-top: 0.05rem;
  }
}

.btn {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0.5rem;
  line-height: 0.5rem;
  width: 100%;

  .icon-1,
  .icon-2 {
    flex: 1;
    text-align: center;

    .image_7 {
      margin-right: 0.05rem;
      flex-shrink: 0;
      width: 0.2rem;
      height: 0.2rem;
      transform: translateY(0.04rem);
    }

    .image_8 {
      margin-right: 0.05rem;
      width: 0.2rem;
      height: 0.2rem;
      //   transform: translateY(0.04rem);
    }
  }
}
</style>
