<template>
  <div class="page">
    <div class="po-f">
      <view class="nav-box flex-row">
        <view
          class="nav-item"
          :class="tabIndex == index ? 'active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tabClick(index)"
          >{{ item }}<span></span
        ></view>
      </view>
      <div v-if="tabIndex == 0" class="header-tab">
        <div class="header-info" v-if="newsList.length">
          <span class="tips">公告</span>
          <div class="text-content">
            <u-notice-bar @click="noticeClick"
              mode="vertical"
              :list="newsList"
              :volume-icon="false"
              type="none"
              color="#333"
            ></u-notice-bar>
          </div>
        </div>
        <div class="header-title">
          <p class="text">帖子列表</p>
          <!-- <div class="right-select" @click="showSelect=true">
            {{selectText}}<img src="../../static/img/right-icon-666.png" alt="" />
          </div> -->
        </div>
      </div>
      <div v-if="tabIndex == 1" class="header-tab">
        <div class="header-info">活动报名大于{{num}}人时组团成功，人数不足时活动失效。</div>
        <div class="header-title">
          <p class="text">活动列表</p>
        <div class="right-select" @click="showSelect=true">
            {{selectText}}<img src="./components/right-icon-666.png" alt="" />
          </div>
        </div>
      </div>
      <div v-if="tabIndex == 2" class="header-tab">
        <!-- <AiHeaderSearchBar placeholder="请输入活动标题或者地点" barBgColor="#fff" inputBgColor="#F5F5F5" inputColor="#333" inputPlaceholderColor="#999" searchIconColor="#ccc" @change="search"></AiHeaderSearchBar> -->
      </div>
    </div>
    <div class="list-content">
      <div v-if="tabIndex == 0" :class="isPadding ? 'pad-t308' : 'pad-t200'">
        <div class="forum-list">
          <div class="forum-item" v-for="(item, index) in list" :key="index" @click="toBBSDetail(item.id)">
            <div class="user-info">
              <image :src="item.avatar" class="user-name-bg"></image>
              <div class="info">
                <div>{{ item.name }}</div>
                <p>{{ item.createTime }}</p>
              </div>
            </div>
            <p class="conent-text">{{ item.content }}</p>
            <div class="img-list" v-if="item.images.length">
              <image v-for="(img, i) in item.images" :key="i" :src="img.url" @click.stop="previewImage(item.images, img.url)" v-if="i<3">
            </div>
            <div class="bottom-icon">
              <div>
                <i class="iconfont">&#xe69d;</i>
                <span>{{ item.viewNum }}</span>
              </div>
              <div>
                <i class="iconfont">&#xe6a2;</i>
                <span>{{ item.replyNum }}</span>
              </div>
              <!-- <div @click.stop="support(item, index)">
                <AiIcon icon="iconpraiseactive2x" size="18" v-if="item.mySupport==1" style="vertical-align: middle;" />
                <i class="iconfont" v-else>&#xe698;</i>
                <span>{{ item.supportNum }}</span>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabIndex == 1" class="pad-t308">
        <div class="active-list mar-t32">
          <div class="active-item" v-for="(item, index) in list" :key="index" @click="toActiveDetail(item)">
            <div class="img-div">
              <div class="status" :class="'status'+item.status">{{ $dict.getLabel('newActivityStatus', item.status) }}</div>
              <img :src="item.url" alt="">
            </div>
            <div class="right-info">
              <p class="title">{{ item.title }}</p>
              <div class="time"><span>{{ item.realNum }}人</span>已报名</div>
              <div class="time">{{ item.beginTime }} </div>
              <div class="time address">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabIndex == 2" class="pad-t200">
        <div class="active-list mar-t32">
          <div class="active-item" v-for="(item, index) in list" :key="index" @click="toActiveDetail(item)">
            <div class="img-div">
              <div class="status" :class="'status'+item.status">{{ $dict.getLabel('newActivityStatus', item.status) }}</div>
              <img :src="item.url" alt="">
            </div>
            <div class="right-info">
              <p class="title">{{ item.title }}</p>
              <div class="time"><span>{{ item.realNum }}人</span>已报名</div>
              <div class="time">{{ item.beginTime }} </div>
              <div class="time address">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </div>
      <AiEmpty v-if="!list.length"/>
    </div>
    <u-select v-model="showSelect" mode="mutil-column-auto" :list="selectList" @confirm="confirmSelect" />
    <!-- <img src="../../static/img/add-icon.png" alt="" class="add-icon" @click="toAdd"> -->

    <AiFixedBtn>
      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
    </AiFixedBtn>

    <u-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" icon="arrow-up" :customStyle="customStyle" bottom="72" right="32"></u-back-top>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppActive',
  appName: '居民议事',
  components: {},
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      list: [],
      isMore: false,
      current: 0,
      pageShow: false,
      tabIndex: 0,
      tabList: ["论坛", "活动", "动态"],
      list: [],
      newsList: [],
      iconStyle: {
				fontSize: '56rpx',
				color: '#1365DD',
        fontWeight: '700'
			},
      customStyle: {
        width: '96rpx',
        height: '96rpx',
        backgroundColor: '#fff',
        boxShadow: '0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.2)',
      },
      scrollTop: 0,
      supportFlag: true,
      num: '',
      title: '',
      selectText: '最新活动',
      showSelect: false,
      selectList: [{label: '最新活动'}, {label: '我的活动'}],
      noticeList: [],
      isPadding: false
    };
  },
  onLoad(option) {
    if(option.tabIndex) {
      this.tabIndex = option.tabIndex
    }
    this.$dict.load(['newActivityStatus']).then(() => {
      this.getList()
      this.getActiveNum()
    })

    uni.$on('refresh', () => {
      this.getListInit()
    })

    this.getNewList()
  },

  methods: {
    search(v) {
      this.title = v
      this.getListInit()
    },
    confirmSelect(e) {
      this.selectText = e[0].label
      this.getListInit()
    },
    tabClick(index) {
      this.tabIndex = index
      this.getListInit()
    },

    toBBSDetail (id) {
      uni.navigateTo({
        url: `./Detail?id=${id}`
      })
    },

    toAdd () {
      if (this.tabIndex == 0) {
        uni.navigateTo({
          url: `./AddPosts`
        })
      } else {
        uni.navigateTo({
          url: `./AddActive`
        })
      }
    },

    previewImage (images, img) {
      uni.previewImage({
        urls: images.map(v => v.url),
        current: img
      })
    },

    getListInit() {
      this.current = 0
      this.isMore = false
      this.getList()
    },
    getList () {
      if (this.isMore) return

      this.$loading()
      let url = this.tabIndex == 0 ? `/app/apppostinfo/list` : `/app/appactivityinfo/list`
      let params = `&searchUserId=${this.user.partyId}`

      if(this.tabIndex == 1 && this.selectText == '我的活动') { //我的活动
        params = `&createUserId=${this.user.partyId}`
      }
      if (this.tabIndex == 2) {
        params = `&status=5&title=${this.title}`
      }


      this.$http.post(`${url}?size=10&current=${this.current + 1}${params}`).then(res => {
        if (res.code === 0) {
          if (!this.current) {
            this.list = []
          }

          if (!res.data.records.length) {
            this.$hideLoading()
            this.isMore = true

            this.$nextTick(() => {
              this.pageShow = true
            })

            return false
          }

          const data = res.data.records.map(item => {
            if (this.tabIndex == 0) {
              if (item.images) {
                item.images = JSON.parse(item.images)
              }
            }

            return item
          })

          this.list.push(...data)
          this.current = this.current + 1

          this.$hideLoading()
          this.$nextTick(() => {
            this.pageShow = true
          })
        } else {
          this.$hideLoading()
        }
      }).catch(() => {
        this.$hideLoading()
      })
    },

    support(e, index) {
      if (this.supportFlag) {
        this.supportFlag = false;
        this.$http.post(`/app/apppostsupport/support`, {
          postId: e.id,
          createUserId: this.user.partyId
        }).then(res => {
          if (res.code == 0) {
            this.supportFlag = true
            if(e.mySupport == 1) {
              this.list[index].mySupport = 0
              this.list[index].supportNum = this.list[index].supportNum-1
            }else {
              this.list[index].mySupport = 1
              this.list[index].supportNum = this.list[index].supportNum+1
            }
          }
        })
      }
    },
    toActiveDetail(e) {
      uni.navigateTo({url: `./ActiveDetail?id=${e.id}`})
    },
    getActiveNum() {
      this.$http.post(`/app/appactivityconfig/queryDetail`).then(res => {
        if(res.code == 0) {
          this.num = res.data.num
        }
      })
    },
    getNewList() {
      this.$http.post(`/app/apppolicypromotion/listWechat`, {
        type: 3,
        areaId: this.$areaId,
        current: 1,
        size: 5
      }).then(res => {
        if(res.code == 0) {
          if(res.data && res.data.records.length) {
            this.isPadding = true
            this.noticeList = res.data.records
            res.data.records.map((item) => {
              this.newsList.push(item.title)
            })
          }
        }
      })
    },
    noticeClick(e) {
      console.log(e)
      this.linkTo(`./notice?id=${this.noticeList[0].id}`)
    }
  },

  onReachBottom (){
    this.getList()
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>
<style lang="scss" scoped>
.po-f{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.pad-t200{
  padding-top: 200rpx;
}
.pad-t308{
  padding-top: 308rpx;
}
.header-tab{
  width: 100%;
  height: 100%;
}
.list-content{
  // padding-top: 96px;
}

 .AiFixedBtn {
    .movableArea {
      .addBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96px;
        height: 96px;
        flex-shrink: 0;
        background: $uni-color-primary;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        font-size: 48px;
        background: #fff;
        color: #1365dd;
        border-radius: 50%;
      }
    }
  }

.nav-box {
  background-color: #3671ee;
  height: 96px;
  box-sizing: border-box;
  display: flex;
  .active {
    display: block;
    position: relative;
    span {
      position: absolute;
      top: 78px;
      left: 50%;
      margin-left: -20px;
      width: 40px;
      height: 4px;
      background-color: #fff;
    }
  }
}
.nav-item {
  flex: 1;
  color: #ffffff;
  font-size: 28px;
  line-height: 96px;
  text-align: center;
}
.header-info {
  width: 100%;
  height: 112px;
  padding: 32px;
  box-sizing: border-box;
  background: #fefaea;
  color: #FFA13E;
  font-size: 28px;
  .tips {
    display: inline-block;
    width: 104px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #ffa13e;
    border-radius: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    vertical-align: top;
    margin-right: 16px;
  }
  .text-content {
    display: inline-block;
    width: calc(100% - 122px);
    margin-top: -10px;
  }
}
.header-title {
  width: 100%;
  height: 108px;
  padding: 32px;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #f3f6f9;
  .text {
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    line-height: 44px;
  }
  .right-select {
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    line-height: 36px;
    img {
      width: 32px;
      height: 32px;
      margin-left: 8px;
      vertical-align: middle;
    }
  }
}
.forum-item{
  padding: 26px 30px 28px;
  background-color: #fff;
  .user-info{
    display: flex;
    margin-bottom: 32px;
    .user-name-bg{
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #4E8EEE;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFF;
      margin-right: 16px;
      border-radius: 50%;
    }
    .info{
      div{
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 26px;
        margin-bottom: 10px;
      }
      p{
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        line-height: 22px;
      }
    }
  }
  .conent-text{
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 42px;
    word-break: break-all;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-bottom: 16px;
  }
  .img-list{
    image {
      width: 224px;
      height: 224px;
      margin-right: 8px;
    }
    img:nth-of-type(3n){
      margin-right: 0;
    }
  }
  .bottom-icon{
    display: flex;
    justify-content: space-between;
    .iconfont{
      display: inline-block;
      width: 40px;
      vertical-align: middle;
    }
    span{
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #333;
      line-height: 40px;
    }
  }
}
.active-item{
  padding: 24px;
  display: flex;
  background-color: #fff;
  width: 686px;
  background: #FFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  margin: 0 0 32px 32px;
  box-sizing: border-box;
  .img-div{
    width: 200px;
    height: 200px;
    margin-right: 24px;
    position: relative;
    img{
      width: 200px;
      height: 200px;
      border-radius: 4px;
    }
    .status{
      position: absolute;
      top: 0;
      left: 0;
      height: 44px;
      padding: 0 8px;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FFF;
    }
    .status0{
      background: #000;
    }
    .status1{
      background: #FF883C;
    }
    .status3{
      background: #1AAAFF;
    }
    .status2{
      background: #42D784;
    }
    .status4, .status5{
      background: #E4E4E4;
    }
  }
  .right-info{
    width: calc(100% - 224px);
    .title{
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      line-height: 44px;
      word-break: break-all;
      margin-bottom: 8px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .time{
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666;
      line-height: 36px;
      margin-bottom: 4px;
      word-break: break-all;
      span{
        color: #3376FD;
      }
    }
    .address{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
}
.add-icon{
  position: fixed;
  right: 16px;
  bottom: 160px;
  width: 128px;
  height: 128px;
}
.mar-t32{
  margin-top: 32px;
}
</style>