<script setup lang="ts">
import { genderFormatter }         from '@/libs/vxe/formatter';
import type { PatientReportModel } from '@/model';
import request                     from '@/request/alova';
import { patientsRoomMethod }      from '@/request/api/patient.api';
import { UserOutlined }            from '@ant-design/icons-vue';
import { useRouteQuery }           from '@vueuse/router';
import { invalidateCache }         from 'alova';
import { useRequest }              from 'alova/client';
import { useRouter }               from 'vue-router';
import { RecycleScroller }         from 'vue-virtual-scroller';


const keyword = ref('');
const patientId = useRouteQuery('patientId');
const uid = useRouteQuery('uid');

const { data, loading, send } = useRequest(
  () => patientsRoomMethod({ patientName: keyword.value }),
  { initialData: [] },
).onSuccess(({ data }) => {
  if ( !patientId.value && data[ 0 ] ) handle(data[ 0 ]);
});

const router = useRouter();

async function handle(model: PatientReportModel) {
  const matchedMethods = request.snapshots.match({
    name: /(report|scheme|indicator)$/
  });
  await invalidateCache(matchedMethods);
  await router.replace({
    path: router.currentRoute.value.path,
    query: { patientId: model.id, reportId: model.report.id, uid: model.report.id },
  });
}
</script>
<template>
  <div class="page-aside flex flex-col">
    <div class="page-aside__header flex-none sticky top-0 z-11">
      <a-input-search
        allow-clear placeholder="输入姓名搜索"
        v-model:value="keyword"
        :loading @search="send"
      />
    </div>
    <div class="page-aside__content flex-auto">
      <a-empty v-if="!loading && !data.length" />
      <RecycleScroller v-else ref="scroller" class="record-scroller" key-field="uid"
                       :items="data" :item-size="40"
      >
        <template v-slot="{ item }">
          <div class="record-item flex items-center h-40px cursor-pointer"
               :class="{active: uid == item.uid}"
               @click="handle(item)"
          >
            <span><UserOutlined class="m-r-4px" />{{ item.name }}</span>
            <span>{{ genderFormatter(item.gender) }}</span>
            <span>{{ item.age }}岁</span>
          </div>
        </template>
      </RecycleScroller>
    </div>
  </div>
</template>
<style scoped lang="scss">
.page-aside {
  max-height: var(--page-main-container);
  overflow-y: auto;

  &__header {
    padding: 12px 24px;
    background-image: linear-gradient(to right, #186498, #1969a1);
  }

  &__content {
    background-color: #d3d3d3;
  }
}

.record-scroller {
  width: 100%;
  height: 100%;

  .record-item {
    padding: 4px 8px;
    color: #333;
    border-bottom: 1px solid #e5e5e5;

    > span {
      &:nth-of-type(1) { flex: 2 2 60%; }

      &:nth-of-type(2) { flex: 2 2 20%; }

      &:nth-of-type(3) { flex: 2 2 20%; }

      &:last-of-type { text-align: right; }
    }

    &:hover,
    &.active {
      color: #fff;
      background-color: #999;
    }
  }
}

.ant-empty {
  margin: 24px;
}
</style>
