<template>
  <a-modal
    :visible="visible"
    :title="isEdit ? '编辑供应商' : '新增供应商'"
    width="800px"
    @ok="handleOk"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
    :confirm-loading="submitting"
  >
    <a-form :model="form" layout="vertical" ref="formRef">
      <a-tabs v-model:active-key="activeTab">
        <!-- 基本信息 -->
        <a-tab-pane key="basic" title="基本信息">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                label="供应商名称"
                field="name"
                :rules="[{ required: true, message: '请输入供应商名称' }]"
              >
                <a-input
                  v-model="form.name"
                  placeholder="请输入供应商名称"
                  :max-length="200"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="供应商编码"
                field="code"
                :rules="[{ required: true, message: '请输入供应商编码' }]"
              >
                <a-input
                  v-model="form.code"
                  placeholder="请输入供应商编码"
                  :max-length="100"
                  :disabled="isEdit"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="简称" field="short_name">
                <a-input
                  v-model="form.short_name"
                  placeholder="请输入简称"
                  :max-length="100"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="供应商类型"
                field="supplier_type"
                :rules="[{ required: true, message: '请选择供应商类型' }]"
              >
                <a-select
                  v-model="form.supplier_type"
                  placeholder="请选择供应商类型"
                  allow-clear
                >
                  <a-option value="生产商">生产商</a-option>
                  <a-option value="代理商">代理商</a-option>
                  <a-option value="经销商">经销商</a-option>
                  <a-option value="服务商">服务商</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="供应商级别" field="supplier_level">
                <a-select
                  v-model="form.supplier_level"
                  placeholder="请选择供应商级别"
                  allow-clear
                >
                  <a-option value="A">A</a-option>
                  <a-option value="B">B</a-option>
                  <a-option value="C">C</a-option>
                  <a-option value="D">D</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="状态"
                field="status"
                :rules="[{ required: true, message: '请选择状态' }]"
              >
                <a-select
                  v-model="form.status"
                  placeholder="请选择状态"
                >
                  <a-option value="active">合作中</a-option>
                  <a-option value="paused">暂停合作</a-option>
                  <a-option value="blacklist">黑名单</a-option>
                  <a-option value="inactive">停止合作</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>

        <!-- 联系信息 -->
        <a-tab-pane key="contact" title="联系信息">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                label="联系人"
                field="contact_person"
                :rules="[{ required: true, message: '请输入联系人' }]"
              >
                <a-input
                  v-model="form.contact_person"
                  placeholder="请输入联系人"
                  :max-length="50"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="联系电话"
                field="contact_phone"
                :rules="[{ required: true, message: '请输入联系电话' }]"
              >
                <a-input
                  v-model="form.contact_phone"
                  placeholder="请输入联系电话"
                  :max-length="20"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                label="备用联系电话"
                field="contact_mobile"
                :rules="[{ required: true, message: '请输入备用联系电话' }]"
              >
                <a-input
                  v-model="form.contact_mobile"
                  placeholder="请输入备用联系电话"
                  :max-length="20"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="联系邮箱"
                field="contact_email"
                :rules="[
                  { required: true, message: '请输入联系邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' },
                ]"
              >
                <a-input
                  v-model="form.contact_email"
                  placeholder="请输入联系邮箱"
                  :max-length="100"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>

        <!-- 地址信息 -->
        <a-tab-pane key="address" title="地址信息">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="省份" field="province">
                <a-input
                  v-model="form.province"
                  placeholder="请输入省份"
                  :max-length="50"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="城市" field="city">
                <a-input
                  v-model="form.city"
                  placeholder="请输入城市"
                  :max-length="50"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="邮编" field="postal_code">
                <a-input
                  v-model="form.postal_code"
                  placeholder="请输入邮编"
                  :max-length="10"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="详细地址" field="address">
                <a-input
                  v-model="form.address"
                  placeholder="请输入详细地址"
                  :max-length="200"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>

        <!-- 企业信息 -->
        <a-tab-pane key="company" title="企业信息">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="法定代表人" field="legal_representative">
                <a-input
                  v-model="form.legal_representative"
                  placeholder="请输入法定代表人"
                  :max-length="50"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="注册资本" field="registered_capital">
                <a-input
                  v-model="form.registered_capital"
                  placeholder="请输入注册资本"
                  :max-length="50"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="营业执照号" field="business_license">
                <a-input
                  v-model="form.business_license"
                  placeholder="请输入营业执照号"
                  :max-length="100"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="税号" field="tax_id">
                <a-input
                  v-model="form.tax_id"
                  placeholder="请输入税号"
                  :max-length="50"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="企业类型" field="company_type">
                <a-input
                  v-model="form.company_type"
                  placeholder="请输入企业类型"
                  :max-length="50"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="官网地址" field="website">
                <a-input
                  v-model="form.website"
                  placeholder="请输入官网地址"
                  :max-length="200"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item label="供应商描述" field="description">
            <a-textarea
              v-model="form.description"
              placeholder="请输入供应商描述"
              :auto-size="{ minRows: 3, maxRows: 6 }"
              :max-length="500"
            />
          </a-form-item>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import { createSupplier, updateSupplier } from '@/api/ops/supplier'

