<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="售后登记" prop="afterSaleId">
        <el-input
          v-model="selectedRegisterLabel"
          placeholder="请选择已审核通过的售后登记"
          readonly
          @click="openRegisterSelector"
          style="cursor: pointer"
        >
          <template #append>
            <el-button :icon="Search" @click="openRegisterSelector" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="处理类型" prop="processType">
        <el-select v-model="formData.processType" placeholder="请选择处理类型" filterable>
          <el-option
            v-for="item in processTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处理数量" prop="processCount">
        <el-input-number v-model="formData.processCount" :min="0" class="!w-full" />
      </el-form-item>
      <el-form-item label="处理结果" prop="processResult">
        <el-input v-model="formData.processResult" placeholder="请输入处理结果" />
      </el-form-item>
      <el-form-item label="处理凭证" prop="processEvidence">
        <UploadImgs v-model="processEvidenceList" :limit="5" />
      </el-form-item>
      <el-form-item label="业务订单" prop="relatedOrderId">
        <el-input v-model="formData.relatedOrderId" placeholder="请输入业务订单" />
      </el-form-item>
      <el-form-item label="处理人" prop="processUser">
        <el-input v-model="formData.processUser" placeholder="请输入处理人" />
      </el-form-item>
      <el-form-item label="时间" prop="processTime">
        <el-date-picker
          v-model="formData.processTime as any"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择时间"
        />
      </el-form-item>
      <el-form-item v-if="formData.processStatus === 2" label="处理完成时间" prop="finishTime">
        <el-date-picker
          v-model="formData.finishTime as any"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择处理完成时间"
        />
      </el-form-item>
      <el-form-item label="评价" prop="userRating">
        <el-rate
          v-model="formData.userRating"
          :max="10"
          class="!w-full"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

  <!-- 售后登记选择弹窗 -->
  <Dialog v-model="registerSelectorVisible" title="选择售后登记" width="70%" :appendToBody="true">
    <ContentWrap>
      <el-form
        ref="registerQueryFormRef"
        :inline="true"
        :model="registerQueryParams"
        class="-mb-15px"
        label-width="100px"
      >
        <el-form-item label="售后类型" prop="afterSaleType">
          <el-select
            v-model="registerQueryParams.afterSaleType"
            placeholder="请选择售后类型"
            clearable
            class="!w-200px"
          >
            <el-option
              v-for="item in afterSaleTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="销售订单ID" prop="orderId">
          <el-input
            v-model="registerQueryParams.orderId"
            class="!w-200px"
            clearable
            placeholder="请输入销售订单ID"
            @keyup.enter="handleRegisterQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleRegisterQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetRegisterQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="registerLoading" :data="registerList" show-overflow-tooltip>
        <el-table-column label="#" width="55">
          <template #default="{ row }">
            <el-radio :value="row.id" v-model="selectedRegisterId" @change="handleRegisterSelected(row)">
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column label="登记ID" align="center" prop="id" width="100" />
        <el-table-column label="销售订单ID" align="center" prop="orderId" width="120" />
        <el-table-column label="售后类型" align="center" prop="afterSaleType" width="120">
          <template #default="{ row }">
            {{ formatAfterSaleType(row.afterSaleType) }}
          </template>
        </el-table-column>
        <el-table-column label="申请原因" align="center" prop="applyReason" min-width="150" />
        <el-table-column label="申请人" align="center" prop="applicant" width="100" />
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          width="160px"
        />
      </el-table>
      <Pagination
        v-model:limit="registerQueryParams.pageSize"
        v-model:page="registerQueryParams.pageNo"
        :total="registerTotal"
        @pagination="getRegisterList"
      />
    </ContentWrap>
  </Dialog>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { dateFormatter } from '@/utils/formatTime'
import { AfterSaleProcessApi, AfterSaleProcess } from '@/api/erp/aftersale/aftersaleprocess'
import { AfterSaleRegisterApi, AfterSaleRegister } from '@/api/erp/aftersale/aftersaleregister'
import { useUserStoreWithOut } from '@/store/modules/user'

/** ERP 售后处理 表单 */
defineOptions({ name: 'AfterSaleProcessForm' })

const processTypeOptions = [
  { label: '退货入库', value: 1 },
  { label: '换货出库', value: 2 },
  { label: '维修处理', value: 3 },
  { label: '退款处理', value: 4 },
  { label: '取消处理', value: 5 },
  { label: '其他', value: 6 }
]

const processStatusOptions = [
  { label: '退换货', value: 1 },
  { label: '维修申请', value: 2 },
  { label: '售后评价', value: 3 }
]

const processEvidenceList = ref<string[]>([])

// 售后登记选择器相关
const registerSelectorVisible = ref(false)
const selectedRegisterId = ref<number>()
const selectedRegisterLabel = ref<string>('')
const registerLoading = ref(false)
const registerList = ref<AfterSaleRegister[]>([])
const registerTotal = ref(0)
const registerQueryParams = ref({
  pageNo: 1,
  pageSize: 10,
  applyStatus: 2, // 仅已审核通过
  afterSaleType: undefined,
  orderId: undefined
})
const registerQueryFormRef = ref()

