<template>
  <layout>
    <uv-navbar
        :fixed="false"
        title="填写物流"
        left-arrow
        @leftClick="goBack"
    />
    <div>
      <div class="mb-20">
      </div>

      <view class="y-list">
        <uv-list border>

          <uv-list-item
              border
              clickable
              right-text="请选择"
              show-arrow
              @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">物流公司</view>
              <view
                  class="y-list-select-placeholder"
                  @tap="openLogisticsPicker"
                  v-if="!data.name"
              >
                请选择
              </view>
              <view
                  class="y-list-select"
                  @tap="openLogisticsPicker"
                  v-else
              >
                {{ data.name }}
              </view>
            </view>
          </uv-list-item>
          <uv-list-item border>
            <view class="y-list-content">
              <view class="y-list-label">物流单号</view>
              <view class="y-list-input">
                <uv-input
                    placeholder="请输入内容"
                    border="none"
                    v-model="data.postalCode"
                ></uv-input>
              </view>
            </view>
          </uv-list-item>
        </uv-list>
        <uv-picker
            ref="logisticsPicker"
            :columns="logisticsColumns"
            keyName="name"
            @confirm="logisticsPickerConfirm"
        ></uv-picker>
      </view>
      <view class="y-list">
        <uv-list border>

          <uv-list-item border>
            <view class="y-list-content">
              <view class="y-list-label">退货说明</view>
              <view class="y-list-input">
                <uv-input
                    placeholder="请输入内容"
                    border="none"
                    v-model="data.returnPolicy"
                ></uv-input>
              </view>
            </view>
          </uv-list-item>
        </uv-list>
      </view>
      <view class="card noBorder full">
        <view class="card-head">
          <div class="card-title">上传凭证</div>
        </view>
        <view class="card-content">
          <upload-file v-model="list" />
        </view>
      </view>

    </div>
    <div class="form-buttons">
      <uv-button
          round
          block
          type="primary"
          @tap="handleApplyForAfterSales"
      >
        提交
      </uv-button>
    </div>
  </layout>
</template>

<script setup>

import { computed, ref } from 'vue'
import { addLogisticsInformation,getExpress } from '@/api/order'
import { onLoad } from '@dcloudio/uni-app'
import { useRouter } from "@/hooks/useRouter";
import { useInterface } from "@/hooks/useInterface";

const {toast} = useInterface()
const {getParams, goBack, push} = useRouter()
const logisticsPicker = ref(null)
const refundType = ref(null)
const list = ref([])
const logisticsColumns = ref([])

const data = ref({
  code: '',
  name: '',
  postalCode: '',
  orderCode: '',
  id: '',
  returnPolicy: '',
  returnVoucher: ''
})


const getExpressList = () =>{
  getExpress().then((res) => {
    logisticsColumns.value = [res]
  })
}

// 打开快递弹窗
const openLogisticsPicker = () => {
  logisticsPicker.value.open();
}

// 快递弹窗确认
const logisticsPickerConfirm = (e) => {
  console.log(e)
  data.value.code = e.value[0].code
  data.value.name = e.value[0].name
  logisticsPicker.value.close();
}

const handleApplyForAfterSales = async () => {
  if (!data.value.code) {
    uni.showToast({
      icon: "none",
      title: '请选择快递公司',
      duration: 2000
    });
    return
  }
  if (!data.value.postalCode) {
    uni.showToast({
      icon: "none",
      title: '请选择退货说明',
      duration: 2000
    });
    return
  }
  await addLogisticsInformation({
    ...data.value,
    returnVoucher: list.value.map(v => {
      return v.url
    }).join(',')
  })
  toast({
    title: '填写成功'
  })
  push({url: '/pages/refundInfo/refundInfo'}, {
    data: {
      id: data.value.id,
    },
    type:"redirectTo"
  })
}

onLoad((options) => {
  const params = getParams(options)
  data.value.id = params.id
  data.value.orderCode = params.orderCode
  getExpressList()
})


</script>

<style lang="scss">

.shopping-action {
  padding-left: 34rpx;
  flex: 1;
  display: flex;
  justify-content: space-between;

  &-checkbox {
    flex: 1
  }

  &-total {
    line-height: 48rpx;
    font-size: 34rpx;
    color: #333333;
    margin-right: 10rpx;
  }

  &-btn {
    width: 224rpx;
  }
}
</style>
