<template>
  <el-dialog v-model="showDialog" title="添加队伍" width="300" class="add-team-dialog" @close="clearData">
    <el-form :model="formData" ref="ruleFormRef" :rules="rules" label-position="top">
      <el-form-item prop="teamName" label="队伍名">
        <el-input v-model="formData.teamName" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
        <el-button @click="showDialog = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

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

  const emit = defineEmits<{ (e: 'emit-team-name', teamName: string) }>();

  const showDialog = ref(false);
  const formData = ref<{ teamName: string }>({
    teamName: '',
  });
  const ruleFormRef = ref<FormInstance>();
  const rules = ref<FormRules<{ teamName: string }>>({
    teamName: [{ required: true, message: '请输入队伍名', trigger: 'blur' }],
  });

  function dialogShow() {
    showDialog.value = true;
  }

  function clearData() {
    formData.value.teamName = '';
  }

  async function submitForm() {
    await ruleFormRef.value!.validate((valid) => {
      if (valid) {
        emit('emit-team-name', formData.value.teamName);
        showDialog.value = false;
      }
    });
  }

  defineExpose({
    dialogShow,
  });
</script>

<style scoped lang="scss"></style>
<style>
  .add-team-dialog {
    min-height: 0;
  }
</style>
