<template>
  <section class="residentList">
    <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 wrap start" flex>
          <b>{{ item.name }}</b>
          <div flex class="tag" v-for="(tag,j) in item.tags" :key="j">{{ tag.tagName }}</div>
          <div class="realName" shrink v-html="`真实姓名：${item.realName||'-'}`"/>
        </div>
      </AiCell>
    </div>
  </section>
</template>

<script>

export default {
  name: "residentList",
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      search: {name: ""},
      list: []
    }
  },
  methods: {
    getList() {
      this.$http.post("/app/wxcp/wxcustomer/list", null, {
        params: {...this.page, ...this.search, type: 1}
      }).then(res => {
        if (res?.data) {
          if (this.page.current > 1) {
            this.list = [...this.list, ...res.data.records]
          } else this.list = res.data.records
          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: './resident?id=' + id
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.residentList {
  ::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 {
      flex-shrink: 0;
      justify-content: flex-start;

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

    .card {
      text-align: left;

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

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

      .realName {
        width: 100%;
        margin-top: 8px;
        font-size: 28px;
        font-weight: 400;
        color: #999;
      }
    }

    .AiImage {
      margin-right: 24px;

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