<template>
  <Theme>
    <view class="wrap">
      <Navbar title="选择物流路线" fixed border>
        <template #right v-if="checkValue">
          <view class="nav_right" @click.stop="submit">
            <trans _t="确认" />
          </view>
        </template>
      </Navbar>
      <view class="content">
        <up-radio-group v-model="checkValue" activeColor="var(--black)" @change="handleRadioChange">
          <view class="list" v-for="item, index in detail" :key="index">
            <logisticsList :item="item" @change="handleRadioChange" />
          </view>
        </up-radio-group>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar"
import { SHOP_EXPRESS_TEMPLATE } from "@/api"
import { ref, nextTick, computed } from "vue";
import { t } from "@/locale"
import { Moneyhtml, findObjectByField } from "@/utils"
import { onShow } from "@dcloudio/uni-app"
import logisticsList from "./components/logistics_list"
import { useShopStore } from "@/store"

const detail = ref({})
const checkValue = ref(null)
const useShop = useShopStore()
const logistics = computed(() => useShop.getLogistics)

onShow(() => {
  checkValue.value = logistics.value.id
  getDetail();
})
const handleRadioChange = (id) => {
  checkValue.value = id
}
const getDetail = async () => {
  try {
    const res = await SHOP_EXPRESS_TEMPLATE();
    detail.value = res.data
  } catch (error) { }
}
const submit = () => {
  const findObj = detail.value.find(item => item.id === checkValue.value)
  useShop.setLogistics(findObj)
  uni.navigateBack();
}
</script>
<style lang="less" scoped>
@import url('@/style.less');

.wrap {
  min-height: 100vh;
  background-color: var(--bg);

  .nav_right {
    color: var(--black);
    .size(24rpx);
    font-weight: 500;
  }

  .content {
    padding: 24rpx;

    .list {
      width: 100%;
    }
  }
}
</style>