<template>
  <ContentWrap v-loading="formLoading" style="overflow-y: auto;" class="ContentWrap">
    <div class="top" style="position: relative;overflow: hidden;">
      <van-tabs v-model:active="activeName">
        <van-tab title="订单信息" name="info" />
        <van-tab title="商品信息" name="spu" />
        <van-tab title="售后信息" name="afterinfo" />
        <van-tab title="退款状态" name="return" />
        <van-tab title="售后日志" name="afterlog" />
      </van-tabs>
    </div>
    <div>
      <AfterSaleBaseInfo :obj="Obj" :openType="openType" v-if="activeName == 'info'" />
      <AfterSaleSpuInfo :obj="Obj" :openType="openType" v-if="activeName == 'spu'" />
      <AfterSaleInfo :obj="Obj" :openType="openType" v-if="activeName == 'afterinfo'" />
      <AfterSaleRetrun :obj="Obj" :openType="openType" v-if="activeName == 'return'" />
      <AfterSaleLog :obj="Obj" :openType="openType" v-if="activeName == 'afterlog'" />
    </div>
    <div class="bottom">
      <el-button v-if="Obj.status === 10" :disabled="formLoading" type="danger" @click="disagree">拒绝售后</el-button>
      <el-button v-if="Obj.status === 10" :disabled="formLoading" type="primary" @click="agree">同意售后</el-button>
      <el-button v-if="Obj.status === 30" type="danger" @click="refuse">拒绝收货</el-button>
      <el-button v-if="Obj.status === 30" type="primary" @click="receive">
        确认收货
      </el-button>
      
      <el-button v-if="Obj.status === 40" type="primary" @click="refund" style="width:100%">确认退款</el-button>
    </div>
  </ContentWrap>


</template>

<script lang="ts" setup>
import AfterSaleBaseInfo from './components/AfterSaleBaseInfo.vue'
import AfterSaleLog from './components/AfterSaleLog.vue'
import AfterSaleRetrun from './components/AfterSaleRetrun.vue'
import AfterSaleInfo from './components/AfterSaleInfo.vue'
import AfterSaleSpuInfo from './components/AfterSaleSpuInfo.vue'
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
import { useRoute } from 'vue-router';
const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由跳转
const route = useRoute();
const openType = route.query.type;
const Obj = JSON.parse(route.query.obj);
const { t } = useI18n() // 国际化
defineOptions({ name: 'ProductSpuForm' })

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
// const goback = () => {
//   push({ name: 'Order', query: { openType: "tobedone", } })
// }
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// 拒绝售后
const disagree = async () => {
  const { value } = await ElMessageBox.prompt('请输入拒绝原因', '拒绝退货', {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
    inputErrorMessage: '拒绝原因不能为空'
  })
  try {
    await AfterSaleApi.disagree({ id: Obj.id, auditReason: value })
    message.success(t('common.updateSuccess'))
    // 发送操作成功的事件
    emit('success', true)
    push({ name: 'AfterSale', query: { openType: "tobedone", } })
  } finally {
    formLoading.value = false
  }
}

/** 同意售后 */
const agree = async () => {
  try {
    // 二次确认
    const isAgree = await message.confirm('是否同意售后？')
    await AfterSaleApi.agree(Obj.id)
    console.log(Obj)
    // 如果是仅退款的话 就直接弹退款
    if (isAgree == 'confirm' && Obj.way == 10) {
      refund()
    }else{
      push({ name: 'AfterSale', query: { openType: "tobedone" } })
    }
  } catch { }
}
/** 确认退款 */
const refund = async () => {
  try {
    // 二次确认
    await message.confirm('是否确认退款？')
    await AfterSaleApi.refund(Obj.id)
    // 提示成功
    message.success(t('common.success'))
    emit('success')
    push({ name: 'AfterSale', query: { openType: "tobedone", } })
  } catch { }
}
/** 确认收货 */
const receive = async () => {
  try {
    // 二次确认
    await message.confirm('是否确认收货？')
    await AfterSaleApi.receive(Obj.id)
    // 提示成功
    message.success(t('common.success'))
    emit('success')
    push({ name: 'AfterSale', query: { openType: "tobedone", } })
    
  } catch { }
}
/** 拒绝收货 */
const refuse = async () => {
  try {
    // 二次确认
    await message.confirm('是否拒绝收货？')
    await AfterSaleApi.refuse(Obj.id)
    // 提示成功
    message.success(t('common.success'))
    emit('success')
    push({ name: 'AfterSale', query: { openType: "tobedone", } })
    
  } catch { }
}
onMounted(() => {
  // 当子组件挂载时，改变父组件的样式
  document.getElementsByTagName('section')[1].style.padding = '0px';
  document.getElementsByTagName('section')[1].style.width = '100%';
  document.getElementsByTagName('section')[1].style.background = '#f5f7f9';
  document.getElementsByTagName('section')[1].querySelector('div').style.border = 'none';
});
onUnmounted(() => {
  // 当子组件卸载时，恢复父组件的原始样式
  document.getElementsByTagName('section')[1].style.width = 'auto';
  document.getElementsByTagName('section')[1].style.padding = '20px';
  document.getElementsByTagName('section')[1].style.background = 'var(--el-color-white)';
});
</script>



<style src="@/styles/MobileTab.css"  lang="scss" scoped></style>
<style lang="scss" scoped>
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 1rem;
  box-sizing: border-box;

  .el-button {
    width: 48%;
  }
}
</style>