<style scoped>
/deep/.u-size-mini {
  vertical-align: middle;
}
.postDetails {
  width: 100%;
  height: 100vh;
  background: #fff;
  font-family: aa;
}
.postDetails .details {
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.postDetails .details-title {
  font-size: 18px;
  color: #111111;
  line-height: 25px;
  font-weight: bold;
  margin-right: 10px;
  display: flex;
  flex-wrap: wrap;
}
.postDetails .details-info {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}
.postDetails .details-info-l {
  display: flex;
  align-items: center;
}
.postDetails .details-info-c {
  width: calc(100vw - 30px - 35px - 10px - 75px - 80rpx);
  height: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}
.postDetails .gstyle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
}
.postDetails .details-info-r {
  width: 70px;
  height: 25px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
}
.postDetails .activitytime {
  width: 100%;

  border-radius: 2px;
  margin-top: 15px;
  background: #f0f0f0;
  font-size: 11px;
  color: #111111;
  padding: 10px 15px 0;
}
.postDetails .content {
  font-size: 13px;
  color: #111111;
  line-height: 18px;
  margin-top: 15px;
}
.postDetails .imgs {
  width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 15px;
}
.postDetails .esignup {
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e2e2e2;
  margin-top: 10px;
}
.postDetails .esignup-b {
  margin-top: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.postDetails .btn {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0 15px;
}
.postDetails .btn-l {
  width: calc(100vw - 30px - 90px - 25px - 60rpx);
  height: 35px;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  font-size: 13px;
  color: #b2b2b2;
  border-radius: 17.5px;
  padding: 0 10px;
}
.postDetails .btn-r {
  width: 90px;
  height: 35px;
  border-radius: 17.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  background: #cccccc;
}
.postDetails .btn2 {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 15px;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  z-index: 2;
}
.postDetails .btn2-l {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 30px - 50px - 25px);
}
.postDetails .btn2-l-input {
  width: 100%;
  height: 60px;
  margin-top: 10px;
  padding: 5px;
  border-radius: 4px;
  background: #f5f5f5;
}
.postDetails .btn2-r {
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.postDetails .btn2-r-send {
  width: 45px;
  height: 24px;
  border-radius: 12px;
  font-size: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.postDetails .pl-top {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  position: relative;
}
.postDetails .pl-top-name {
  width: calc(100vw - 30px - 30px - 10px - 100px);
  font-size: 13px;
  color: #111111;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 10px;
}
.postDetails .pl-content {
  margin-top: 5px;
  font-size: 12px;
  color: #222222;
}
.postDetails .twopl {
  margin-top: 15px;
  background: #f5f5f5;
  border-radius: 2px;
  padding: 7px 10px;
}
.postDetails .pl-left {
  width: calc(100vw - 30px - 40px);
  margin-left: 40px;
}
.postDetails .pubox {
  width: 100%;
  height: calc(100vh * 0.95);
}
.postDetails .pubox-top {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #111;
  padding: 0 15px;
}
.postDetails .heng {
  width: 100%;
  height: 5px;
  background: #f5f5f5;
  margin-top: 5px;
}
.postDetails .twolist {
  padding: 15px;
}
.postDetails .comment {
  width: 100%;
  height: 55px;
  padding: 0 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
}
.postDetails .commentinput {
  width: calc(100vw - 120px);
  height: 30px;
  background: #f3faf8;
  border-radius: 15px;
  font-size: 13px;
  padding: 0 10px;
}
.postDetails .comment-pl {
  width: 56px;
  height: 26px;
  font-size: 13px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.popup-box {
  width: 100%;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  background: #fff;
}
.popup-box-item {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.details-top {
  width: 100%;
  height: 223px;
}
.activitytime-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.activitytime-item-l {
  width: 220rpx;
  color: #666666;
}
.share-icon {
  width: 50rpx;
  height: 50rpx;
  margin-left: 30rpx;
}
.commentbox {
  /* height: 100%; */
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
}
.commentbox {
  /* height: 100%; */
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
}
.commentbox2 {
  width: 250rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* position: absolute;
  top: 0;
  right: 0; */
}
.commentbox-item {
  width: 90rpx;
  /* height: 100%; */
  display: flex;
  align-items: center;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.commentbox-item2 {
  width: 100rpx;
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.dianzanNum {
  width: 100%;
  /* background-color: #333; */
  margin-top: 90rpx;
}
.peopleNum {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 600;
  color: #111111;
  text-align: center;
  margin-bottom: 30rpx;
}
.headimg-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.surplus {
  /* width: 80px; */
  min-width: 46rpx;
  height: 46rpx;
  background: #cccccc;
  border-radius: 23rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 45rpx;
}
</style>
<template>
  <view class="postDetails">
    <view
      style="height: calc(100vh - 50px); width: calc(100vw); overflow: hidden"
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        @scroll="inputscroll"
        style="height: 100%"
      >
        <view class="details-top">
          <image
            style="width: 100%; height: 100%"
            :src="details.ImageList[0]"
            mode="aspectFill"
          ></image>
        </view>
        <view class="details">
          <view
            style="
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
            "
          >
            <view class="details-title">
              <u-tag
                :text="item"
                v-if="details.LabelList.length > 0"
                mode="dark"
                :bg-color="mainColor"
                size="mini"
                style="margin-right: 5px"
                v-for="(item, index) in details.LabelList"
                :key="index"
              />
              {{ details.ActivityTitle }}
            </view>
          </view>

          <!-- <text v-if="details.Label!=null&& details.Label!='' " :style="{color:mainColor}">【{{details.Label}}】</text> -->

          <view class="details-info">
            <view class="details-info-l">
              <view
                style="
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  position: relative;
                "
                @click.native.stop="goUserinfo(details)"
              >
                <u-avatar :src="details.Photo" size="70"></u-avatar>
                <image
                  class="gstyle"
                  v-if="details.Sex == 1"
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
                ></image>
                <image
                  class="gstyle"
                  v-if="details.Sex == 2"
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
                ></image>
              </view>
              <view class="details-info-c">
                <view
                  style="
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    font-size: 14px;
                    color: #111111;
                    font-weight: bold;
                  "
                  >{{ details.UserName }}</view
                >
                <view
                  style="font-size: 11px; color: #858687"
                  v-if="details.CreateDate"
                >
                  {{ details.CreateDate.split(" ")[0].split("-")[1] }}-{{
                    details.CreateDate.split(" ")[0].split("-")[2]
                  }}
                </view>
              </view>
            </view>
            <view
              v-if="details.UserId != UserId"
              class="details-info-r"
              :style="{ background: mainColor }"
              @click="getfollow(details)"
            >
              {{
                details.IsFocus == 0
                  ? "关注"
                  : details.IsFocus == 1
                  ? "已关注"
                  : "互相关注"
              }}
            </view>
            <!-- 分享图标 -->
            <image
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fengxiangtiezi.png"
              class="share-icon"
              @click="fxshow = true"
            />
          </view>

          <view class="content" v-html="details.Content">
            <rich-text :nodes="details.Content"></rich-text>
          </view>
          <!-- <view class="esignup" v-if="details.IsOpenEnroll == 1">
            <view
              v-if="Enrollcount == 0"
              style="font-size: 12px; color: #111111"
              >暂无点赞</view
            >
            <view v-if="Enrollcount > 0"> 点赞人数 </view>
            <view class="esignup-b" @click="gobmlist" v-if="Enrollcount > 0">
              <image
                :src="x.Photo"
                v-for="(x, i) in EnrollList"
                :key="i"
                style="
                  width: 22px;
                  height: 22px;
                  border-radius: 50%;
                  margin-right: 5px;
                "
              ></image>
              <view
                style="
                  padding: 0 15px;
                  height: 22px;
                  border-radius: 11px;
                  font-size: 11px;
                  color: #ffffff;
                  background: #cccccc;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
                >{{ Enrollcount }}</view
              >
            </view>
          </view> -->

          <view class="dianzanNum" v-if="commentData.ActivityCount>0">
            <view class="peopleNum"
              >点赞人数({{ commentData.ActivityCount }})</view
            >
            <view class="headimg-box" v-if="!isShowAll">
              <view
                v-for="(item, index) in commentData.ActivityList"
                :key="index"
                v-if="index < 8"
              >
                <image
                  :src="item.Photo"
                  mode=""
                  style="
                    width: 46rpx;
                    height: 46rpx;
                    border-radius: 50%;
                    margin-right: 10rpx;
                  "
                />
              </view>
              <view
                class="surplus"
                v-if="commentData.ActivityCount > 8"
                @click="isShowAll = true"
              >
                +{{ commentData.ActivityCount - 8 }}
              </view>
            </view>
          </view>
          <view class="headimg-box" v-if="isShowAll">
            <view
              v-for="(item, index) in commentData.ActivityList"
              :key="index"
            >
              <image
                :src="item.Photo"
                mode=""
                style="
                  width: 46rpx;
                  height: 46rpx;
                  border-radius: 50%;
                  margin-right: 10rpx;
                  margin-bottom: 10rpx;
                "
              />
            </view>
          </view>
        </view>
        <view
          style="
            font-size: 16px;
            color: #111111;
            display: flex;
            align-items: center;
            font-weight: bold;
            margin-top: 15px;
            box-sizing: border-box;
            padding: 0 30rpx;
          "
        >
          <text>评论</text>
          <text style="margin-left: 15px">({{ ReplyNum }})</text>
        </view>

        <u-empty v-if="g.length == 0" text="暂无回复" mode="list"></u-empty>
        <view
          v-if="g.length > 0"
          style="box-sizing: border-box; padding: 0 30rpx"
        >
          <view v-for="(x, i) in g" :key="i" style="width: 100%">
            <view
              class="pl-top"
              @click="replyone(x)"
              @longpress="longpress(x, i, 1)"
            >
              <view style="display: flex; align-items: center">
                <view
                  style="
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    position: relative;
                  "
                  @click.native.stop="goUserinfo(x)"
                >
                  <u-avatar :src="x.Photo" size="60"></u-avatar>
                  <image
                    class="gstyle"
                    v-if="x.Sex == 1"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
                  ></image>
                  <image
                    class="gstyle"
                    v-if="x.Sex == 2"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
                  ></image>
                </view>
                <view class="pl-top-name">
                  <view @click.native.stop="goUserinfo(x)">{{
                    x.UserName
                  }}</view>
                  <view
                    style="font-size: 11px; color: #858687"
                    v-if="x.CreateDate"
                  >
                    {{ x.CreateDate.split(" ")[0].split("-")[1] }}-{{
                      x.CreateDate.split(" ")[0].split("-")[2]
                    }}
                  </view>
                </view>
                <view class="commentbox">
                  <view class="commentbox-item">
                    <image
                      style="width: 24rpx; height: 26rpx; margin-right: 10rpx"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weizan.png"
                      v-if="x.DianZanId == 0"
                      @click="dianzan(x)"
                    ></image>
                    <image
                      style="width: 24rpx; height: 26rpx; margin-right: 10rpx"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/yizan.png"
                      v-if="x.DianZanId > 0"
                      @click="quxiaodianzan(x)"
                    ></image>
                    {{ x.DianZanNum }}
                  </view>
                  <view class="commentbox-item">
                    <image
                      style="width: 26rpx; height: 26rpx; margin-right: 10rpx"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weipinglun.png"
                    ></image>
                    {{ x.ReplyNum }}
                  </view>
                </view>
              </view>
            </view>
            <view
              class="pl-content pl-left"
              @click="replyone(x)"
              @longpress="longpress(x, i, 1)"
            >
              {{ x.Content }}
            </view>
            <view class="pl-imgs pl-left" v-if="x.ImageList.length > 0">
              <view v-for="(item, index) in x.ImageList" :key="index">
                <image
                  :src="item"
                  mode="widthFix"
                  class="imgs"
                  @click="previewImage(index, x.ImageList)"
                ></image>
              </view>
            </view>
            <view
              class="pl-left twopl"
              v-if="x.ReplyList.length > 0"
              @click="showtwo(x)"
            >
              <view
                style="font-size: 11px; color: #333333; margin: 5px 0"
                v-for="(item, index) in x.ReplyList"
                :key="index"
              >
                <text :style="{ color: mainColor }">{{ item.UserName }}</text
                >：{{ item.Content }}
              </view>
              <view
                v-if="x.ReplyList.length > 3"
                style="font-size: 11px; color: #00c6c1; margin: 5px 0"
              >
                查看全部
              </view>
            </view>
          </view>
        </view>

        <u-loadmore
          v-if="g.length > 0"
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#FFF"
        />
        <view style="width: 100%; height: 50px"></view>
      </scroll-view>
    </view>
    <view class="btn" v-if="showreply == false">
      <view class="btn-l" @click="showreply = true"> 说点什么呗 </view>
      <!-- <view
        class="btn-r"
        v-if="
          details.IsOpenEnroll == 1 &&
          gettime() == true &&
          details.IsEnroll == false
        "
        :style="{ background: mainColor }"
        @click="gosigUp()"
      >
        立即报名
      </view> -->
      <!-- <view
        class="btn-r"
        v-if="
          details.IsOpenEnroll == 1 &&
          gettime() == false &&
          details.IsEnroll == false
        "
      >
        报名结束
      </view> -->
      <!-- <view
        class="btn-r"
        v-if="details.IsOpenEnroll == 1 && details.IsEnroll == true"
      >
        已报名
      </view>
      <view class="btn-r" v-if="details.IsOpenEnroll == 2"> 暂无活动 </view> -->
      <view class="commentbox2">
        <view class="commentbox-item2" style="mrgin-right: 10rpx">
          <image
            style="width: 38rpx; height: 42rpx; margin-right: 10rpx"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weizan.png"
            v-if="commentData.DianZanId == 0"
            @click="dianzan(commentData, 1)"
          ></image>
          <image
            style="width: 38rpx; height: 42rpx; margin-right: 10rpx"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/yizan.png"
            v-if="commentData.DianZanId > 0"
            @click="quxiaodianzan(commentData, 1)"
          ></image>
          {{ commentData.ActivityCount }}
        </view>
        <view class="commentbox-item2">
          <image
            style="width: 42rpx; height: 42rpx; margin-right: 10rpx"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weipinglun.png"
          ></image>
          {{ commentData.totalCount }}
        </view>
      </view>
    </view>
    <view
      class="btn2"
      v-if="showreply == true"
      :style="{ 'margin-bottom': oneheight + 'px' }"
    >
      <view class="btn2-l">
        <view style="font-size: 11px; color: #b2b2b2">
          回复{{ ParentName }}
        </view>
        <view class="btn2-l-input">
          <textarea
            style="height: 100px; width: 100%"
            placeholder="聊两句~"
            v-model="sendMsg.Content"
            :adjust-position="false"
            maxlength="2000"
            :focus="showreply"
            confirm-type="send"
            @blur="initialize()"
            @keyboardheightchange="keyboardheightchange"
          />
        </view>
      </view>
      <view class="btn2-r">
        <u-icon
          name="photo-o"
          :size="45"
          color="#737373"
          style="margin-bottom: 5px"
          @click="getimgs()"
          v-if="sendMsg.ParentId == 0"
        ></u-icon>
        <view
          class="btn2-r-send"
          :style="{ background: mainColor }"
          @click="setSend(1)"
        >
          发表
        </view>
      </view>
    </view>
    <!-- 二级回复弹出 -->
    <u-popup v-model="twoshow" mode="bottom" border-radius="20">
      <view class="pubox">
        <view class="pubox-top">
          <view></view>
          <text>回复</text>
          <u-icon
            name="cross"
            color="#555"
            size="40"
            @click="(twoshow = false), inputscroll2()"
          ></u-icon>
        </view>
        <view>
          <scroll-view
            scroll-y="true"
            style="height: calc(100vh * 0.95 - 115px); margin-bottom: 70px"
            @scrolltolower="lower2"
            @scroll="inputscroll2"
          >
            <view style="padding: 0 15px">
              <view class="pl-top">
                <view style="display: flex; align-items: center">
                  <view
                    style="
                      width: 30px;
                      height: 30px;
                      border-radius: 50%;
                      position: relative;
                    "
                    @click.native.stop="goUserinfo(twodata)"
                  >
                    <u-avatar :src="twodata.Photo" size="60"></u-avatar>
                    <image
                      class="gstyle"
                      v-if="twodata.Sex == 1"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
                    ></image>
                    <image
                      class="gstyle"
                      v-if="twodata.Sex == 2"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
                    ></image>
                  </view>
                  <view class="pl-top-name">
                    <view @click.native.stop="goUserinfo(twodata)">{{
                      twodata.UserName
                    }}</view>
                    <view
                      style="font-size: 11px; color: #858687"
                      v-if="twodata.CreateDate"
                    >
                      {{ twodata.CreateDate.split(" ")[0].split("-")[1] }}-{{
                        twodata.CreateDate.split(" ")[0].split("-")[2]
                      }}
                    </view>
                    <view class="commentbox">
                      <view class="commentbox-item">
                        <image
                          style="
                            width: 24rpx;
                            height: 26rpx;
                            margin-right: 10rpx;
                          "
                          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weizan.png"
                          v-if="twodata.DianZanId == 0"
                          @click="dianzan(twodata)"
                        ></image>
                        <image
                          style="
                            width: 24rpx;
                            height: 26rpx;
                            margin-right: 10rpx;
                          "
                          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/yizan.png"
                          v-if="twodata.DianZanId > 0"
                          @click="quxiaodianzan(twodata)"
                        ></image>
                        {{ twodata.DianZanNum }}
                      </view>
                      <view class="commentbox-item">
                        <image
                          style="
                            width: 26rpx;
                            height: 26rpx;
                            margin-right: 10rpx;
                          "
                          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weipinglun.png"
                        ></image>
                        {{ twodata.ReplyNum }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="pl-content pl-left">
                {{ twodata.Content }}
              </view>
              <view class="pl-imgs pl-left" v-if="twodata.ImageList.length > 0">
                <view v-for="(item, index) in twodata.ImageList" :key="index">
                  <image
                    :src="item"
                    mode="widthFix"
                    class="imgs"
                    @click="previewImage(index, twodata.ImageList)"
                  ></image>
                </view>
              </view>
            </view>

            <view class="heng"></view>
            <view class="twolist">
              <view>{{ twocount }}条回复</view>
              <view v-for="(x, i) in g2" :key="i">
                <view
                  class="pl-top"
                  @click="replyone(x, 2)"
                  @longpress="longpress(x, i, 2)"
                >
                  <view style="display: flex; align-items: center">
                    <view
                      style="
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        position: relative;
                      "
                      @click.native.stop="goUserinfo(x)"
                    >
                      <u-avatar :src="x.Photo" size="60"></u-avatar>
                      <image
                        class="gstyle"
                        v-if="x.Sex == 1"
                        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
                      ></image>
                      <image
                        class="gstyle"
                        v-if="x.Sex == 2"
                        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
                      ></image>
                    </view>
                    <view
                      class="pl-top-name"
                      @click.native.stop="goUserinfo(x)"
                      >{{ x.UserName }}</view
                    >
                  </view>
                  <view
                    style="font-size: 11px; color: #858687"
                    v-if="x.CreateDate"
                  >
                    {{ x.CreateDate.split(" ")[0].split("-")[1] }}-{{
                      x.CreateDate.split(" ")[0].split("-")[2]
                    }}
                  </view>
                </view>
                <view
                  class="pl-content pl-left"
                  @click="replyone(x, 2)"
                  @longpress="longpress(x, i, 2)"
                >
                  <text v-if="x.ReplyUserName != ''"
                    >{{ x.ReplyUserName != null ? "回复" : "评论了" }}
                    <text
                      :style="{ color: mainColor }"
                      v-if="x.ReplyUserName != null"
                      >{{ x.ReplyUserName }}</text
                    >：</text
                  >
                  {{ x.Content }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="comment">
          <input
            type="text"
            v-model="sendMsg.Content"
            :placeholder="ParentName != '' ? '回复：' + ParentName : '聊两句~'"
            class="commentinput"
            :focus="showreply2"
            confirm-type="send"
          />
          <view
            class="comment-pl"
            :style="{ background: mainColor }"
            @click.stop="setSend(2)"
            >发表</view
          >
        </view>
      </view>
    </u-popup>
    <u-popup v-model="show" mode="bottom" border-radius="14">
      <view class="popup-box">
        <view class="popup-box-item" @click="paste()"> 复制 </view>
        <view class="popup-box-item" @click="mydelete()"> 删除 </view>
        <view style="width: 100%; height: 10px; background: #e7e7e7"></view>
        <view class="popup-box-item" @click="show = false" style="height: 45px">
          取消
        </view>
      </view>
    </u-popup>
    <u-popup v-model="fxshow" mode="bottom" border-radius="14">
      <view class="popup-box">
        <view
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 20px 15px;
          "
        >
          <view
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              font-size: 12px;
              color: #666666;
              position: relative;
            "
          >
            <image
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616749584000_898.png"
              style="width: 40px; height: 40px"
            ></image>
            <text style="margin-top: 8px">微信</text>
            <button
              style="
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
              "
              open-type="share"
            ></button>
          </view>
          <view
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              font-size: 12px;
              color: #666666;
            "
            @click="goposter()"
          >
            <image
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616749674000_539.png"
              style="width: 40px; height: 40px"
            ></image>
            <text style="margin-top: 8px">生成海报</text>
          </view>
        </view>
        <view style="width: 100%; height: 10px; background: #e7e7e7"></view>
        <view
          class="popup-box-item"
          @click="fxshow = false"
          style="height: 45px"
        >
          取消
        </view>
      </view>
    </u-popup>
    <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
  </view>
</template>

<script>
import auth from "@/components/auth/index.vue";
export default {
  components: {
    auth,
  },
  data() {
    return {
      pageTitle: "帖子详情",
      mainColor: "",
      showAuth: false,
      fxshow: false,
      msg: {
        pageIndex: 1,
        pageSize: 20,
        ActivityId: 0,
        Id: 0,
      },
      twoshow: false,
      page_count: 1,
      g: [],
      loading: false,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      g2: [], //二级的列表
      page_count2: 1,
      status2: "loadmore",
      loadText2: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      msg2: {
        pageIndex: 1,
        pageSize: 20,
        ParentId: 0,
      },
      details: {}, //详情内容
      EnrollList: [],
      Enrollcount: 0,
      showreply: false,
      showreply2: false,
      sendMsg: {
        ActivityId: 0, //活动Id
        Content: "",
        ParentId: 0, //上级评论 默认0
        ReplyUserId: 0, //回复用户id
        ImageList: [], //图片列表
      },
      UserId: 0,
      show: false,
      ParentName: "",
      twodata: {}, //弹窗的数据
      twocount: 0,

      delete: {
        //删除评论的
        DiscussId: 0,
        Copycontent: "",
        index: 0,
        type: 1,
      },
      oneheight: 0,
      ReplyNum: 0,
      Up: 0,
      commentData: {}, //评论点赞数据
      isShowAll: false, //是否显示全部点赞人
    };
  },
  mounted() {},
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    this.Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
  },
  onLoad(options) {
    console.log(options);
    if (options && options.Id) {
      this.msg.ActivityId = options.Id;
      this.sendMsg.ActivityId = options.Id;
      this.getActivityInfo();
      this.getCount(); //获取评论的总数量
    }
    let UserId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    // this.sendMsg.ReplyUserId = UserId
    this.UserId = UserId;
  },
  onShareTimeline() {
    // setTimeout(() => {
    //   console.log("分享朋友圈调用");
    //   this.getReceive();
    // }, 2500);
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").SmallShopId
      : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
        : 0;
    }
    let title = this.details.ActivityTitle
      ? this.details.ActivityTitle
      : "帖子";
    let imageUrl =
      this.details.ImageList && this.details.ImageList.length > 0
        ? this.details.ImageList[0]
        : "";
    let id = this.msg.ActivityId;
    return {
      title: title,
      query:
        "id=" +
        this.id +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up,
      imageUrl: imageUrl,
    };
  },
  onShareAppMessage(res) {
    // setTimeout(() => {
    //   console.log("分享好友调用");
    //   this.getReceive();
    // }, 2500);
    let u = uni.getStorageSync("mall_UserInfo");
    let uid = u.UserId ? u.UserId : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
    }
    return {
      title: this.details.ActivityTitle ? this.details.ActivityTitle : "帖子",
      path:
        "/pages/index/index?id=" +
        this.msg.ActivityId +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up +
        "&JumpType=10",
      imageUrl:
        this.details.ImageList && this.details.ImageList.length > 0
          ? this.details.ImageList[0]
          : "",
    };
  },
  methods: {
    getCount() {
      this.request2(
        {
          url: "/api/AppletMiai/GetActivityDiscussCount",
          data: { ActivityId: this.msg.ActivityId },
        },
        (res) => {
          this.ReplyNum = res.data.totalCount;
          this.commentData = res.data;
        }
      );
    },
    getActivityInfo() {
      this.request2(
        {
          url: "/api/AppletMiai/GetActivityInfo",
          data: { ActivityId: this.msg.ActivityId },
        },
        (res) => {
          this.details = res.data;
          let richtext = res.data.Content;
          let regex = new RegExp("<img", "gi");
          richtext = richtext.replace(regex, `<img width="100%"`); //图片超出的处理
          this.details.Content = richtext;
          this.init(); //评论列表
          //判断是否登录
          this.u = uni.getStorageSync("mall_UserInfo");
          if (!this.u) {
            this.u = {
              nickName: "未登录",
              avatarUrl: "",
            };
            // this.showAuth = true;
          } else {
            if (this.details.IsOpenEnroll == 1) {
              this.GetActivityEnrollPageList(); //获取招募贴报名列表
            }
          }
        }
      );
    },
    init(type = 1) {
      //为1的时候需要重新渲染列表 为2的时候在最前面添加一个
      this.request2(
        {
          url: "/api/AppletMiai/GetActivityDiscussPageList",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            if (type == 1) {
              this.g = this.g.concat(res.data.pageData);
              this.page_count = res.data.pageCount;
              if (this.page_count == 1) {
                this.status = "nomore";
              }
            } else {
              this.g.unshift(res.data.pageData[0]);
            }
          }
        }
      );
    },
    GetActivityEnrollPageList() {
      this.request2(
        {
          url: "/api/AppletMiai/GetActivityEnrollPageList",
          data: this.msg,
        },
        (res) => {
          this.EnrollList = res.data.pageData;
          this.Enrollcount = res.data.count;
        }
      );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.init();
      } else {
        this.status = "nomore";
      }
    },
    gettime() {
      //判断 活动是进行还是结束

      let type = true;
      if (new Date().getTime() >= new Date(this.details.Deadline).getTime()) {
        type = false;
      }
      return type;
    },
    //图片预览
    previewImage(index, images) {
      uni.previewImage({
        urls: images,
        current: index,
      });
    },
    inputscroll() {
      //页面滚动时的处理
      this.showreply = false;
    },
    setSend(type = 1) {
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        let Id = this.sendMsg.ParentId;
        uni.showLoading({
          title: "发表中~",
        });
        this.request2(
          {
            url: "/api/AppletMiai/SgetActivityDiscussInfo",
            data: this.sendMsg,
          },
          (res) => {
            uni.hideLoading();
            uni.showToast({
              title: "发表成功",
              icon: "none",
            });
            if (type == 1) {
              if (Id == 0) {
                //回复楼主时
                this.init(2);
              } else {
                //回复其他用户时 二级评论
                this.request2(
                  {
                    url: "/api/AppletMiai/GetActivityDiscussPageList",
                    data: {
                      pageIndex: 1,
                      pageSize: 20,
                      ActivityId: this.sendMsg.ActivityId,
                      Id: Id,
                    },
                  },
                  (res) => {
                    if (res.resultCode == 1) {
                      for (let i = 0; i < this.g.length; i++) {
                        if (this.g[i].Id == res.data.pageData[0].Id) {
                          this.g[i] = res.data.pageData[0];
                          this.$forceUpdate();
                          return;
                        }
                      }
                    }
                  }
                );
              }
              this.initialize();
            } else {
              this.request2(
                {
                  url: "/api/AppletMiai/GetActivityReplyPageList",
                  data: {
                    pageIndex: 1,
                    pageSize: 20,
                    ParentId: this.msg2.ParentId,
                  },
                },
                (res) => {
                  if (res.resultCode == 1) {
                    this.g2.unshift(res.data.pageData[0]);
                  }
                }
              );
              this.initialize(2);
              this.sendMsg.ParentId = this.twodata.Id;
              this.ParentName = "";
              this.sendMsg.Content = "";
            }
            this.getCount();
          }
        );
      }
    },
    getimgs() {
      //判断是否登录
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        let sendMsg = encodeURIComponent(JSON.stringify(this.sendMsg));
        uni.navigateTo({
          url: "/pages/blindDate/sendimg?sendMsg=" + sendMsg,
        });
      }
    },
    Children() {
      this.initialize();
      this.msg.pageIndex = 1;
      this.init(2);
      this.request2(
        {
          url: "/api/AppletMiai/GetActivityInfo",
          data: { ActivityId: this.msg.ActivityId },
        },
        (res) => {
          this.details = res.data;
        }
      );
    },
    initialize(type = 1) {
      //初始值发送的内容
      this.sendMsg.Content = "";
      if (type == 1) {
        this.sendMsg.ParentId = 0;
      }
      this.sendMsg.ImageList = [];
      this.sendMsg.ReplyUserId = 0;

      this.ParentName = "";
      this.showreply = false;
      this.showreply2 = false;
      this.oneheight = 0;
    },
    replyone(x, type = 1) {
      let UserId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserId
        : 0;
      if (UserId != x.UserId) {
        if (type == 1) {
          this.sendMsg.ParentId = x.Id;
        } else {
          this.sendMsg.ParentId = this.msg2.ParentId;
        }
        // this.sendMsg.ReplyUserId =  x.UserId;

        this.ParentName = x.UserName;

        if (type == 1) {
          this.showreply = true;
        }
        if (type == 2) {
          this.sendMsg.ReplyUserId = x.UserId;
          this.showreply2 = true;
        }
      } else {
        this.showreply = true;
      }
    },
    lower2() {
      if (this.msg2.pageIndex < this.page_count2) {
        this.msg2.pageIndex++;
        this.status2 = "loading";
        this.init2();
      } else {
        this.status2 = "nomore";
      }
    },
    showtwo(x) {
      //显示二级弹窗
      this.twodata = x;
      this.twoshow = true;
      this.msg2.ParentId = x.Id;
      this.sendMsg.ParentId = x.Id;
      this.msg2.pageIndex = 1;
      this.g2 = [];
      this.init2();
    },
    inputscroll2() {
      //二级回复时
      this.sendMsg.ParentId = this.twodata.Id;
      this.sendMsg.Content = "";
      this.ParentName = "";
    },
    init2() {
      this.request2(
        {
          url: "/api/AppletMiai/GetActivityReplyPageList",
          data: this.msg2,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.g2 = this.g2.concat(res.data.pageData);
            this.page_count2 = res.data.pageCount;
            this.twocount = res.data.count;
            if (this.page_count2 == 1) {
              this.status2 = "nomore";
            }
          }
        }
      );
    },
    longpress(x, i, type) {
      if (this.UserId == this.details.UserId || this.UserId == x.UserId) {
        this.delete.DiscussId = x.Id;
        this.delete.Copycontent = x.Content;
        this.delete.index = i;
        this.delete.type = type;
        this.show = true;
      }
    },
    paste() {
      uni.setClipboardData({
        data: this.delete.Copycontent,
      });
      this.show = false;
    },
    mydelete() {
      //删除评论
      this.request2(
        {
          url: "/api/AppletMiai/DelActivityDiscussInfo",
          data: { DiscussId: this.delete.DiscussId },
        },
        (res) => {
          if (res.resultCode == 1) {
            if (this.delete.type == 1) {
              this.g.splice(this.delete.index, 1);
            } else {
              this.g2.splice(this.delete.index, 1);
            }

            uni.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
            });
            this.show = false;
          }
        }
      );
    },
    gosigUp() {
      //报名页面
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        let details = encodeURIComponent(JSON.stringify(this.details));
        uni.navigateTo({
          url: "/pages/blindDate/stickSignUp?details=" + details,
        });
      }
    },
    gobmlist() {
      //查看当前活动的报名列表
      let type = 0;
      if (this.details.UserId == this.UserId) {
        //如果是自己看自己的招募贴
        type = 1;
      }
      uni.navigateTo({
        url:
          "/pages/blindDate/baomingList?type=" +
          type +
          "&ActivityId=" +
          this.details.Id,
      });
    },
    getfollow(x) {
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        let ID = 0;
        if (x.IsFocus != 0) {
          ID = x.MyFollowId;
        }
        this.request2(
          {
            url: "/api/AppletMiai/GetFollowMember",
            data: {
              ID: ID,
              UserId: x.UserId,
            },
          },
          (res) => {
            uni.showToast({
              title: res.message,
              icon: "none",
            });

            this.request2(
              {
                url: "/api/AppletMiai/GetActivityInfo",
                data: { ActivityId: this.msg.ActivityId },
              },
              (res) => {
                this.details = res.data;
              }
            );
          }
        );
      }
    },
    keyboardheightchange(e) {
      console.log(e.detail.height);
      let that = this;
      that.oneheight = e.detail.height - 1;
      that.$forceUpdate();
    },
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
      // this.showAuth=false;
    },
    //关闭登录窗口
    gbAuth() {
      this.showAuth = false;
    },
    goUserinfo(x) {
      //用户信息
      uni.navigateTo({
        url: "/pages/blindDate/persondetails?UserId=" + x.UserId,
      });
    },
    goopenlocation(x) {
      uni.openLocation({
        latitude: Number(x.LonLat.split(",")[1]),
        longitude: Number(x.LonLat.split(",")[0]),
        success: function () {
          console.log("success");
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
    goposter() {
      uni.navigateTo({
        url:
          "/pages/blindDate/xqposter?cover=" +
          this.details.ImageList[0] +
          "&title=" +
          this.details.ActivityTitle +
          "&id=" +
          this.msg.ActivityId,
      });
    },
    //点赞
    dianzan(item, type) {
      let msg = {
        ID: 0,
        ActivityId: item.ActivityId,
        ActivityDiscussId: item.Id,
        IsSelectActivity: 2,
      };
      if (type === 1) {
        msg = {
          ID: 0,
          ActivityId: this.msg.ActivityId,
          ActivityDiscussId: 0,
          IsSelectActivity: 1,
        };
      }
      this.request2(
        {
          url: "/api/AppletMiai/GetDianZan",
          data: msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: res.message,
              duration: 2000,
              icon: "none",
            });
            // this.init(1);
            if (type === 1) {
              this.getCount();
            } else {
              this.request2(
                {
                  url: "/api/AppletMiai/GetActivityDiscussPageList",
                  data: this.msg,
                },
                (res) => {
                  if (res.resultCode == 1) {
                    this.g = res.data.pageData;
                    this.page_count = res.data.pageCount;
                    if (this.page_count == 1) {
                      this.status = "nomore";
                    }
                  }
                }
              );
            }
          }
        }
      );
    },
    //取消点赞
    quxiaodianzan(item, type) {
      let msg = {
        ID: item.DianZanId,
        ActivityId: item.ActivityId,
        ActivityDiscussId: item.Id,
        IsSelectActivity: 2,
      };
      if (type === 1) {
        msg = {
          ID: item.DianZanId,
          ActivityId: this.msg.ActivityId,
          ActivityDiscussId: 0,
          IsSelectActivity: 1,
        };
      }
      this.request2(
        {
          url: "/api/AppletMiai/GetDianZan",
          data: msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: res.message,
              duration: 2000,
              icon: "none",
            });
            if (type === 1) {
              this.getCount();
            } else {
              this.request2(
                {
                  url: "/api/AppletMiai/GetActivityDiscussPageList",
                  data: this.msg,
                },
                (res) => {
                  if (res.resultCode == 1) {
                    this.g = res.data.pageData;
                    this.page_count = res.data.pageCount;
                    if (this.page_count == 1) {
                      this.status = "nomore";
                    }
                  }
                }
              );
            }
          }
        }
      );
    },
  },
};
</script>


