<template>
  <div class="flex flex-col bg-[#f5f5f5]">
    <nut-menu class="h-[88rpx] bg-white" active-title-class="text-[#1580FF] text-[34rpx]" inactive-title-class="text-[#333] text-[34rpx]">
      <nut-menu-item :title="city" @open="toCityPage" />
      <nut-menu-item v-model="sortValue" ref="sortItemRef" :title="sortTitle">
        <div class="grid gap-[44rpx] w-full">
          <div class="flex items-center justify-between" v-for="item in sortOptions" :key="item.value" @click="onSortChange(item.value)">
            <span class="text-[32rpx] font-500" :class="[sortValue === item.value ? 'text-[#1580FF]' : 'text-[#333]']">{{ item.text }}</span>
            <Check v-if="sortValue === item.value" :stroke-width="3" class="text-[#1580FF]" />
          </div>
        </div>
      </nut-menu-item>
      <nut-menu-item v-model="filterValue" ref="filterItemRef" :title="filterTitle">
        <div class="grid gap-[44rpx] w-full">
          <div class="flex items-center justify-between" v-for="item in filterOptions" :key="item.value" @click="onFilterChange(item.value)">
            <span class="text-[32rpx] font-500" :class="[filterValue === item.value ? 'text-[#1580FF]' : 'text-[#333]']">{{ item.text }}</span>
            <Check v-if="filterValue === item.value" :stroke-width="3" class="text-[#1580FF]" />
          </div>
        </div>
      </nut-menu-item>
    </nut-menu>
    <nut-list :list-data="nursingHomeList">
      <template #default="{ item }">
        <div class="flex rounded-[20rpx] mx-[30rpx] mt-[30rpx] bg-white" @click="toDetail(item.id)">
          <img :src="item.image" alt="cover" srcset="" class="w-[256rpx] h-[216rpx] rounded-[20rpx_0_0_20rpx]" />
          <div class="flex flex-col p-[24rpx] flex-auto justify-between">
            <p class="text-[40rpx]">{{ item.name }}</p>
            <p class="text-[#666] text-[28rpx]">{{item.location}}·{{ item.distance }}</p>
            <div class="flex items-end">
              <nut-price :price="item.pricePerDay" size="large" class="font-700 text-[#1580FF]" />
              <span class="text-[#666] text-[28rpx] ml-[4rpx]">天/起</span>
            </div>
          </div>
        </div>
      </template>
    </nut-list>
  </div>
</template>

<script lang="ts" setup>
  import { Check } from "lucide-vue-next";
  import { useUserStore } from "@/store/user";
  import { useRouter } from "vue-router";
  import { useNursingHomeList } from "@/composables/useNursing";

  const router = useRouter();
  const userStore = useUserStore();

  const city = ref(userStore.deviceLocation.city || '上海');

  const toCityPage = () => {
    router.push({
      path: '/location/administrative',
      query: {
        city: city.value,
      },
    });
  };

  const sortValue = ref(0);
  const sortItemRef = useTemplateRef("sortItemRef");
  const sortOptions = ref([
    { text: "智能排序", value: 0 },
    { text: "距离优先", value: 1 },
    { text: "人气优先", value: 2 },
    { text: "好评优先", value: 3 },
    { text: "低价优先", value: 4 },
    { text: "高价优先", value: 5 },
  ]);
  const sortTitle = ref(sortOptions.value[0].text);
  const onSortChange = (value: number) => {
    sortValue.value = value;
    sortTitle.value = sortOptions.value.find((item) => item.value === value)?.text || sortOptions.value[0].text;
    sortItemRef.value?.toggle();
  };

  const filterOptions = ref([
    { text: "全部", value: 0 },
    { text: "5000以下", value: 1 },
    { text: "5000-7999", value: 2 },
    { text: "8000-11999", value: 3 },
    { text: "12000以上", value: 4 },
  ]);
  const filterValue = ref(0);
  const filterItemRef = useTemplateRef("filterItemRef");
  const filterTitle = ref(filterOptions.value[0].text);
  const onFilterChange = (value: number) => {
    filterValue.value = value;
    filterTitle.value = filterOptions.value.find((item) => item.value === value)?.text || filterOptions.value[0].text;
    filterItemRef.value?.toggle();
  };

  const { nursingHomeList } = useNursingHomeList();

  const toDetail = (id: string) => {
    router.push({
      path: `/jinze/detail/${id}`,
    });
  };
</script>

<style lang="scss" scoped>
  :deep(.nut-menu__bar) {
    --nut-menu-item-active-text-color: #1580ff;
    --nut-menu-item-font-size: 17px;
    height: 100%;
    .nut-menu__item {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  :deep(.nut-popup) {
    --nut-menu-item-content-max-height: 50vh;
    --nut-menu-item-content-padding: 11px 15px 19px 15px;
    border-radius: 0 0 16px 16px;
  }
</style>
