<template>
  <!-- 筛查地图 -->
  <div class="index-wrap">
    <x-header :left-options="{ backText: '', showBack: false }">
      人员列表
    </x-header>
    <v-content
      has-header
      :has-footer="false"
    >
      <!-- 列表 -->
      <div
        class="list_content"
        ref="scroller"
      >
        <van-list
          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>
      </div>
    </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;
      setTimeout(() => {
        this.loading = false
        this.totalCount = 40
        this.setNum(this.pageSize)
        if (this.peopleList.length >= this.totalCount) {
          this.finished = true
        }
      }, 1000);

    },
    loadMore () {
      this.pageNum++
      this.getList()
    },
    setNum (num) {
      for (let i = 0; i < num; i++) {
        this.peopleList.push(
          {
            name: "test06271021",
            followUpTime: '2022-08-88',
            diseaseType: 'sj_wzz',
            id: "62b90d53e4b0123121be58a8",
            patientInfo: {
              sex: 'a',
              birthday: '1976-08-11',
              address: '上海'
            },
            riskRank: 'c'
          }
        )
      }
    }
  },
  created () {
    this.getList()
  },
  activated () {
    const scrollTop = this.$route.meta.scrollTop;
    const $wrapper = document.querySelector('.list_content');
    if (scrollTop && $wrapper) {
      document.querySelector('.list_content').scrollTop = scrollTop;
    }
  },
  mounted () {
  },
  watch: {},
  filters: {
    vtol (v) {
      if (v) {
        return [{
          label: "无症状早癌筛查流程",
          value: "sj_wzz",
        },
        {
          label: "体检人群胃癌筛查",
          value: "sj_tj",
        },
        {
          label: "院内胃癌筛查流程",
          value: "sj_nj",
        }].filter(e => e.value == v)[0].label
      } else {
        return '--'
      }

    }
  },
};
</script>
<style lang="scss" scoped>
.doText {
  font-size: 16px;
  color: #127bff;
}

.content {
}
.list_content {
  height: calc(100vh - 44px);
  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>
