<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%">
    <ContentWrap v-loading="formLoading" style="max-height:550px;min-height:550px;overflow-y: auto;border:none ;">
      <div class="left ">
        <SPuUploadImg v-model="picUrl" :disabled="true" />
        <el-tabs v-model="activeName" tab-position="left" class="child-tabs">
          <el-tab-pane label="订单信息" name="info" />
          <el-tab-pane label="商品信息" name="spu" />
          <el-tab-pane label="售后信息" name="afterinfo" />
          <el-tab-pane label="退款状态" name="return" />
          <el-tab-pane label="售后日志" name="afterlog" />
        </el-tabs>
      </div>
      <div class="right">
        <AfterSaleBaseInfo :obj="Obj" :isDetail="isDetail" :openType="openType" 
            v-if="activeName == 'info'" />
        <AfterSaleSpuInfo :obj="Obj" :isDetail="isDetail" :openType="openType" 
              v-if="activeName == 'spu'" />
        <AfterSaleInfo :obj="Obj" :isDetail="isDetail" :openType="openType" 
              v-if="activeName == 'afterinfo'" />
        <AfterSaleRetrun :obj="Obj" :isDetail="isDetail" :openType="openType" 
              v-if="activeName == 'return'" />
        <AfterSaleLog :obj="Obj" :isDetail="isDetail" :openType="openType" 
              v-if="activeName == 'afterlog'" />
      </div>

      <div style="clear: both;"></div>
    </ContentWrap>
    <template #footer v-if="(Obj.status == 10 || Obj.status == 30 || Obj.status == 40) ">
      <div class="dialog-footer">
        <el-button v-if="Obj.status === 10" type="primary" @click="disagree">
            拒绝售后
          </el-button>
        <el-button v-if="Obj.status === 10" type="primary" @click="agree">同意售后</el-button>
        
        
        <el-button v-if="Obj.status === 30" type="primary" @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">确认退款</el-button>
      </div>
    </template>
  </Dialog>
  <UpdateAuditReasonForm ref="updateAuditReasonFormRef" @success="getDetail" />
</template>

<script lang="ts" setup>
import Dialog from '@/components/Dialog/src/Dialog.vue'
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 UpdateAuditReasonForm from '@/views/mall/trade/afterSale/form/AfterSaleDisagreeForm.vue'
import { findLastKey } from 'lodash-es'
const { t } = useI18n() // 国际化
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const isDetail = ref(false)
const openType = ref('view')
const Obj = ref({})
const picUrl = ref('picUrl') //头像
/** 打开弹窗 */
const open = async (type: string, obj: object) => {
  picUrl.value = obj.picUrl
  Obj.value = obj
  openType.value = type
  dialogTitle.value = t('action.' + type)
  if (type == "view") {
    dialogTitle.value = "查看"
  }
  // 判断打开状态，如果是view那就只能查看 否则可以编辑
  if ('view' == type) {
    isDetail.value = true
  } else {
    isDetail.value = false
    activeName.value = 'info'
  }
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const message = useMessage() // 消息弹窗
/** 拒绝售后 */
const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
const disagree = async () => {
  updateAuditReasonFormRef.value?.open(Obj.value)
}
/** 同意售后 */
const agree = async () => {

  try {
    // 二次确认
    
    const isAgree = await message.confirm('是否同意售后？')
    await AfterSaleApi.agree(Obj.value.id)
    console.log(isAgree)
    if (isAgree == 'confirm' && Obj.value.way == 10) {
      refund()
    }else{
      message.success(t('common.success'))
      dialogVisible.value = false
      emit('success')
    // 提示成功
    }
  } catch { }
}
/** 确认收货 */
const receive = async () => {
  try {
    // 二次确认
    await message.confirm('是否确认收货？')
    await AfterSaleApi.receive(Obj.value.id)
    // 提示成功
    message.success(t('common.success'))
    dialogVisible.value = false
    emit('success')
  } catch { }
}
/** 拒绝收货 */
const refuse = async () => {
  try {
    // 二次确认
    await message.confirm('是否拒绝收货？')
    await AfterSaleApi.refuse(Obj.value.id)
    // 提示成功
    message.success(t('common.success'))
    dialogVisible.value = false
    emit('success')
  } catch { }
}

/** 确认退款 */
const refund = async () => {
  try {
    // 二次确认
    await message.confirm('是否确认退款？')
    await AfterSaleApi.refund(Obj.value.id)
    // 提示成功
    message.success(t('common.success'))
    dialogVisible.value = false
    emit('success')
  } catch { }
}
</script>

<style lang="scss">
.el-dialog__body {
  padding: 0;
}

.left {
  width: 106px;
  float: left;
}

.child-tabs {
  border-top: 2px solid #e4e7ef;
  margin-top: -7px;
}

.child-tabs .el-tabs__item {
  width: 106px;
  justify-content: center;
}

.right {
  padding: 10px 0 0 10px;
  border-left: 2px solid #e4e7ee;
  margin-left: -2px;
  float: left;
  width: calc(100% - 120px);
}
</style>