<template>
  <layout>
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <div v-if="orderInfoData">
      <div class="mb-20">
        <card v-for="(item, index) in goodsList">
          <goods
            list
            interval
            showAction
            model
            :price="item.cartInfo.productInfo.price"
            :data="item.cartInfo.productInfo"
          >
          </goods>
        </card>
      </div>

      <view class="y-list">
        <uv-list border>
          <!-- <uv-list-item
            border
            clickable
            show-arrow
            @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">货物状态</view>
              <view class="y-list-select">
                请选择
              </view>
            </view>
          </uv-list-item> -->
          <uv-list-item
            border
            title="退款原因"
            clickable
            right-text="请选择"
            show-arrow
            @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">退款原因</view>
              <view
                class="y-list-select-placeholder"
                @tap="openReasonForApplicationPicker"
                v-if="!data.reasonForApplication"
              >
                请选择
              </view>
              <view
                class="y-list-select"
                @tap="openReasonForApplicationPicker"
                v-if="data.reasonForApplication"
              >
                {{ data.reasonForApplication }}
              </view>
            </view>
          </uv-list-item>
        </uv-list>
        <uv-picker
          ref="reasonForApplicationPicker"
          :columns="reasonForApplication"
          @confirm="reasonForApplicationConfirm"
        ></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-value">
                ¥{{ totalPrice }}
              </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.applicationInstructions"
                ></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 { ref, watch, computed } from 'vue'
import { applyForAfterSalesInfo, applyForAfterSales } from '@/api/order'
import { navigateTo, back } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'

const goodsList = ref([])
const goodsSelect = ref([])
const totalPrice = ref(0);
const orderInfoData = ref(null)
const reasonForApplicationPicker = ref(null)

const refundType = ref(null)
const list = ref([])
const reasonForApplication = ref([
  [
    "收货地址填错了",
    "与描述不符",
    "信息填错了，重新拍",
    "收到商品损坏了",
    "未按预定时间发货",
    "其它原因"
  ]
])

const data = ref({
  "orderId": "",
  // 服务类型 0仅退款1退货退款 serviceType;
  "serviceType": '',
  // 申请原因
  "reasonForApplication": "",
  // 申请说明
  "applicationInstructions": "",
  // 申请说明图片
  "applicationDescriptionPicture": "",
  "productParamList": []
})


const title = computed(() => {
  return refundType.value == 0 ? `申请退款` : '申请退货退款';
});

const openReasonForApplicationPicker = () => {
  reasonForApplicationPicker.value.open();
}

const reasonForApplicationConfirm = (e) => {
  data.value.reasonForApplication = e.value[0]
  reasonForApplicationPicker.value.close();
}



const handleOrderInfo = async (option) => {
  const res = await applyForAfterSalesInfo(option)
  orderInfoData.value = res
  goodsList.value = res.filter(item => goodsSelect.value.includes(item.id))

  let price = 0
  let productParamList = []

  goodsList.value.forEach(item => {
    price += item.cartInfo.truePrice * item.cartInfo.cartNum
    productParamList.push({
      productId: item.id
    })
  })

  totalPrice.value = price
  data.value.orderId = option.orderId
  data.value.serviceType = refundType.value
  data.value.productParamList = productParamList

}


const handleApplyForAfterSales = async () => {

  if (!data.value.reasonForApplication) {
    uni.showToast({
      icon: "none",
      title: '请选择申请原因',
      duration: 2000
    });
    return
  }
  if (!data.value.applicationInstructions) {
    uni.showToast({
      icon: "none",
      title: '请选择申请说明',
      duration: 2000
    });
    return
  }

  console.log("--> % handleApplyForAfterSales % data.value:\n", data.value)
  console.log("gxs --> % handleApplyForAfterSales % list.value:\n", list.value)
  let res = await applyForAfterSales({
    ...data.value,
    applicationDescriptionPicture: list.value.join(',')
  })
  back()
  console.log("--> % handleApplyForAfterSales % res:\n", res)
}

onLoad((option) => {
  handleOrderInfo({
    key: option.id
  })
  goodsSelect.value = option.goods
  refundType.value = option.refundType


})


</script>

<style lang="less">
.shopping-checkbox {}

.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>
