<template>
  <el-dialog :title="title" v-model="dialogOpen" width="600px" append-to-body>
    <el-form :model="form" :rules="rules" ref="orchardRef" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="果园名称" prop="orchardName">
            <el-input v-model="form.orchardName" placeholder="请输入果园名称" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="manager">
            <el-input v-model="form.manager" placeholder="请输入负责人" maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入地址" maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积(亩)" prop="area">
            <el-input v-model="form.area" type="number" placeholder="请输入面积" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :value="'0'">正常</el-radio>
              <el-radio :value="'1'">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
// 修改导入语句，添加watch
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { addOrchard, updateOrchard } from '@/api/orchard'

const props = defineProps({
  open: { type: Boolean, required: true },
  form: { type: Object, required: true },
  title: { type: String, required: true }
})

const emits = defineEmits(['update:open', 'success'])

// 创建本地状态来响应open属性的变化
const dialogOpen = ref(props.open)

// 表单验证规则
const rules = {
  orchardName: [{ required: true, message: '果园名称不能为空', trigger: 'blur' }],
  manager: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
  phone: [
    { required: true, message: '联系电话不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
  area: [
    { required: true, message: '面积不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '面积必须大于等于0', trigger: 'blur' }
  ]
}

// 创建表单引用
const orchardRef = ref(null)
// 移除 const { proxy } = getCurrentInstance()

onMounted(() => {
  // 重置表单
  setTimeout(() => {
    orchardRef.value?.resetFields()
  }, 0)
})

// 监听props.open的变化，同步到本地状态
watch(
  () => props.open,
  (newValue) => {
    dialogOpen.value = newValue
  }
)

// 监听本地状态的变化，通知父组件更新
watch(
  dialogOpen,
  (newValue) => {
    if (newValue !== props.open) {
      emits('update:open', newValue)
    }
  }
)

// 移除或修改相关函数中的emits调用
// 提交表单
async function submitForm() {
  try {
    await orchardRef.value.validate()

    if (props.form.orchardId) {
      await updateOrchard(props.form)
      ElMessage.success('修改成功')
    } else {
      await addOrchard(props.form)
      ElMessage.success('新增成功')
    }

    dialogOpen.value = false
    emits('success')
  } catch (error) {
    // 表单验证失败不提示错误
    if (error !== 'cancel') {
      ElMessage.error('操作失败: ' + (error.message || '未知错误'))
    }
  }
}

// 取消按钮操作
function cancel() {
  dialogOpen.value = false
  orchardRef.value?.resetFields()
}
</script>