<template>
  <!-- 筛查地图 -->
  <div class="index-wrap">
    <x-header :left-options="{ backText: '', showBack: false }">
      人员列表
    </x-header>
    <v-content
      has-header
      :has-footer="false"
    >
      <!-- 列表 -->
      <van-list
        class="list_content"
        ref="scroller"
        v-model="loading"
        :immediate-check='false'
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="loadMore"
      >
        <van-cell-group
          inset
          v-for="(item, index) in peopleList"
          :key="index"
        >
          <van-cell
            center
            is-link
            @click="JumpTo(item.id)"
          >
            <template #title>
              <div class="avater">
                <div
                  class="circle"
                  :style="{background:item.riskRank=='a'?'#ED4014':item.riskRank=='b'?'#FF9900':'#2DB7F5'}"
                >
                </div>
                {{ item.name }}
              </div>
            </template>
            <template #right-icon>
              <div class="right">
                <div class="plan_time">
                  计划随访时间 : {{ item.followUpTime }}
                </div>
                <div class="module">
                  模式 : {{ item.diseaseType | vtol }}
                </div>
              </div>
            </template>
            <template #label>
              <span>
                {{ item.patientInfo?item.patientInfo.sex=='a'?'男':'女':'--' }}
              </span>
              &nbsp;
              <span>
                {{ item.patientInfo?item.patientInfo.birthday:'--' }}
              </span>
              &nbsp;
              <span>
                {{ item.patientInfo?item.patientInfo.address:'--' }}
              </span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </v-content>
  </div>
</template>
<script>
export default {
  name: 'peopleList',
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
      peopleList: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    JumpTo (id) {
      this.$router.push(`/videoList?id=${id}`)
    },
    getList () {
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.finished = false;
      this.$API.getPeopleList(data).then(res => {
        this.loading = false
        this.totalCount = res.object.totalCount
        this.peopleList = [...this.peopleList, ...res.object.list]
        if (this.peopleList.length >= this.totalCount) {
          this.finished = true
        }
      })
    },
    loadMore () {
      this.pageNum++
      this.getList()
    },
  },
  created () {
    this.peopleList = []
    this.getList()
  },
  activated () {
    const scrollTops = this.$route.meta.scrollTop;
    const $content = document.querySelector('.list_content');
    if (scrollTops && $content) {
      this.$nextTick(() => {
        var scrollTop = this.$el.querySelector('.list_content')
        scrollTop.scrollTop = scrollTops - 1
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    const $content = document.querySelector('.list_content'); // 列表的外层容器
    const scrollTop = $content ? $content.scrollTop : 0;
    from.meta.scrollTop = scrollTop;
    next()
  },
  mounted () {
  },
  watch: {},
  filters: {
    vtol (v) {
      if (v) {
        let item = [{
          label: "无症状早癌筛查流程",
          value: "sj_wzz",
        },
        {
          label: "体检人群胃癌筛查",
          value: "sj_tj",
        },
        {
          label: "院内胃癌筛查流程",
          value: "sj_nj",
        }].filter(e => e.value == v)
        if (item.length > 0) {
          return item[0].label
        } else {
          return '--'
        }
      } else {
        return '--'
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.doText {
  font-size: 16px;
  color: #127bff;
}

.list_content {
  height: 100%;
  overflow: auto;
  padding: 20px 0;
}
.avater {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
  }
}
::v-deep .van-cell-group {
  height: 100px;
  margin-bottom: 16px;
  .van-cell {
    height: 100%;
  }
}
.right {
  height: 100%;
  padding: 9px 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.plan_time,
.module {
  margin-bottom: 2px;
  font-size: 12px;
  color: #969799;
}
</style>
