<template>
  <!-- 移动端布局 -->
  <el-drawer
    v-if="isMobile"
    v-model="dialogVisible"
    title="提交审批"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
  >
    <div class="mobile-approval-form">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
        <el-form-item label="下一级审批人" prop="nextApprover">
          <el-select
            v-model="formData.nextApprover"
            placeholder="请选择下一级审批人"
            filterable
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.nickname"
              :value="String(user.id)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
    </template>
  </el-drawer>

  <!-- PC端布局 -->
  <el-dialog v-else v-model="dialogVisible" title="提交审批" width="500px" :close-on-press-escape="true" :destroy-on-close="true">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
      <el-form-item label="下一级审批人" prop="nextApprover">
        <el-select v-model="formData.nextApprover" placeholder="请选择下一级审批人" filterable clearable style="width: 100%">
          <el-option v-for="user in userList" :key="user.id" :label="user.nickname" :value="String(user.id)" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" :rows="4" placeholder="请输入备注信息" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ApprovalRecordApi } from '@/api/erp/approval'
import * as UserApi from '@/api/system/user'
import type { UserVO } from '@/api/system/user'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

const message = useMessage()
const dialogVisible = ref(false)
const loading = ref(false)
const formRef = ref()
const userList = ref<UserVO[]>([])
const bizId = ref<string>()
const bizTableName = ref<string>()

const formData = reactive({
  nextApprover: '',
  remark: ''
})

const formRules = {
  nextApprover: [{ required: true, message: '请选择下一级审批人', trigger: 'change' }]
}

const open = async (bizIdParam: string, bizTableNameParam: string) => {
  bizId.value = bizIdParam
  bizTableName.value = bizTableNameParam
  dialogVisible.value = true
  formData.nextApprover = ''
  formData.remark = ''
  
  try {
    userList.value = await UserApi.getSimpleUserList()
  } catch (error) {
    console.error('获取用户列表失败', error)
  }
}

const submitForm = async () => {
  if (!formRef.value) return
  
  const valid = await formRef.value.validate()
  if (!valid) return

  loading.value = true
  try {
    await ApprovalRecordApi.submitApproval({
      bizId: bizId.value!,
      bizTableName: bizTableName.value!,
      nextApprover: formData.nextApprover,
      remark: formData.remark
    })
    message.success('提交审批成功')
    dialogVisible.value = false
    emit('success')
  } catch (error) {
    console.error('提交审批失败', error)
    // 处理重复提交错误
    if (error?.response?.data?.msg?.includes('已提交审批')) {
      message.warning('该单据已提交审批，不能重复提交')
    } else {
      message.error('提交审批失败，请重试')
    }
  } finally {
    loading.value = false
  }
}

const emit = defineEmits(['success'])
defineExpose({ open })
</script>

<style lang="scss" scoped>
.mobile-approval-form {
  padding: 12px;
}
</style>
