<template>
  <view
    class="postbar"
    :style="{
      height: contentHeight,
      'background-color': ppplusStyle === 2 ? '#fff' : '#f5f5f5',
    }"
  >
    <view class="nav-top">
      <u-tabs
        :list="list"
        :is-scroll="true"
        :current="current"
        @change="change"
		:active-item-style="activeTab"
        :active-color="mainColor"
		:bar-style="barStyle"
      ></u-tabs>
      <view class="fabu" @click="toggleFabu">
        <u-icon name="plus" :size="40" :color="mainColor"></u-icon>
      </view>
      <view class="chooseFabu" v-if="isShowFabu">
        <view class="tiezi" @click="jumpfabu(1)">
          <image
            class="imgicon"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/tiezifabu1.png"
            mode=""
          />
          发布帖子
        </view>
        <view style="height: 1px; background-color: #e2e2e2"></view>
        <view class="huodong" @click="jumpfabu(2)">
          <image
            class="imgicon"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huodongfabu1.png"
            mode=""
          />
          发布活动
        </view>
      </view>
    </view>

    <u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>

    <view
      v-if="g.length > 0"
      style="
        height: calc(100vh - 50px);
        width: calc(100vw);
        overflow: hidden;
        padding-bottom: 50px;
      "
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        style="height: 100%"
      >
        <!-- 卡片模式 -->
        <view class="details" v-if="ppplusStyle === 1">
          <view class="item" v-for="(x, i) in g" :key="i">
            <view class="maxbox" @click="gopostdetails(x)">
              <image
                :src="x.ImageList[0]"
                mode="aspectFill"
                style="
                  width: 100%;
                  height: 100%;
                  border-top-left-radius: 30rpx;
                  border-top-right-radius: 30rpx;
                "
              ></image>
            </view>
            <view style="width: 100%; padding: 13px 10px">
              <view
                style="
                  width: 100%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  font-size: 32rpx;
                  color: #111111;
                "
              >
                {{ x.ActivityTitle }}
              </view>
              <view class="max-b">
                <view class="tagBox" v-if="x.LabelList.length > 0">
                  <u-tag
                    :text="item"
                    mode="dark"
                    :bg-color="mainColor"
                    size="mini"
                    style="margin-right: 5px"
                    v-for="(item, index) in x.LabelList"
                    :key="index"
                  />
                </view>

                <view class="infoBox">
                  <!-- 头像 -->
                  <view
                    style="
                      width: 30px;
                      height: 30px;
                      border-radius: 15px;
                      position: relative;
                    "
                    @click.native.stop="goUserinfo(x)"
                  >
                    <image
                      :src="x.Photo"
                      style="width: 100%; height: 100%; border-radius: 15px"
                    >
                    </image>
                    <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 style="width: 170rpx; margin-left: 20rpx">
                    <view
                      style="
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: 24rpx;
                        color: #111111;
                        font-weight: 800;
                      "
                    >
                      {{ x.UserName }}
                    </view>
                    <text
                      v-if="x.IsOpenEnroll == 1"
                      style="font-size: 22rpx; font-weight: 500; color: #858687"
                      >报名人数：{{ x.EnrollNum }}</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 列表模式 -->
        <view class="details" v-if="ppplusStyle === 2">
          <view v-for="(x, i) in g" :key="i">
            <view class="maxbox2" @click="gopostdetails(x)">
              <view class="left">
                <view class="img-box" style="box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);">
                  <image
                    :src="x.ImageList[0]"
                    mode="aspectFill"
                    style="
                      width: 100%;
                      height: 100%;
                      border-top-left-radius: 4rpx;
                      border-top-right-radius: 4rpx;
                    "
                  ></image>
                </view>
                <view class="creatManInfo" @click.native.stop="goUserinfo(x)">
                  <image class="headimg" :src="x.Photo"> </image
                  >{{ x.UserName }}</view
                >
              </view>
              <view class="right" :class="{'no-border':i==g.length-1}">
                <view class="activetitle">{{ x.ActivityTitle }}</view>
				<view class="Content" v-if="x.textContent">{{x.textContent}}</view>
				<view class="Content" v-html="x.Content" v-if="!x.textContent"></view>
                <view class="hot" >
                  <view class="hotTag" v-if="x.HotCommentList.length > 0">
					  <!-- <image mode="widthFix" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/renqidianping.png" ></image> -->
					  <image :src="x.HotCommentList[0].UserPhoto" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				  </view>
                  <view class="hotCon"> <text v-if="x.HotCommentList.length > 0">{{`″`}}{{ x.HotCommentList[0].Comment }}{{`″`}}</text><text v-if="x.HotCommentList.length == 0">暂无热评</text></view>
                </view>
                <view class="hotCon2" v-if="x.HotCommentList.length > 1">
				<view style="width: 30rpx;height: 30rpx;border-radius: 50%;margin-right: 10rpx;overflow: hidden;">
					<image :src="x.HotCommentList[1].UserPhoto" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</view>
				{{`″`}}{{
                  x.HotCommentList[1].Comment
                }}{{`″`}}</view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore
          :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="release"
      v-if="isFaTie == 1"
      @click.stop="gopublishing()"
      style="display: none"
    >
      <!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pp-fabu.png" style="width: 100%;height: 100%;"></image> -->
      <!-- 发布动态按钮 -->
      <view class="fbanniu">
        <image
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fabupyq.png"
          style="height: 26rpx"
          mode="aspectFit"
        ></image>
        <text style="font-size: 10px; color: #fff">发布</text>
      </view>
    </view>
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <u-loading mode="flower" size="48">></u-loading>
      <Text style="color: #fff; margin-top: 10rpx">加载中...</Text>
    </view>
    <!-- 取消提示 -->
    <u-toast ref="uToast" />
    <tabbar></tabbar>
    <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
    <u-modal
      v-model="show"
      :content="showtext"
      :show-cancel-button="true"
      @confirm="queren"
    ></u-modal>
  </view>
