<template>
  <vxe-modal
    v-model="showModal"
    :title="modalTitle"
    @hide="onHide"
    width="400px"
    show-footer
    esc-closable
  >
    <el-form ref="formRef" inline :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item class="w-full" label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="w-full" label="账号" prop="code">
            <el-input v-model="form.code" placeholder="请输入账号" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="w-full" label="角色" prop="role">
            <el-input v-model="form.role" placeholder="请输入账号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button type="default" @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
  import { computed } from 'vue';
  import { reactive, ref } from 'vue';

  const formRef = ref();
  const showModal = ref(false);
  const form = reactive({
    name: '',
    code: '',
    role: '',
  });
  const currentAccount = ref(undefined);
  const isEdit = computed(() => !!currentAccount.value);
  const modalTitle = computed(() => (isEdit.value ? '编辑账号' : '新增账号'));

  const rules = reactive({
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    code: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
    role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
  });

  const submitForm = () => {};

  const onHide = () => {
    formRef.value.resetFields();
    currentAccount.value = null;
  };
  const openModal = (account) => {
    showModal.value = true;
    currentAccount.value = account;
    Object.assign(form, account);
  };

  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped></style>
