<template>
  <div class="AppResidentFile">
    <div class="currentTabBar1">
      <AiTopFixed>
        <u-search placeholder="请输入昵称、姓名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page1.current = 1), getList()" />
        <AiCell>
          <b slot="label" class="title">共<i v-html="page1.total || 0" />个居民</b>
        </AiCell>
      </AiTopFixed>
      <div class="mainPane">
        <AiCell v-for="item in data" :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>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppResidentFile',
  appName: '居民信息管理',
  data() {
    return {
      areaId: '',
      current: 1,
      data: [],
      search: { name: '' },
      page1: { current: 1, size: 10, total: 0 },
    }
  },
  computed: {
    ...mapState(['user', 'global']),
  },
  onLoad() {
    document.title = '居民信息管理'
    this.getList()
    this.areaId = this.user.areaId
  },
  methods: {
    // 居民列表
    getList() {
      this.$http.post('/app/wxcp/wxcustomer/list', null, {
        params: { ...this.page1, ...this.search, type: 1 },
      })
      .then((res) => {
        if (res?.data) {
          if (this.page1.current > 1) {
            this.data = [...this.data, ...res.data.records]
          } else this.data = res.data.records
          this.page1.total = res.data.total
        }
      })
    },
    showResident({ id }) {
      id &&
        uni.navigateTo({
          url: './resident?id=' + id,
        })
    },
  },
  onReachBottom() {
    this.page1.current++
    this.getList()
  },
}
</script>

<style scoped lang="scss">
uni-page-body {
  height: 100%;
}
.AppResidentFile {
  height: 100%;

  .currentTabBar0 {
    padding-bottom: 98px;
    .peopleGroup,
    .people {
      .topcard {
        position: relative;
        background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
        background-size: 100% 100%;
        height: 320px;
        .cards {
          box-sizing: border-box;
          position: absolute;
          bottom: -35px;
          width: 92%;
          box-sizing: border-box;
          margin: 0 32px;
          height: 232px;
          background: #ffffff;
          border-radius: 8px;
          z-index: 999;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .items {
            display: flex;
            flex-direction: column;
            align-items: center;
            span {
              font-size: 30px;
              font-weight: 500;
              color: #999999;
            }
            .items1 {
              font-size: 40px;
              font-weight: bold;
              color: #354fc7;
            }
            .items2 {
              font-size: 40px;
              font-weight: bold;
              color: #868686;
            }
            .items3 {
              font-size: 40px;
              font-weight: bold;
              color: #5fba95;
            }
            .items4 {
              font-size: 40px;
              font-weight: bold;
              color: #f09535;
            }
          }
        }
      }

      .echartes {
        margin-top: 64px;
        padding-bottom: 20px;
        height: 616px;
        background: #fff;
        box-sizing: border-box;

        .echartss {
          margin: 0 32px;
          height: 100%;
          padding-top: 16px;
          box-sizing: border-box;
        }
      }
    }
  }

  .currentTabBar1 {
    height: 100%;
    padding-bottom: 98px;
    background: #fff;
    ::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 88px;

      .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;
        }
      }
    }
  }

  .currentTabBar2 {
    padding-bottom: 98px;
    ::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;
        }
      }
    }
  }

  .tabs {
    width: 100%;
    height: 98px;
    background: #fff;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    .item {
      flex: 1;
      text-align: center;
      img {
        width: 56px;
        height: 56px;
        margin-top: 8px;
      }
      p {
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #c4cad4;
        line-height: 8px;
      }
      .color-3267F0 {
        color: #3267f0;
      }
    }
  }
}
</style>