</template>

<script>
import auth from "@/components/auth/index.vue";
import tabbar from "@/components/tabbar/index";
export default {
  components: {
    auth,
    tabbar,
  },
  data() {
    return {
      show: false,
      pageTitle: "贴吧",
      showAuth: false,
      u: {},
      list: [],
      mainColor: "",
      contentHeight: 0,
      current: 0,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        ForumId: 0,
        ActivityTitle: "",
      },
      page_count: 1,
      g: [],
      loading: false,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      forumList: [],
      isAttestation: 0,
      isFaTie: 0,
      showtext: "去认证",
      ppplusStyle: 1, //拼拼plus展示样式，1-卡片，2-列表
      isShowFabu: false,
	  activeTab:{
	  		  color:'#111111',
	  		  'font-weight': 800,
	  		  'font-size':'34rpx'
	  },
	  barStyle:{
		  height:'6rpx',
	  }
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
    let data = uni.getStorageSync("basedata");
    if (data) {
      this.ppplusStyle = data.mall.setting.mallStyle.miaiPPPlusStyle;
    }
  },
  mounted() {
    let currentPages = getCurrentPages();
    let u = "/" + currentPages[currentPages.length - 1].route;
    let pages = wx.getStorageSync("basedata")
      ? wx.getStorageSync("basedata").bar_title
      : [];
    pages.forEach((x) => {
      if (x.value == u) {
        this.pageTitle = x.new_name ? x.new_name : x.name;
      }
    });
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    let basedata = wx.getStorageSync("basedata");
    this.isAttestation = basedata.user_info.isAttestation
      ? basedata.user_info.isAttestation
      : 0;
    this.isFaTie = basedata.user_info.isFaTie ? basedata.user_info.isFaTie : 0;
  },
  onLoad: function (option) {
    this.u = uni.getStorageSync("mall_UserInfo");
    if (!this.u) {
      this.u = {
        nickName: "未登录",
        avatarUrl: "",
      };
      // this.showAuth = true;
    } else {
    }
    this.GetForumList();
  },
  methods: {
    change(index) {
      this.msg.ForumId = this.forumList[index].Id;
      this.current = index;
      this.msg.pageIndex = 1;
      this.g = [];
      this.loading = true;
      this.init();
    },
    Children(Id) {
      //发布成功了返回刷新列表
      this.msg.ForumId = Id;
      this.forumList.forEach((x, y) => {
        if (x.Id == Id) {
          this.current = y;
        }
      });
      this.msg.pageIndex = 1;
      this.g = [];
      this.loading = true;
      this.init();
    },
    GetForumList() {
      this.request2(
        {
          url: "/api/AppletMiai/GetForumList",
          data: {},
        },
        (res) => {
          if (res.resultCode == 1) {
            this.forumList = res.data;
            this.list = [];
            res.data.forEach((x) => {
              let obj = {
                name: x.Name,
              };
              this.list.push(obj);
            });
            this.msg.ForumId = this.forumList[0].Id;
            this.init();
          }
        }
      );
    },
    init() {
      this.request2(
        {
          url: "/api/AppletMiai/GetActivityPageList",
          data: this.msg,
        },
        (res) => {
          this.loading = false;
          if (res.resultCode == 1) {
            this.g = this.g.concat(res.data.pageData);
            this.page_count = res.data.pageCount;
            if (this.page_count == 1) {
              this.status = "nomore";
            }
          }
        }
      );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.init();
      } else {
        this.status = "nomore";
      }
    },
    gopublishing() {
      //发帖
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        if (this.isAttestation == 1) {
          //判断是否认证了
          uni.navigateTo({
            url: "/pages/blindDate/postPublishing?ForumId=" + this.msg.ForumId,
          });
        } else if (this.isAttestation == 0) {
          this.show = true;
          this.showtext = "还未认证，是否去认证？";
        } else if (this.isAttestation == 2) {
          this.show = true;
          this.showtext = "还未上传身份证信息,是否去上传？";
        }
      }
    },
    queren() {
      let mall_UserInfo = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo")
        : null;
      if (mall_UserInfo != null) {
        if (this.isAttestation == 0) {
          uni.navigateTo({
            url:
              "/pages/blindDate/editData?UserId=" +
              mall_UserInfo.UserId +
              "&Jumptype=2&type=1",
          });
        } else if (this.isAttestation == 2) {
          uni.navigateTo({
            url: "/pages/blindDate/personal/IDidentification?Jumptype=2",
          });
        }
      }
    },
    getisAttestation() {
      //认证成功
      this.request2(
        {
          url: "/api/Mall/GetHome",
          data: { page_id: 0, open_school: 0, StoreId: 0 },
        },
        (res) => {
          uni.setStorageSync("basedata", res.data);
          let basedata = wx.getStorageSync("basedata");
          this.isAttestation = basedata.user_info.isAttestation
            ? basedata.user_info.isAttestation
            : 0;
          this.isFaTie = basedata.user_info.isFaTie
            ? basedata.user_info.isFaTie
            : 0;
        },
        (error) => {}
      );
    },
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
      // this.showAuth=false;
      this.GetForumList();
      this.getisAttestation(); //登陆成功了 获取发帖权限
    },
    //关闭登录窗口
    gbAuth() {
      this.showAuth = false;
    },
    gopostdetails(x) {
      //招募贴的
      if (x.IsTieZi === 1) {
        uni.navigateTo({
          url: "/pages/blindDate/postDetails2?Id=" + x.Id,
        });
      } else if (x.IsTieZi === 0) {
        uni.navigateTo({
          url: "/pages/blindDate/postDetails?Id=" + x.Id,
        });
      }
    },
    goUserinfo(x) {
      //用户信息
      uni.navigateTo({
        url: "/pages/blindDate/persondetails?UserId=" + x.UserId,
      });
      innerAudioContext.stop();
    },
    toggleFabu() {
      this.isShowFabu = !this.isShowFabu;
    },
    jumpfabu(type) {
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        if (this.isAttestation == 1) {
          //判断是否认证了
          // uni.navigateTo({
          //   url: "/pages/blindDate/postPublishing?ForumId=" + this.msg.ForumId,
          // });
          if (type === 1) {
            uni.navigateTo({
              url: "/pages/blindDate/releasePosts",
            });
          } else {
            uni.navigateTo({
              url:
                "/pages/blindDate/postPublishing?ForumId=" + this.msg.ForumId,
            });
          }
        } else if (this.isAttestation == 0) {
          this.show = true;
          this.showtext = "还未认证，是否去认证？";
        } else if (this.isAttestation == 2) {
          this.show = true;
          this.showtext = "还未上传身份证信息,是否去上传？";
        }
      }
    },
  },
};
</script>
<style lang="scss">
.postbar {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  position: relative;
  font-family: aa;
}

