<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-quick-supplier" v-loading="formLoading">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
        <el-form-item label="供应商名称" prop="name"><el-input v-model="formData.name" placeholder="请输入供应商名称" /></el-form-item>
        <el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item>
        <el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item>
        <el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item>
        <el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" /></el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button @click="submitForm" type="primary" :loading="formLoading">确 定</el-button>
    </template>
  </el-drawer>

  <!-- PC端布局 -->
  <Dialog v-else title="快速新增供应商" v-model="dialogVisible" width="500px">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
      <el-form-item label="供应商名称" prop="name"><el-input v-model="formData.name" placeholder="请输入供应商名称" /></el-form-item>
      <el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item>
      <el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item>
      <el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item>
      <el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button @click="submitForm" type="primary" :loading="formLoading">确 定</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { CommonStatusEnum } from '@/utils/constants'
import { useWindowSize } from '@vueuse/core'

defineOptions({ name: 'QuickSupplierForm' })

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

const message = useMessage()

const dialogVisible = ref(false)
const formLoading = ref(false)
const formRef = ref()
const formData = ref({
  name: undefined as string | undefined,
  contact: undefined as string | undefined,
  mobile: undefined as string | undefined,
  telephone: undefined as string | undefined,
  remark: undefined as string | undefined,
  status: CommonStatusEnum.ENABLE,
  sort: 0,
  type: 1 // 供应商类型
})

const formRules = reactive({
  name: [{ required: true, message: '供应商名称不能为空', trigger: 'blur' }],
  mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }]
})

/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true
  resetForm()
}

/** 提交表单 */
const emit = defineEmits<{
  success: [supplierId: number]
}>()

const submitForm = async () => {
  await formRef.value?.validate()
  formLoading.value = true
  try {
    const data = formData.value as unknown as SupplierVO
    const supplierId = await SupplierApi.createSupplier(data)
    message.success('新增供应商成功')
    dialogVisible.value = false
    emit('success', supplierId)
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    name: undefined,
    contact: undefined,
    mobile: undefined,
    telephone: undefined,
    remark: undefined,
    status: CommonStatusEnum.ENABLE,
    sort: 0,
    type: 1
  }
  formRef.value?.resetFields()
}

defineExpose({ open })
</script>

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