<template>
  <view class="postbar" :style="{ height: contentHeight }">
    <u-tabs
      :list="list"
      :is-scroll="true"
      :current="current"
      @change="change"
      :active-color="mainColor"
    ></u-tabs>
    <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">
          <view
            class="item"
            v-for="(x, i) in g"
            :key="i"
            @click="gopostdetails(x)"
          >
            <view class="maxbox">
              <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>
                  <view class="timeAndAddr">
					{{x.StartTime.split(' ')[0].split('-')[1]}}月{{x.StartTime.split(' ')[0].split('-')[2]}}日
					<span>~</span>
					{{ x.EndTime.split(' ')[0].split('-')[1]}}月{{x.EndTime.split(' ')[0].split('-')[2] }}日
					</view
                  >
                  <view class="timeAndAddr" style="display: flex;">
					  <u-icon name="location" :color="mainColor" size="30" ></u-icon>
					  <view class="timeAndAddr_text">{{ x.LocationName }}</view>
				  </view>
                </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>

        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#F5F5F5"
        />
        <view style="width: 100%; height: 50px"></view>
      </scroll-view>
    </view>
    <view class="release" @click.stop="gopublishing()">
      <!-- 发布动态按钮 -->
      <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: "去认证",
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
  },
  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) {
      //招募贴的
      uni.navigateTo({
        url: "/pages/blindDate/postDetails?Id=" + x.Id,
      });
    },
    goUserinfo(x) {
      //用户信息
      uni.navigateTo({
        url: "/pages/blindDate/persondetails?UserId=" + x.UserId,
      });
      innerAudioContext.stop();
    },
  },
};
</script>
<style>
.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;
}
</style>
<style lang="scss">
// 新改样式
.active-list {
  padding: 0 30rpx;
  box-sizing: border-box;
  .active-list-item {
    min-height: 340rpx;
    padding: 30rpx 0;
    display: flex;
    // justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    .left-box {
      width: 220rpx;
      height: 280rpx;
      // background-color: #CFCFCF;
      box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
      border-radius: 20rpx;
      overflow: hidden;
    }
    .right-box {
      margin-left: 30rpx;
      width: 440rpx;
      .active-name {
        height: 70rpx;
        line-height: 68rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        // display: flex;
        // align-items: center;
        // justify-content: center;
      }
      .rate-box {
        height: 40rpx;
        display: flex;
        align-items: center;
        .rate {
          margin-left: 10rpx;
          color: #999999;
          line-height: 40rpx;
        }
      }
      .address {
        // height: 100rpx;
        padding: 20rpx 30rpx 20rpx 0;
        font-size: 24rpx;
        font-family: PingFang SC;
        color: #999999;
        line-height: 32rpx;
      }
      .tag-box {
        display: flex;
        flex-wrap: wrap;
        .tag {
          margin-right: 10rpx;
        }
      }
      .SalesPrice {
        position: absolute;
        right: 0;
        bottom: 30rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff3166;
        font-size: 36rpx;
        line-height: 32rpx;
        margin-top: 10rpx;
        text-align: right;
        .SalesPrice-pre,
        .SalesPrice-nex {
          font-size: 20rpx;
        }
      }
    }
  }
}
.timeAndAddr {
  font-size: 20rpx;
  color: #858687;
  width: 380rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4rpx 0;
}
.timeAndAddr_text{
	width: 350rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>