<template>
  <el-form
    ref="contactFormRef"
    :model="contactForm"
    :rules="contactRules"
    label-width="120px"
    style="max-width: 600px"
  >
    <el-form-item label="联系电话" prop="phone">
      <el-input
        v-model="contactForm.phone"
        placeholder="请输入联系电话"
      />
    </el-form-item>
    <el-form-item label="联系邮箱" prop="email">
      <el-input
        v-model="contactForm.email"
        placeholder="请输入联系邮箱"
      />
    </el-form-item>
    <el-form-item label="公司地址" prop="address">
      <el-input
        v-model="contactForm.address"
        placeholder="请输入公司地址"
      />
    </el-form-item>
    <el-form-item label="工作时间" prop="workTime">
      <el-input
        v-model="contactForm.workTime"
        placeholder="如：周一至周五 9:00-18:00"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveContactSettings">保存设置</el-button>
      <el-button @click="resetContactForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

const contactFormRef = ref<FormInstance>();

const contactForm = reactive({
  phone: "",
  email: "",
  address: "",
  workTime: ""
});

const contactRules: FormRules = {
  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }]
};

const saveContactSettings = async () => {
  if (!contactFormRef.value) return;
  await contactFormRef.value.validate((valid) => {
    if (valid) {
      // TODO: 保存联系方式
      ElMessage.success("联系方式保存成功");
    }
  });
};

const resetContactForm = () => {
  contactForm.phone = "";
  contactForm.email = "";
  contactForm.address = "";
  contactForm.workTime = "";
};

defineExpose({
  contactForm
});
</script>