interface Supplier {
  id?: number
  name?: string
  code?: string
  short_name?: string
  description?: string
  contact_person?: string
  contact_phone?: string
  contact_email?: string
  contact_mobile?: string
  province?: string
  city?: string
  address?: string
  postal_code?: string
  website?: string
  legal_representative?: string
  registered_capital?: string
  business_license?: string
  tax_id?: string
  company_type?: string
  supplier_type?: string
  supplier_level?: string
  status?: string
}

interface Props {
  visible: boolean
  supplier: Supplier | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const formRef = ref()
const submitting = ref(false)
const activeTab = ref('basic')

// 是否为编辑模式
const isEdit = computed(() => !!props.supplier?.id)

// 表单数据
const form = ref<Supplier>({
  name: '',
  code: '',
  short_name: '',
  description: '',
  contact_person: '',
  contact_phone: '',
  contact_email: '',
  contact_mobile: '',
  province: '',
  city: '',
  address: '',
  postal_code: '',
  website: '',
  legal_representative: '',
  registered_capital: '',
  business_license: '',
  tax_id: '',
  company_type: '',
  supplier_type: '',
  supplier_level: '',
  status: 'active',
})

// 监听 supplier 变化，初始化表单
watch(
  () => props.supplier,
  (newVal) => {
    if (newVal) {
      form.value = { ...newVal }
    } else {
      // 重置表单
      form.value = {
        name: '',
        code: '',
        short_name: '',
        description: '',
        contact_person: '',
        contact_phone: '',
        contact_email: '',
        contact_mobile: '',
        province: '',
        city: '',
        address: '',
        postal_code: '',
        website: '',
        legal_representative: '',
        registered_capital: '',
        business_license: '',
        tax_id: '',
        company_type: '',
        supplier_type: '',
        supplier_level: '',
        status: 'active',
      }
    }
    activeTab.value = 'basic'
  },
  { immediate: true }
)

// 提交表单
const handleOk = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (valid) {
      return
    }

    submitting.value = true

    const data = { ...form.value }

    let res
    if (isEdit.value) {
      res = await updateSupplier({ ...data, id: props.supplier?.id })
    } else {
      res = await createSupplier(data)
    }

    if (res.code === 0) {
      Message.success(isEdit.value ? '更新成功' : '创建成功')
      emit('success')
    } else {
      Message.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('提交表单失败:', error)
    Message.error('操作失败')
  } finally {
    submitting.value = false
  }
}

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}

// 处理对话框可见性变化
const handleVisibleChange = (visible: boolean) => {
  emit('update:visible', visible)
}
</script>

<script lang="ts">
export default {
  name: 'SupplierFormDialog',
}
</script>

<style scoped lang="less">
:deep(.arco-tabs-content) {
  padding-top: 16px;
}
</style>