<template>
  <section class="groupList">
    <AiTopFixed>
      <u-search placeholder="请输入群名、群主名" :show-action="false" search-icon-color="#ccc"
                v-model="search.name" @search="page.current=1,getList()"/>
      <AiCell>
        <b slot="label" class="title">共<i v-html="page.total||0"/>个居民群</b>
      </AiCell>
    </AiTopFixed>
    <div class="mainPane">
      <AiCell v-for="item in list" :key="item.id" @click.native="showResident(item)">
        <template #label>
          <AiImage :src="item.avatar" preview/>
        </template>
        <div class="card column start" flex>
          <div flex class="groupName">
            <b>{{ item.name || "群聊" }}</b>
            <div class="personCount" v-if="item.personCount">({{ item.personCount }})</div>
          </div>
          <div class="owner" v-html="`群主：${item.ownerName}`"/>
          <div flex class="trends">
            <div flex v-html="`今日入群：<em>${item.increase||0}</em>`"/>
            <div flex v-html="`今日退群：<p>${item.decrease||0}</p>`"/>
          </div>
        </div>
      </AiCell>
    </div>
  </section>
</template>

<script>

export default {
  name: "groupList",
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      search: {name: ""},
      list: []
    }
  },
  methods: {
    getList() {
      this.$http.post("/app/wxcp/wxgroup/list", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          let meta = res.data.records?.map(e => ({
            ...e,
            avatar: e?.avatar || this.$cdn + "groupAvatar.png"
          }))
          if (this.page.current > 1) {
            this.list = [...this.list, ...meta]
          } else this.list = meta
          this.page.total = res.data.total
        }
      })
    },
    reachBottom() {
      if (this.page.total > this.list.length) {
        this.page.current++
        this.getList()
      }
    },
    showResident({id}) {
      id && uni.navigateTo({
        url: './groupResident?id=' + id
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.groupList {
  ::v-deep .AiTopFixed {
    b.title {
      color: #333;
      font-size: 32px;

      & > i {
        color: #267FCE;
        font-style: normal;
        margin: 0 4px;
      }
    }
  }

  ::v-deep .mainPane {
    background: #fff;
    padding: 0 32px;

    .AiCell {
      align-items: center;
      height: 230px;
      justify-content: flex-start;

      .content {
        flex: 1;
        min-width: 0;
        height: 100%;
        max-width: unset;
        border-bottom: 1px solid rgba(221, 221, 221, 1);
      }
    }

    .card {
      height: 100%;
      justify-content: center;

      b {
        font-size: 36px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tag {
        justify-content: center;
        background: #F3F4F7;
        border-radius: 4px;
        padding: 0 16px;
        font-size: 28px;
        font-weight: 400;
        color: #333;
        margin-left: 16px;
        height: 56px;
      }

      .groupName {
        width: 100%;
        text-align: left;
      }

      .owner, .trends {
        margin-top: 8px;
        font-size: 28px;
        font-weight: 400;
        color: #999;
      }

      .personCount {
        flex-shrink: 0;
        font-size: 30px;
        font-weight: 400;
        color: #666;
      }

      .trends {
        * + * {
          margin-left: 24px;
        }

        em {
          font-style: normal;
          color: #5FBA95;
        }

        p {
          color: #F09535;
        }
      }
    }

    .AiImage {
      margin-right: 24px;

      image {
        width: 112px;
        height: 112px;
      }
    }
  }
}
</style>