const afterSaleTypeOptions = [
  { label: '退货', value: 1 },
  { label: '换货', value: 2 },
  { label: '维修', value: 3 },
  { label: '退款', value: 4 }
]

/** 打开售后登记选择器 */
const openRegisterSelector = () => {
  registerSelectorVisible.value = true
  registerQueryParams.value = {
    pageNo: 1,
    pageSize: 10,
    applyStatus: 2,
    afterSaleType: undefined,
    orderId: undefined
  }
  getRegisterList()
}

/** 查询售后登记列表 */
const getRegisterList = async () => {
  registerLoading.value = true
  try {
    const data = await AfterSaleRegisterApi.getAfterSaleRegisterPage(registerQueryParams.value)
    registerList.value = data.list
    registerTotal.value = data.total
  } finally {
    registerLoading.value = false
  }
}

/** 搜索售后登记 */
const handleRegisterQuery = () => {
  registerQueryParams.value.pageNo = 1
  getRegisterList()
}

/** 重置售后登记查询 */
const resetRegisterQuery = () => {
  registerQueryParams.value = {
    pageNo: 1,
    pageSize: 10,
    applyStatus: 2,
    afterSaleType: undefined,
    orderId: undefined
  }
  getRegisterList()
}

/** 选中售后登记 */
const handleRegisterSelected = (row: AfterSaleRegister) => {
  formData.value.afterSaleId = row.id
  selectedRegisterLabel.value = `登记 #${row.id}（订单 ${row.orderId || '-'}）`
  selectedRegisterId.value = row.id
  registerSelectorVisible.value = false
}

/** 格式化售后类型 */
const formatAfterSaleType = (value?: number) => {
  if (!value) return '-'
  const match = afterSaleTypeOptions.find(item => item.value === value)
  return match?.label || String(value)
}

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const userStore = useUserStoreWithOut()
const currentUserNickname = computed(() => userStore.getUser?.nickname || '')
const nowString = () => dayjs().format('YYYY-MM-DD HH:mm:ss')

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref<Partial<AfterSaleProcess>>({
  id: undefined,
  afterSaleId: undefined,
  processType: undefined,
  processCount: undefined,
  processResult: undefined,
  processEvidence: '',
  relatedOrderId: undefined,
  processStatus: undefined,
  processFailReason: undefined,
  processUser: undefined,
  processTime: undefined,
  finishTime: undefined,
  userRating: undefined
})
const formRules = reactive({
  afterSaleId: [{ required: true, message: '售后登记不能为空', trigger: 'change' }],
  processType: [{ required: true, message: '处理类型不能为空', trigger: 'change' }],
  processResult: [{ required: true, message: '处理结果不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

// 同步处理凭证列表和表单数据
watch(
  () => formData.value.processEvidence,
  (newVal: string) => {
    processEvidenceList.value = newVal ? newVal.split(',').filter(url => url.trim()) : []
  },
  { immediate: true }
)

watch(
  processEvidenceList,
  (newList: string[]) => {
    formData.value.processEvidence = newList?.length ? newList.join(',') : ''
  },
  { deep: true }
)

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await AfterSaleProcessApi.getAfterSaleProcess(id)
      // 如果有售后登记ID，获取登记信息显示
      if (formData.value.afterSaleId) {
        const register = await AfterSaleRegisterApi.getAfterSaleRegister(formData.value.afterSaleId)
        selectedRegisterLabel.value = `登记 #${register.id}（订单 ${register.orderId || '-'}）`
        selectedRegisterId.value = register.id
      }
      ensureDefaultsForExisting()
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    let data = formData.value as unknown as AfterSaleProcess

    // 如果上传了处理凭证，自动设置为处理完成状态
    if (data.processEvidence && data.processEvidence.trim() !== '') {
      data = {
        ...data,
        processStatus: 2, // 处理完成
        finishTime: nowString()
      }
    }

    if (formType.value === 'create') {
      await AfterSaleProcessApi.createAfterSaleProcess(data)
      message.success(t('common.createSuccess'))
    } else {
      await AfterSaleProcessApi.updateAfterSaleProcess(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    afterSaleId: undefined,
    processType: undefined,
    processCount: undefined,
    processResult: undefined,
    processEvidence: '',
    relatedOrderId: undefined,
    processStatus: 1, // 新增时默认为处理中状态
    processFailReason: undefined,
    processUser: currentUserNickname.value || undefined,
    processTime: nowString(),
    finishTime: undefined,
    userRating: undefined
  }
  selectedRegisterLabel.value = ''
  selectedRegisterId.value = undefined
  formRef.value?.resetFields()
}

const ensureDefaultsForExisting = () => {
  if (!formData.value.processUser) {
    formData.value.processUser = currentUserNickname.value || undefined
  }
  if (!formData.value.processTime) {
    formData.value.processTime = nowString()
  }
  if (formData.value.processStatus === 2 && !formData.value.finishTime) {
    formData.value.finishTime = nowString()
  }
}
</script>
