<!--
Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

https://www.mall4j.com/

未经允许，不可做商业用途！

版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-select-logistics">
    <view
      v-if="deliveryList.length"
      class="content"
    >
      <view
        v-for="(item, index) in deliveryList"
        :key="index"
        class="content-item"
        :class="{ active: Number(selectId) === item.dvyId }"
        @tap="handleSelectLogistic(item)"
      >
        <view class="text">
          {{ item.dvyName }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const Data = reactive({
  selectId: 5,
  deliveryList: [],
  pageNum: 1,
  totalPage: 1
})

const { selectId, deliveryList } = toRefs(Data)

onLoad((options) => {
  Data.selectId = options.dvyId
  if (options.isOnlineDelivery == 0) {
    onGetOutletConfigList()
  } else {
    getDeliveryList(1)
  }
})

onShow(() => {
  uni.setNavigationBarTitle({
    title: $t('xuanZeKuaiDiGongSi')
  })
})

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom(() => {
  if (Data.pageNum < Data.totalPage) {
    getDeliveryList(Data.pageNum + 1)
  }
})

/**
 * 获取物流公司列表
 */
const getDeliveryList = (current) => {
  http.request({
    url: '/admin/delivery/page',
    method: 'GET',
    data: {
      current,
      size: 20
    }
  }).then(({ data: res }) => {
    Data.deliveryList.push(...res.records)
    Data.pageNum = current
    Data.totalPage = res.pages
  })
}
// 获取网点列表
const onGetOutletConfigList = () => {
  http.request({
    url: '/shop/outletConfig/listOutletConfig',
    method: 'GET'
  }).then(({ data }) => {
    Data.deliveryList = data?.map((e) => {
      e.value ??= e.deliveryCompanyType
      e.dvyName ??= e.deliveryCompanyName
      e.isOnlineDelivery = true // 线上发货
      return e
    })
  })
}
const handleSelectLogistic = (item) => {
  Data.selectId = item.dvyId
  uni.setStorageSync('bbcSelectedDelivery', item)
  uni.navigateBack({
    delta: 1
  })
}
</script>

<style lang="scss" scoped>
@use "select-logistics";
</style>
