<template>
  <window-size>
    <van-field v-model="idCardOrTjid" center label="身份证/体检id" placeholder="请输入身份证/体检id">
      <template #button>
        <van-button size="small" type="primary" icon="search" @click="handleClickSearch">查询</van-button>
      </template>
    </van-field>

      <van-list :style="listBoxStyle" id="listWrapper" v-model:loading="listLoading" :finished="listFinished" finished-text="没有更多了" @load="onLoadingList">
        <van-cell v-for="item in examIndexes" :key="item.条码号" :title="item.工作单位" :value="item.checkTime"
                   center clickable @click="handleClickIndex(item.条码号)"></van-cell>
      </van-list>

  </window-size>
</template>
<script setup lang="ts">
import {getIdCard, getPhysicalCheckIndex} from '../../../api/physical-exam'
import {RouteParamValue, useRouter} from "vue-router";
import {onMounted, ref, Ref} from "vue";
import {useStore} from "vuex";

const store: object = useStore();
const router: object = useRouter();
const patientId: string | RouteParamValue[] = router.currentRoute.value.params.patientId;

const listBoxStyle: object = {
  height: store.state.windowSize.h - 100 + 'px',
  overflowY: 'scroll'
}

const idCardOrTjid: Ref<string> = ref();
const idCardTemp: Ref<string> = ref();
const nextPage: Ref<number> = ref(1);

const listLoading: Ref<boolean> = ref(false);
const listFinished: Ref<boolean> = ref(false);
const examIndexes: Ref<[]> = ref([]);

const onLoadingList = (): void => {
  if (idCardOrTjid.value) {
    fetchIndexData()
  } else {
    listLoading.value = false
  }
};

const handleClickSearch = (): void => {
  if (idCardOrTjid.value !== idCardTemp.value) {
    listFinished.value = false
    nextPage.value = 1
    examIndexes.value = []
  }
  if (listFinished.value) {
    return
  }
  idCardTemp.value = idCardOrTjid.value

  if (idCardOrTjid.value.trim().length > 15) {
    fetchIndexData()
  } else {
    handleClickIndex(idCardOrTjid.value)
  }
}

const fetchIndexData = (): void => {
  getPhysicalCheckIndex(idCardOrTjid.value, nextPage.value).then(index => {
    listLoading.value = false
    listFinished.value = index.pageInfo.nextPage === 0;
    examIndexes.value = examIndexes.value.concat(index.rows)
    if (index.pageInfo.nextPage > 0) {
      nextPage.value = index.pageInfo.nextPage
      store.commit('SET_PHYSICALEXAMNEXTPAGE', nextPage.value)
    }
    store.commit('SET_PHYSICALEXAMLISTFINISHED', listFinished.value)
    store.commit('SET_PHYSICALEXAMINDEXES', examIndexes.value)
  });
}

const handleClickIndex = (tjid:string): void => {
  store.commit('SET_CURRENTTJID', tjid)
  router.push('/physicalExamination/' + tjid)
}

onMounted((): void => {
  getIdCard(patientId).then(res => {
    idCardOrTjid.value = res
  })
  nextPage.value = store.state.physicalExamNextPage
  examIndexes.value = store.state.physicalExamIndexes
  listFinished.value = store.state.physicalExamListFinished
  const currentTjid = store.state.currentTjid
  if (currentTjid && examIndexes.value.length > 0) {
    const currentIndex = examIndexes.value.findIndex((item) => {
      return item['条码号'] === currentTjid
    })
    document.getElementById('listWrapper').scrollTop = 66 * currentIndex - 100
  }
})
</script>