<template>
  <section class="wardList">
    <ai-top-fixed>
      <u-search v-model="search" placeholder="请输入姓名" :show-action="false"
                search-icon-color="#ccc" placeholder-color="#999"
                @change="page.current=1,getUser()"/>
      <area-selector :areaId="areaId" @select="handleSelectArea"/>
    </ai-top-fixed>
    <div class="userList">
      <div v-for="row in list" :key="row.id" flex class="row" @tap="handleShowDetail(row)">
        <img :src="top.cdn(row.onlineStatus==1?'zxtx':'lxtx')"/>
        <b class="fill" v-text="row.name"/>
        <div class="status" :style="{color:$dict.getColor('intelligentGuardianshipAbnormalStatus',row.abnormalStatus)}"
             v-text="$dict.getLabel('intelligentGuardianshipAbnormalStatus',row.abnormalStatus)"/>
        <u-icon name="arrow-right" color="#ddd"/>
      </div>
    </div>
  </section>
</template>

<script>
import AiTopFixed from "../../components/AiTopFixed";
import {mapState} from "vuex";
import AreaSelector from "./component/areaSelector";

export default {
  name: "wardList",
  components: {AreaSelector, AiTopFixed},
  computed: {
    ...mapState(['user']),
  },
  inject: ['top'],
  data() {
    return {
      search: "",
      areaId: "",
      page: {current: 1, size: 20, total: 0},
      list: []
    }
  },
  methods: {
    getUser() {
      let {areaId, search: name} = this
      this.$http.post("/app/appintelligentguardianshipdevice/list", null, {
        params: {areaId, name, ...this.page}
      }).then(res => {
        if (res?.data) {
          let data = res.data.records.reverse()
          if (this.page.current > 1) {
            this.list = [...this.list, ...data]
          } else this.list = data
          this.page.total = res.data.total
        }
      })
    },
    handleSelectArea({id}) {
      this.areaId = id
      this.getUser()
    },
    reachBottom() {
      if (this.page.total > this.list.length) {
        this.page.current++
        this.getUser()
      }
    },
    handleShowDetail(user) {
      uni.navigateTo({url: `./userDetail?id=${user.id}`})
    }
  },
  created() {
    this.areaId = JSON.parse(JSON.stringify(this.user.areaId))
    this.getUser()
  }
}
</script>

<style lang="scss" scoped>
.wardList {
  background: #f5f5f5;
  padding-bottom: 130px;
  font-size: 30px;

  ::v-deep .userList {
    margin-top: 16px;
    background: #fff;

    .row {
      font-size: 36px;
      margin-left: 32px;
      padding-right: 32px;
      height: 104px;
      border-bottom: 1px solid #ddd;

      img {
        width: 72px;
        height: 72px;
        margin-right: 38px;
      }

      .status {
        margin-right: 12px;
      }
    }
  }
}
</style>
