<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">
      <Skeleton :row="3" :loading="result.loading" class="mt-5">
        <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"
        />
      </Skeleton>
      <Skeleton :row="3" :loading="result.loading" class="mt-12">
        <div class="overflow-scroll -mt-8 pb-5">
          <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>
      <!-- 附近网点 -->
      <Skeleton :row="3" :loading="result.loading" class="mt-5 mb-10"></Skeleton>
      
      <Skeleton :row="3" :loading="result.loading" class="mt-10"></Skeleton>
      <Skeleton :row="3" :loading="result.loading" class="mt-10"></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>