<template>
  <view>
    <form @submit="subRefund" report-submit="true">
      <view class="apply-return">
        <view
          class="goodsStyle acea-row row-between borRadius14"
          v-for="(item, idx) in orderInfo.orderInfoList"
          :key="idx"
        >
          <view class="pictrue">
            <image :src="item.image"></image>
          </view>
          <view class="text acea-row row-between">
            <view class="name line2">{{ item.storeName }}</view>
            <view class="money">
              <view>￥{{ item.price }}</view>
              <view class="num">x{{ item.cartNum }}</view>
            </view>
          </view>
        </view>
        <view class="list borRadius14">
          <view class="item acea-row row-between-wrapper">
            <view>退货件数</view>
            <view class="num">{{ orderInfo.totalNum }}</view>
          </view>
          <view class="item acea-row row-between-wrapper">
            <view>退款金额</view>
            <view class="num">￥{{ orderInfo.payPrice }}</view>
          </view>
          <view
            class="item acea-row row-between-wrapper"
            @tap="toggleTab('region')"
          >
            <view>退款原因</view>
            <picker
              class="num"
              @change="bindPickerChange"
              :value="index"
              :range="RefundArray"
            >
              <view class="picker acea-row row-between-wrapper">
                <view class="reason">{{ RefundArray[index] }}</view>
                <text class="iconfont icon-jiantou"></text>
              </view>
            </picker>
          </view>
          <view class="item textarea acea-row row-between">
            <view>快递单号</view>
            <input name="refund_express_num" placeholder-class="express-num" placeholder="请输入快递单号" />
          </view>
          <view class="item textarea acea-row row-between">
            <view>备注说明</view>
            <textarea
              placeholder="填写备注信息，100字以内"
              class="num"
              name="refund_reason_wap_explain"
              placeholder-class="填写备注信息，100字以内"
            ></textarea>
          </view>
          <button class="returnBnt bg-color" form-type="submit">
            申请退款
          </button>
        </view>
      </view>
    </form>
  </view>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
} from "vue";
import { useAppStore } from "@/stores/app";
import { onLoad } from "@dcloudio/uni-app";
import {
  ordeRefundReason,
  orderRefundVerify,
  applyRefund,
} from "@/api/order.js";
import { toLogin } from "@/libs/login.js";

const appStore = useAppStore();
import { useToast } from "@/hooks/useToast";

const refund_reason_wap_imgPath = ref([]);
const orderInfo = reactive({});
const RefundArray = ref([]);
const index = ref(0);
const orderId = ref(0);

const { Toast } = useToast();


watch(() => appStore.isLogin, (newV) => {
  if (newV) {
    getOrderInfo();
    getRefundReason();
  }
});

onLoad((options) => {
  if (!options.orderId)
    return Toast({ title: "缺少订单id,无法退款" }, { tab: 3, url: 1 });
  orderId.value = options.orderId;
  if (appStore.isLogin) {
    getOrderInfo();
    getRefundReason();
  } else {
    toLogin();
  }
});

function onLoadFun() {
  getOrderInfo();
  getRefundReason();
}

/**
 * 获取订单详情
 */
function getOrderInfo() {
  applyRefund(orderId.value).then((res) => {
    Object.assign(orderInfo, res.data);
  });
}

/**
 * 获取退款理由
 */
function getRefundReason() {
  ordeRefundReason().then((res) => {
    RefundArray.value = res.data;
  });
}

/**
 * 申请退货
 */
function subRefund(e) {
  const value = e.detail.value;
  orderRefundVerify({
    text: RefundArray.value[index.value] || "",
    refund_reason_wap_explain: value.refund_reason_wap_explain,
    refund_express_num: value.refund_express_num,
    refund_reason_wap_img: refund_reason_wap_imgPath.value.join(","),
    uni: orderId.value,
  })
    .then((res) => {
      return Toast(
        { title: "申请成功", icon: "success" },
        { tab: 5, url: "/pages/users/user_return_list/index?isT=1" }
      );
    })
    .catch((err) => {
      return Toast({ title: err });
    });
}

function bindPickerChange(e) {
  index.value = e.detail.value;
}

function toggleTab() {
  // 保留原逻辑
}
</script>

<style scoped lang="scss">
.apply-return {
  padding: 20rpx 30rpx 70rpx 30rpx;

  .list {
    background-color: #fff;
    margin-top: 18rpx;
    padding: 0 24rpx 70rpx 24rpx;

    .item {
      min-height: 90rpx;
      border-bottom: 1rpx solid #eee;
      font-size: 30rpx;
      color: #333;

      .num {
        color: #282828;
        width: 427rpx;
        text-align: right;

        .picker {
          .reason {
            width: 385rpx;
          }
          .iconfont {
            color: #666;
            font-size: 30rpx;
            margin-top: 2rpx;
          }
        }
      }

      ::v-deep .express-num {
        text-align: right;
      }

      &.textarea {
        padding: 24rpx 0;

        textarea {
          height: 100rpx;
          font-size: 30rpx;
        }
      }

      .placeholder {
        color: #bbb;
      }

      .title {
        height: 95rpx;
        width: 100%;

        .tip {
          font-size: 30rpx;
          color: #bbb;
        }
      }

      .upload {
        padding-bottom: 36rpx;

        .pictrue {
          border-radius: 14rpx;
          margin: 22rpx 23rpx 0 0;
          width: 156rpx;
          height: 156rpx;
          position: relative;
          font-size: 24rpx;
          color: #bbb;

          &:nth-of-type(4n) {
            margin-right: 0;
          }

          image {
            width: 100%;
            height: 100%;
            border-radius: 14rpx;
          }

          .icon-guanbi1 {
            position: absolute;
            font-size: 45rpx;
            top: -10rpx;
            right: -10rpx;
          }

          .icon-icon25201 {
            color: #bfbfbf;
            font-size: 50rpx;
          }

          &:nth-last-child(1) {
            border: 1rpx solid #ddd;
            box-sizing: border-box;
          }
        }
      }
    }
    .returnBnt {
      font-size: 32rpx;
      color: #fff;
      width: 100%;
      height: 86rpx;
      border-radius: 50rpx;
      text-align: center;
      line-height: 86rpx;
      margin: 43rpx auto;
    }
  }
}
</style>
