<template>
  <view class="container">
    <Header title="售后/退款"></Header>
    <view class="content" v-if="orderDetail">
      <view class="content-box">
        <view class="content-item">
          <text class="title">单号:{{ orderDetail.orderStore.orderNumber.slice(6) }}</text>
        </view>
        <view class="content-item">
          <view class="item-top">
            <image
              class="item-img"
              mode="aspectFill"
              :src="fileDomain + orderDetail.orderItems[0].pic"
            ></image>
            <view class="item-info">
              <text>{{ orderDetail.orderItems[0].prodName }}</text>
              <text>￥{{ orderDetail.orderItems[0].price }}</text>
            </view>
          </view>
          <view class="item-buttom" style="padding-top: 60rpx">
            <text>共</text>
            <text class="num">{{ orderDetail.orderItems[0].prodCount }}</text>
            <text>件商品 实付款</text>
            <text class="icon">￥</text>
            <text class="price">{{ orderDetail.orderStore.actualTotal }}</text>
          </view>
        </view>
        <view class="content-item">
          <view class="item-buttom">
            <text>{{ orderDetail.orderStore.createTime }}</text>
          </view>
        </view>
        <view class="content-between">
          <text>退款金额</text>
          <text class="price">￥{{ orderDetail.orderStore.actualTotal }}</text>
        </view>
        <view class="content-between">
          <text>相关图片</text>
          <wd-upload
            :file-list="fileList"
            image-mode="aspectFill"
            :action="action"
            @change="handleChange"
            :header="headers"
            accept="image"
          ></wd-upload>
        </view>
        <view class="content-between" @tap="showPop = true">
          <text>退款原因</text>
          <view class="rightbox">
            <text v-if="selectType">{{ reasonList[selectType].name }}</text>
            <text v-else>选择退款原因</text>
            <wd-icon name="arrow-right" size="22px"></wd-icon>
          </view>
        </view>
      </view>

      <view class="btn" @tap="submit">提交</view>
    </view>
  </view>
  <wd-popup
    v-model="showPop"
    position="bottom"
    :safe-area-inset-bottom="true"
    custom-style="border-radius: 16rpx 16rpx 0 0"
    @close="showPop = false"
    lockScroll
  >
    <view class="pop-content">
      <view class="header">
        <view class="title">退款原因</view>
        <wd-icon name="close" size="20" color="#999" @tap="showPop = false"></wd-icon>
      </view>
      <radio-group style="width: 100%" @change="radioChange">
        <view class="resaon" v-for="(item, index) in reasonList" :key="index">
          <view class="resaon-item">
            <text>{{ item.name }}</text>
            <radio
              class="radio"
              color="#f62828"
              :value="item.id"
              :checked="item.id == selectType"
            />
          </view>
        </view>
        <textarea
          v-if="selectType == 4"
          v-model="otherReason"
          placeholder="请填写原因"
          placeholder-style="font-size:28rpx;color: #c0c4cc;"
        ></textarea>
      </radio-group>
      <view class="btn" @tap="chooseReason">确认</view>
    </view>
  </wd-popup>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { applyForARefundApi, getOrderDetail } from '@/api/order';
import { getToken } from '@/utils/auth';
const fileDomain = import.meta.env.VITE_APP_IMG_URL;
const token = getToken();

// 上传图片地址
const action = ref(import.meta.env.VITE_APP_BASE_URL + '/sgyrdd/file/update');
const headers = ref('');
// 订单号
const orderNumber = ref('');
onLoad((options) => {
  orderNumber.value = options.orderNumber;
  headers.value = { Authorization: 'Bearer ' + token };
  getDetail();
});

/**
 * 获取订单详情
 */
const orderDetail = ref();
const getDetail = async () => {
  const res = await getOrderDetail({ orderNumber: orderNumber.value });
  orderDetail.value = res.data;
};

/**
 * 获取图片列表
 */
// 上传文件地址
const fileList = ref([]);
function handleChange({ fileList: files }) {
  fileList.value = files;
  console.log(fileList.value);
}