.postbar .loading {
  width: 180rpx;
  height: 180rpx;
  background: #000000;
  opacity: 0.7;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 50%;
  top: 30%;
  margin-left: -100rpx;
  z-index: 999;
}

.postbar .details {
  padding: 0 15px;
  display: flex;
  flex-direction: column;
}
.postbar .details .item {
  border-radius: 30rpx;
  background: #fff;
  margin-top: 20px;
}

.postbar .release {
  width: 120rpx;
  height: 120rpx;

  position: fixed;
  right: 15px;
  bottom: 120px;
}

.item-minbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 94px;
  margin: 15px 0;
}

.item-minbox .minbox-l {
  width: calc(100vw - 40px - 310rpx);
  height: 94px;
  display: flex;
  flex-direction: column;
}

.item-minbox .minbox-l-t {
  font-size: 15px;
  color: #111111;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.postbar .gstyle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
}

.postbar .minbox-r {
  width: 310rpx;
  height: 94px;
  border-radius: 15px;
}

.postbar .maxbox {
  width: 100%;
  height: 300rpx;
}

.postbar .max-b {
  width: 100%;
  height: 35px;
  /* display: flex;
		justify-content: space-between;
		align-items: center; */
  position: relative;
  margin-top: 5px;
}

/* 活动标签 */
.tagBox {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

/* 活动信息 */
.infoBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.fbanniu {
  width: 42px;
  height: 42px;
  border-radius: 21px;
  position: fixed;
  right: 20rpx;
  bottom: 180rpx;
  background: #40766e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
/* 列表模式样式 */
.maxbox2 {
  width: 690rpx;
  height: 300rpx;
  // background-color: #eee;
  box-sizing: border-box;
  padding: 40rpx 0 0 0;
  display: flex;
  .left {
    width: 188rpx;
    height: 100%;
    margin-right: 30rpx;
    .img-box {
      width: 188rpx;
      height: 188rpx;
      border-radius: 4rpx;
      overflow: hidden;
      margin-bottom: 10rpx;
    }
    .creatManInfo {
      display: flex;
      // justify-content: center;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #111111;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
	  padding: 0 20rpx;
      .headimg {
        width: 44rpx;
        height: 44rpx;
        border-radius: 4rpx;
        margin-right: 10rpx;
      }
    }
  }
  .right {
    width: 475rpx;
    height: 100%;
    border-bottom: 2rpx solid#E2E2E2;
    .activetitle {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #111111;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 18rpx;
    }
    .Content {
	  height: 26rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #858687;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 18rpx;
	  overflow: hidden;
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .hot {
      display: flex;
      margin: 20rpx 0;
      .hotTag {
        width: 30rpx;
        height: 30rpx;
		border-radius: 50%;
        // background-color: #00c6c1;
        display: flex;
        align-items: center;
		overflow: hidden;
		margin-right: 10rpx;
      }
      .hotCon {
        width: 375rpx;
        height: 30rpx;
        // background-color: #b2eeec;
        box-sizing: border-box;
        // padding: 0 10rpx;
        display: flex;
		flex-grow: 1;
        align-items: center;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #00c6c1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 0px 6rpx 6rpx 0px;
      }
    }
    .hotCon2 {
	  display: flex;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #111111;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  .fabu {
    width: 86rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chooseFabu {
    width: 170rpx;
    height: 168rpx;
    background: #ffffff;
    box-shadow: 0px 1rpx 20rpx 0rpx rgba(76, 76, 76, 0.2);
    border-radius: 10rpx;
    position: absolute;
    top: 60rpx;
    right: 30rpx;
    z-index: 999;
    box-sizing: border-box;
    padding: 0 20rpx;
    .tiezi,
    .huodong {
      height: 83rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #111111;
      white-space: nowrap;
      display: flex;
      align-items: center;
      .imgicon {
        width: 25rpx;
        height: 25rpx;
        margin-right: 10rpx;
      }
    }
  }
}
.no-border{
	border: none !important;
}
</style>
