<template>
  <view class="main">
    <view class="bannerBox" :style="{ height: bannerHeight + 'px' }">
      <swiper
        class="swiper"
        circular
        :indicator-dots="true"
        :autoplay="true"
        :interval="4000"
      >
        <swiper-item class="swiperItem"> </swiper-item>
      </swiper>
    </view>
    <!-- :style="{ height: `calc(100vh - ${bannerHeight + 40}px)` }" -->
    <view class="communityContent" :style="{ height: `100vh` }">
      <view class="contentTab">
        <view
          :class="
            tabSelect === item.value ? 'tabItem selectTabItem' : 'tabItem'
          "
          v-for="(item, index) in tabList"
          :key="index"
          @click="handleChangeTabSelect(item.value)"
        >
          {{ item.label }}
        </view>
      </view>

      <scroll-view
        scroll-y
        class="scrollContent"
        @scrolltolower="handleScrollBottom"
      >
        <view
          class="scrollItem"
          v-for="(item, index) in postList"
          :key="index"
          @click="handleGoDetail(item)"
        >
          <view class="itemTop">
            <view class="topLeft">
              <view class="profileBox">
                <image class="profile" />
              </view>
              <view class="otherBox">
                <view class="userName">{{ item.AUTHOR_NAME || "-" }}</view>
                <view class="timeBox">{{ item.PUBLISH_TIME || "-" }}</view>
              </view>
            </view>

            <view class="rightBox">
              <view class="commentBox">
                <image
                  class="commentIcon"
                  src="/static/images/home/commentIcon.svg"
                />
                <span class="commentText">
                  {{ item.POST_COMMENTCOUNT || 0 }}</span
                >
              </view>
              <view class="commentBox">
                <image
                  class="commentIcon"
                  src="/static/images/home/thumbsUp.svg"
                />
                <span class="thumbsUp">{{ item.POST_LIKECOUNT || 0 }}</span>
              </view>
            </view>
          </view>

          <view class="itemContent"
            >{{
              item.isShowSmall === 1 ? item.smallText : item.POST_CONTENT || ""
            }}<span
              v-if="item.isShowSmall > 0"
              class="expend"
              @click.stop="handleChangeIsShowSmall(item)"
              >{{
                item.isShowSmall === 1
                  ? "展开"
                  : item.isShowSmall === 2
                  ? "收起"
                  : ""
              }}</span
            >
          </view>

          <view
            class="imageList"
            v-if="item.ImageList && item.ImageList.length > 0"
          >
            <view
              class="imageItem"
              v-for="(subItem, subIndex) in item.ImageList"
              :key="subIndex"
            >
              <image class="image" :src="subItem.ImageUrl" />
            </view>
          </view>
        </view>

        <view class="inBottom">
          <text class="bottomText">{{
            listDetail.isOver ? "我是有底线的" : "下拉加载更多"
          }}</text>
        </view>
      </scroll-view>
    </view>

    <view class="addNewPost" @click="handleAddNewPost">
      <view class="newPostBox">
        <image class="addIcon" src="/static/images/home/addPost.svg" />
        <text class="addText">我要发帖</text>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      screenWidth: 0, // 当前手机的宽度
      bannerHeight: 0, // 计算出来的轮播框高度
      tabList: [],
      tabObj: {}, // tab的枚举
      tabSelect: 0, // 选择的tab
      postList: [], // 当前的贴子
      isFirst: true, // 判断是不是第一次进入到页面 先拿枚举 再去调用列表
      listDetail: {
        pageSize: 10,
        pageIndex: 1,
        isOver: false,
      },
    };
  },
  async onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    console.log("systemInfo", systemInfo);
    this.screenWidth = systemInfo.screenWidth;
    console.log("this.screenWidth", this.screenWidth);
    let bannerH = (312 * this.screenWidth) / 750;
    console.log("bannerH", bannerH);
    this.bannerHeight = parseInt(bannerH);

    this.handleGetTypeList();
  },
  async onShow() {
    if (!this.isFirst) {
      //  当前的发帖列表
      this.handleGetNowPostList();
    }
  },
  methods: {
    //   跳转详情
    handleGoDetail(obj) {
      console.log("obj", obj);
      uni.navigateTo({ url: `/pages/community/detail?id=${obj.POST_ID}` });
    },
    //   滚动到底部
    handleScrollBottom() {
      this.listDetail.pageIndex += 1;
      if (!this.listDetail.isOver) {
        this.handleGetNowPostList();
      }
    },
    //   展开
    handleChangeIsShowSmall(obj) {
      this.postList.forEach((item) => {
        if (obj.POST_ID === item.POST_ID && obj.isShowSmall > 0) {
          if (obj.isShowSmall === 1) {
            item.isShowSmall = 2;
          } else {
            item.isShowSmall = 1;
          }
        }
      });
    },
    // 拿到类型枚举
    async handleGetTypeList() {
      uni.showLoading({
        title: "加载中...",
      });
      const data = await this.$api.$get(
        "/EShangApiMain/FrameWork/GetFieldEnumTree",
        { FieldExplainField: "business_target" }
      );
      let list = this.$utils.wrapTreeNode(data.Result_Data.List);
      console.log("listlistlist", list);
      let typeList = [];
      let typeObj = {};
      // 拿到发帖的枚举
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.value === 7000) {
            console.log("item", item);
            if (item.children && item.children.length > 0) {
              item.children.forEach((subItem) => {
                typeList.push(subItem);
                typeObj[subItem.value] = subItem.label;
              });
            }
          }
        });
      }
      this.tabObj = typeObj;
      this.tabList = typeList;
      this.tabSelect = typeList[0].value;
      uni.hideLoading();
      if (this.isFirst) {
        this.handleGetNowPostList();
      }
      console.log("this.tabSelect", this.tabSelect);
      console.log("handleGetTypeList");
    },
    // 拿到当前的发帖列表
    async handleGetNowPostList() {
      uni.showLoading({
        title: "加载中...",
      });
      const req = {
        searchParameter: {
          WECHATAPP_APPID: "wx4c497eddcec4a0e7",
          POST_STATE: 1,
          POST_TAGS: this.tabSelect,
        },
        SortStr: "PUBLISH_TIME desc",
        PageIndex: this.listDetail.pageIndex,
        PageSize: this.listDetail.pageSize,
      };
      console.log("handleGetNowPostListREq");
      const data = await this.$api.$post("/Member/GetPOSTList", req);
      let list = data.Result_Data.List;

      console.log("datadsad", list);
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.POST_CONTENT.length > 100) {
            item.isShowSmall = 1;
            item.smallText = item.POST_CONTENT.slice(0, 100);
          } else {
            item.isShowSmall = 0;
          }
        });

        if (list.length < this.listDetail.pageSize) {
          this.listDetail.isOver = true;
        }
      }

      let oldList = [];
      if (this.postList && this.postList.length > 0) {
        oldList = JSON.parse(JSON.stringify(this.postList));
      }

      this.postList = oldList.concat(list);
      console.log("handleGetNowPostList");
      this.isFirst = false;
      uni.hideLoading();
    },
    //   切换tab的选择
    async handleChangeTabSelect(value) {
      this.tabSelect = value;
      this.listDetail = {
        pageSize: 10,
        pageIndex: 1,
        isOver: false,
      };
      await this.handleGetNowPostList();
      this.$forceUpdate();
    },
    // 新增发帖
    handleAddNewPost() {
      uni.navigateTo({
        url: "/pages/community/addNewPost",
      });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  .bannerBox {
    width: 100%;
    .swiper {
      width: 100%;
      height: 100%;
      .swiperItem {
        width: 100%;
        height: 100%;
      }
    }
  }

  .communityContent {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 58px;
    .contentTab {
      width: 100%;
      height: 90rpx;
      border-bottom: 1px solid #f5f6f7;
      display: flex;
      .tabItem {
        width: calc(100% / 3);
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #716f69;
        line-height: 40rpx;
        font-style: normal;
        box-sizing: border-box;
        padding-top: 32rpx;
      }
      .selectTabItem {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130f05;
        line-height: 40rpx;
        font-style: normal;
        position: relative;
      }
      .selectTabItem:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #ba922f;
        width: 2rem;
        height: 6rpx;
      }
    }

    .scrollContent {
      width: 100%;
      height: calc(100% - 90rpx);
      box-sizing: border-box;
      padding: 0 32rpx;
      .scrollItem {
        width: 100%;
        border-bottom: 1px solid #f5f6f7;
        padding: 16rpx 0;
        .itemTop {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .topLeft {
            width: calc(100% - 190rpx);
            display: flex;
            align-items: center;
            .profileBox {
              width: 72rpx;
              height: 72rpx;
              margin-right: 16rpx;
              .profile {
                width: 100%;
                height: 100%;
              }
            }
            .otherBox {
              width: calc(100% - 88rpx);
              .userName {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #130f05;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
              .timeBox {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #716f69;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
            }
          }

          .rightBox {
            width: 180rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .commentBox {
              display: flex;
              align-items: center;
              .commentIcon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 4rpx;
              }
              .commentText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #716f69;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
              .thumbsUp {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #ba922f;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }
        }

        .itemContent {
          width: 100%;
          margin-top: 16rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
          margin-bottom: 12rpx;
          .expend {
            margin-left: 8rpx;
            color: #ba922f;
          }
        }

        .imageList {
          width: 100%;
          margin-top: 12rpx;
          display: flex;
          align-items: center;
          //   justify-content: space-between;
          flex-wrap: wrap;
          .imageItem {
            width: 218rpx;
            height: 218rpx;
            margin-right: 8rpx;
            border-radius: 8rpx;
            overflow: hidden;
            .image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .inBottom {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .bottomText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #d0d0d0;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
          position: relative;
          padding: 6rpx 0;
        }
        .bottomText::after {
          content: "";
          width: 30vw;
          height: 2rpx;
          background: #e0e0e0;
          position: absolute;
          left: -32vw;
          top: 50%;
        }
        .bottomText::before {
          content: "";
          width: 30vw;
          height: 2rpx;
          background: #e0e0e0;
          position: absolute;
          right: -32vw;
          top: 50%;
        }
      }
    }
  }
  .communityContent ::-webkit-scrollbar {
    width: 0;
  }

  .addNewPost {
    width: 100%;
    height: 56px;
    padding-bottom: 32rpx;
    // display: inline-block;
    // padding: 16rpx 24rpx;
    // border-radius: 36rpx;
    // background: #ba922f;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    // bottom: 40px;
    // left: 50%;
    // transform: translateX(-50%);
    .newPostBox {
      display: inline-block;
      padding: 16rpx 24rpx;
      border-radius: 36rpx;
      background: #ba922f;
      .addIcon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
      }
      .addText {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 40rpx;
        text-align: justify;
        font-style: normal;
      }
    }
  }
}
</style>
