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

  https://www.mall4j.com/

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

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

<template>
  <view class="Mall4j page-freight-template">
    <view class="body">
      <view>
        <view class="stencil">
          <view
            v-for="(item, index) in freightList"
            :key="index"
            :class="['list', deliveryIndex.id == item.transportId ? 'active' : '']"
            @tap="select(item)"
          >
            <text class="trans-name">
              {{ item.transName }}
            </text>
            <view class="option iconfont">
              &#xe659;
            </view>
          </view>
        </view>
        <view class="reminder">
          {{ $t('ruXuChuangJianXinDeYunFeiMoBanQingQianWangPcDuanPeiSongGuanLiJinHangCaoZuo') }}
        </view>
      </view>
    </view>

    <view class="footer">
      <button
        class="button"
        type="primary"
        @tap="toTableRate"
      >
        {{ $t('queDing') }}
      </button>
    </view>
  </view>
</template>

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

const freightList = ref([])
const prodStore = useProdStore()

const deliveryIndex = computed(() => prodStore.deliveryIndex)

onMounted(() => {
  getDataList()
  uni.setNavigationBarTitle({
    title: $t('yunFeiMoBan')
  })
})

// 选择模板
const select = (item) => {
  prodStore.deliveryIndex.id = item.transportId
  prodStore.deliveryIndex.name = item.transName
}

const getDataList = () => {
  http.request({
    url: '/shop/transport/list',
    method: 'GET',
    data: {}
  }).then(({ data }) => {
    freightList.value = data
  })
}

const toTableRate = () => {
  uni.navigateTo({
    url: '/package-prod/pages/post-prod/table-rate'
  })
}
</script>

<style lang="scss" scoped>
.page-freight-template {
  box-sizing: border-box;
  width: 750rpx;
  background-color: #F2F3F7;
  min-height: 100vh;
  font-size: 28rpx;
  color: #333;
  font-family: PingFang SC;
  padding-top: 20rpx;

  .body {
    background-color: #f8f8f8;

    .stencil {
      border-radius: 10px;
      padding: 0 30rpx;
      background-color: #fff;

      .list {
        // height: 92rpx;
        // line-height: 92rpx;
        padding: 26rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #F2F2F2;

        .trans-name {
          line-break: anywhere;
        }

        .option {
          // margin-top: 26rpx;
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          min-width: 36rpx;
          border-radius: 50%;
          border: 2rpx solid #D1D1D1;
          box-sizing: border-box;
          text-align: center;
          font-size: 12rpx;
          line-height: 36rpx;
          color: #fff;
        }
      }

      .active {

        .option {
          border: none;
          background-color: #082BA6;
        }
      }
    }
  }

  .reminder {
    padding: 0 30rpx;
    margin: 20rpx 0 40rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .footer {
    padding: 0 30rpx;

    button {
      background-color: #082BA6;
    }
  }
}
</style>
