<template>
  <full-page :customScroll="true" @reachBottom="getMore()">
    <template #header>
      <view class="flex items-center px-15 py-12 bg-white border-b">
        <view class="w-0 flex-grow mr-10 border py-5 px-15 rounded-full">
          <input v-model="keyword" class="w-full text-dark text-base" type="text" placeholder="搜索科室"
            placeholder-class="text-base text-gray" />
        </view>
        <view class="text-primary text-base" @click="keyword = ''">
          清空
        </view>
      </view>
    </template>
    <scroll-view v-if="list.length" class="h-full bg-white" scroll-y="true">
      <view v-for="i in list" :key="`filter-${getHospitalId(i)}`" class="flex items-center px-15 py-12 border-b"
        @click="select(i)">
        <view class="mr-10 w-0 flex-grow text-base text-dark">{{ i.name }}</view>
        <image v-if="hospital && getHospitalId(hospital) === getHospitalId(i)" class="flex-shrink-0 icon-checked"
          src="/static/form/checked.svg" />
      </view>
    </scroll-view>
    <empty-data v-else fullCenter />
    <template #footer>
      <view class="relative z-2 shadow-up bg-white">
        <view class="pt-12 px-15 text-center" @click="toService()">
          <text class="mr-5 text-base text-gray">如没有符合的内容，请</text>
          <text class="text-base text-primary">联系客服</text>
        </view>
        <button-footer :showShadow="false" :showCancel="false" @confirm="save()" />
      </view>
    </template>
  </full-page>

</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import usePageList from "@/hooks/usePageList"
import api from "@/utils/api";
import { toast } from "@/utils/widget";

import buttonFooter from "@/components/button-footer.vue";
import EmptyData from "@/components/empty-data.vue";
import fullPage from "@/components/full-page.vue";

const { total, list, loading, hasMore, page, pages, pageSize, keyword, changePage } = usePageList(getList)
const eventName = ref('');
const hospital = ref();

function select(i) {
  hospital.value = i;
}

function getHospitalId(item) {
  return item?.hospitalId || item?._id || "";
}

function getMore() {
  if (hasMore.value && !loading.value) {
    changePage(page.value + 1)
  }
}

function save() {
  if (hospital.value) {
    uni.$emit(eventName.value, {
      hospitalId: getHospitalId(hospital.value),
      hospitalName: hospital.value.name || hospital.value.hospitalName || "",
      name: hospital.value.name || hospital.value.hospitalName || "",
    })
    uni.navigateBack()
  } else {
    toast('请选择医院')
  }
}

function toService() {
  uni.navigateTo({
    url: '/pages/work/service/contact-service'
  })
}

async function getList() {
  const res = await api('getHlwHospitalList', { page: page.value, pageSize: pageSize.value, name: keyword.value })
  const arr = res && Array.isArray(res.data) ? res.data : [];
  list.value = page.value === 1 ? arr : list.value.concat(arr);
  total.value = res && typeof res.total === 'number' ? res.total : 0;
  pages.value = res && typeof res.pages === 'number' ? res.pages : 0;
  if (!res || !res.success) {
    toast(res?.message || '获取数据失败');
  }
}

onLoad((opt) => {
  eventName.value = opt.eventName;
  changePage(1);
});

</script>

<style lang="scss" scoped>
.icon-checked {
  width: 40rpx;
  height: 40rpx;
}

.pt-12 {
  padding-top: 24rpx;
}
</style>
