<template>
  <div class="villager-discussion">
    <div class="header">
      <u-tabs
        :list="tabs"
        font-size="36"
        bg-color="transparent"
        :bold="false"
        inactive-color="#ccddff"
        :is-scroll="true"
        :gutter="16"
        active-color="#fff"
        :current="currIndex"
        @change="onChange">
      </u-tabs>
    </div>
    <div class="discussion-total">
      <h2>议事列表</h2>
      <div class="right">
        <span>共</span>
        <i>{{ total }}</i>
        <span>条</span>
      </div>
    </div>
    <div class="discussion-list">
      <div class="item" hover-class="text-hover" v-for="(item, index) in list" :key="index" @click="$linkTo('./VillagerDiscussionDetail?id=' + item.id)">
        <h2>{{ item.title || item.content }}</h2>
        <div class="images">
          <image v-for="(img, i) in item.images" v-if="i < 3" :key="i" :src="img.url" />
        </div>
        <div class="item-tags">
          <span :style="{backgroundColor: item.type === '1' ? '#FF883C' : '#1AAAFF'}">{{ item.typeName }}</span>
          <div class="item-tags__right">
            <span>{{ item.type === '1' ? item.voteCount : item.msgCount }}</span>
            <i>人{{ item.type === '1' ? '投票' : '发表过意见' }}</i>
          </div>
        </div>
        <div class="item-bottom">
          <span>{{ item.createUserName }}</span>
          <i>{{ item.createTime }}</i>
        </div>
      </div>
      <AiEmpty v-if="!list.length"></AiEmpty>
    </div>
  </div>
</template>

<script>
  export default {
    name:"AppVillagerDiscussion",
    appName:"议事大厅",
    data () {
      return {
        currIndex: 0,
        list: [],
        pageShow: false,
        current: 1,
        total: 0,
        isMore: false
      }
    },

    computed: {
      tabs () {
        return [{
          name: '进行中'
        }, {
          name: '公示中'
        }]
      }
    },

    onLoad () {
      this.$loading()
      this.$dict.load(['discussType', 'discussStatus']).then(() => {
        this.getList()
      })
    },

    methods: {
      onChange (e) {
        this.currIndex = e
        this.isMore = false
        this.current = 1

        this.$nextTick(() => {
          this.getList()
        })
      },

      getList() {
        if (this.isMore) return

        this.$instance.post(`/app/appvillagediscuss/listUp`, null, {
          params: {
            current: this.current,
            size: 15,
            status: this.currIndex,
            areaId: uni.getStorageSync('areaId')
          }
        }).then(res => {
          if (res.code == 0) {
            this.total = res.data.total
            if (this.current > 1) {
              this.list = [...this.list, ...res.data.records].map(v => {
                return {
                  ...v,
                  typeName: this.$dict.getLabel('discussType', v.type),
                  images: v.images ? JSON.parse(v.images): []
                }
              })
            } else {
              this.list = res.data.records.map(v => {
                return {
                  ...v,
                  typeName: this.$dict.getLabel('discussType', v.type),
                  images: v.images ? JSON.parse(v.images): []
                }
              })
            }
            uni.hideLoading()
            this.pageShow = true
            if (res.data.records.length < 15) {
              this.isMore = true

              return false
            }

            this.current = this.current + 1
          } else {
            uni.hideLoading()
          }
        }).catch(() => {
          uni.hideLoading()
        })
      }
    },

    onReachBottom() {
      this.getList()
    }
  }
</script>

<style lang="scss">
  .villager-discussion {
    padding-bottom: 60px;
    padding-top: 100px;

    .header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      padding: 10px 0 10px 16px;
      box-sizing: border-box;
      background: #4181FF;
    }

    .discussion-total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 48px 0 32px;
      padding: 0 32px;

      h2 {
        color: #333333;
        font-size: 38px;
        font-weight: 600;
      }

      .right {
        display: flex;
        align-items: center;

        span {
          color: #666666;
          font-size: 28px;
        }

        i {
          font-style: normal;
          color: #4181FF;
          font-size: 28px;
        }
      }
    }

    .discussion-list {
      .item {
        margin: 0 32px 24px;
        padding: 32px 32px 0 32px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;

        .item-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 104px;

          span {
            color: #333333;
            font-size: 28px;
          }

          i {
            color: #999999;
            font-size: 28px;
          }
        }

        & > h2 {
          margin-bottom: 24px;
          color: #333333;
          font-size: 36px;
          font-weight: 600;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .images {
          display: flex;
          align-items: center;

          image {
            width: 204px;
            height: 204px;
            margin-right: 4px;

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .item-tags {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 104px;
          border-bottom: 1px solid #DDDDDD;

          & > span {
            width: 148px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            background: #1AAAFF;
            color: #fff;
            font-size: 28px;
            border-radius: 24px;
          }

          .item-tags__right {
            display: flex;
            align-items: center;

            span {
              color: #4181FF;
              font-size: 28px;
            }

            i {
              color: #999999;
              font-size: 28px;
            }
          }
        }
      }
    }
  }
</style>