const showPop = ref(false);
const selectType = ref(null);
const reasonList = ref([
  {
    id: '0',
    name: '不想要了',
  },
  {
    id: '1',
    name: '协商一致退款',
  },
  {
    id: '2',
    name: '缺货',
  },
  {
    id: '3',
    name: '七天无理由',
  },
  {
    id: '4',
    name: '其他',
  },
]);
const otherReason = ref('');
function radioChange(evt) {
  const { value } = evt.detail;
  selectType.value = value;
}

/**
 * 提交申请
 */
const submit = async () => {
  if (!selectType.value) {
    return xma.showToast({
      title: '请选择退款原因',
      icon: 'none',
    });
  }
  if (selectType.value === '4' && !otherReason.value) {
    return xma.showToast({
      title: '请输入其他原因',
      icon: 'none',
    });
  }
  xma.showLoading({
    title: '提交中',
    mask: true,
  });
  await applyForARefundApi({
    orderNumber: orderNumber.value,
    refundMemo:
      selectType.value === '4' ? otherReason.value : reasonList.value[selectType.value].name,
    imgs: processingImageAddresses(),
  });
  setTimeout(() => {
    xma.hideLoading();
    setTimeout(() => {
      xma.showToast({
        title: '提交成功',
        icon: 'success',
      });
    }, 500);
    xma.redirectTo({
      url: `/pages/order/order?status=after_sales`,
    });
  }, 1500);
};

/**
 * 图片地址处理
 */
const processingImageAddresses = () => {
  const data = fileList.value.map((item) => {
    return JSON.parse(item.response).data.url;
  });
  return data.join(',');
};

/**
 * 提交申请
 */
const chooseReason = () => {
  if (!selectType.value) {
    return xma.showToast({
      title: '请选择退款原因',
      icon: 'none',
    });
  }
  if (selectType.value === '4' && !otherReason.value) {
    return xma.showToast({
      title: '请输入其他原因',
      icon: 'none',
    });
  }
  showPop.value = false;
};
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}

.container {
  width: 375 * 2rpx;
  margin: 0 auto;

  .content {
    padding: 108rpx 10rpx 0;
    display: flex;
    flex-direction: column;
    gap: 60rpx;

    .content-box {
      background-color: #fff;
      border-radius: 8rpx;
      padding: 0 20rpx;
      display: flex;
      flex-direction: column;

      .content-item {
        border-bottom: 1rpx solid #f3f3f3;
        padding: 20rpx 0;

        .title {
          font-size: 28rpx;
          color: #333;
        }

        .item-top {
          display: flex;
          gap: 20rpx;

          .item-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 6rpx;
          }

          .item-info {
            display: flex;
            flex-direction: column;
            gap: 20rpx;

            text {
              font-size: 30rpx;
              color: #333;
            }
          }
        }

        .item-buttom {
          display: flex;
          justify-content: flex-end;
          align-items: baseline;

          text {
            font-size: 24rpx;
            color: #b5b5b5;
          }

          .num {
            color: #606060;
            font-weight: bold;
          }

          .icon {
            color: #606060;
          }

          .price {
            font-size: 30rpx;
            color: #606060;
          }
        }
      }

      .content-between {
        border-bottom: 1rpx solid #f3f3f3;
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;

        text {
          color: #747474;
          font-size: 30rpx;
        }

        .price {
          color: #e0302f;
        }

        .rightbox {
          display: flex;
          font-size: 30rpx;
          color: #b4b4b4;
        }
      }
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    width: 100%;
    background-color: #f8446b;
    color: #fff;
    font-size: 30rpx;
    border-radius: 8rpx;
  }
}

.pop-content {
  display: flex;
  flex-direction: column;
  padding: 20rpx;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30rpx;

    .title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 100%;
    }
  }

  textarea {
    width: 100%;
    height: 200rpx;
    border: 1rpx solid #e0e0e0;
    padding: 20rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    font-size: 28rpx;
  }

  .resaon {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .resaon-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 0;
      border-bottom: 1rpx solid #f3f3f3;

      text {
        font-size: 28rpx;
        color: #333;
      }

      radio {
        transform: scale(0.8);
      }
    }
  }

  .btn {
    margin-top: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58rpx;
    color: #fff;
    font-size: 28rpx;
    background-color: #f62828;
    border-radius: 36rpx;
    width: 100%;
  }
}
</style>
