<template>
  <div class="pb-5 min-h-screen overflow-scroll mb-8">
    <nav-bar
      title="网点服务"
      :style="{ 'background-color': '#2C3C92 !important', color: 'white' }"
      iconColor="#FFFFFF"
    />
    <!-- 当前网点 -->
    <div
      class="
        px-4
        bg-branch-deep-blue
        h-40
        mb-28
        bg-app-branch-deep-blue
        flow-root
      "
    >
      <div class="mt-5" v-if="result.loading"></div>
      <Skeleton :row="3" :loading="result.loading">
        <div class="detail text-white text-sm pl-1 pt-8">
          提前预约网点 可享优先办理
        </div>
        <branch
          :changeable="false"
          :name="result.topItem.name"
          :distance="result.topItem.distance"
          :is_normal_work="result.topItem.is_normal_work"
          :latitude="result.topItem.latitude"
          :location="result.topItem.location"
          :longitude="result.topItem.longitude"
          :opening_hours="result.topItem.opening_hours"
          :weekend_status="result.topItem.weekend_status"
          :outlet_id="result.topItem.outlet_id"
          class="mt-3 shadow-sm z-20 relative"
        />
      </Skeleton>
      <div class="mt-12" v-if="result.loading"></div>
      <Skeleton :row="3" :loading="result.loading">
        <div class="overflow-scroll -mt-8 pb-5 z-10 relative">
          <p class="mt-12 mb-3 text-base font-semibold text-gray-800">
            附近的网点
          </p>
          <branch
            v-for="(item, index) in result.lists"
            :key="index"
            :name="item.name"
            :distance="item.distance"
            :is_normal_work="item.is_normal_work"
            :latitude="item.latitude"
            :location="item.location"
            :longitude="item.longitude"
            :opening_hours="item.opening_hours"
            :weekend_status="item.weekend_status"
            :outlet_id="item.outlet_id"
            class="mt-3 shadow-sm"
          />
          <!-- <branch :isOpen="false" class="mt-3 shadow-sm"/> -->
        </div>
      </Skeleton>
      <!-- 附近网点 -->
      <div class="mt-5" v-if="result.loading"></div>
      <Skeleton :row="3" :loading="result.loading"></Skeleton>
      <div class="mb-10" v-if="result.loading"></div>

      <div class="mt-10" v-if="result.loading"></div>
      <Skeleton :row="3" :loading="result.loading"></Skeleton>
      <div class="mt-10" v-if="result.loading"></div>
      <Skeleton :row="3" :loading="result.loading"></Skeleton>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import Branch from "@/components/Mine/Branch/branch.vue";
import AddressService from "@/service/AddressService/index";
import { iNearbyOutLet } from "@/service/AddressService/types";
import { Skeleton } from "vant";

const addressService = new AddressService();

export default defineComponent({
  components: { NavBar, Branch, Skeleton },
  setup() {
    const result = reactive({
      topItem: {} as iNearbyOutLet,
      lists: [] as iNearbyOutLet[],
      loading: false,
    });
    const getAddressList = () => {
      result.loading = true;
      addressService
        .getNearby({
          bank_code: Number(process.env.VUE_APP_BANK_CODE),
          number: 4,
        })
        .then((res) => {
          result.loading = false;
          result.topItem = res.data[0];
          result.lists = res.data.slice(1);
        });
    };
    getAddressList();

    return {
      result,
    };
  },
});
</script>

<style scoped></style>
