<template>
  <div class="comp-content">
    <el-drawer
      v-model="visible"
      title="新增配置"
      :size="400"
      :close-on-click-modal="false"
      @close="closeFun"
    >
      <div class="content">
        <TableForm ref="tableFormRef" :tableName="'APP_CONFIG_FORM'" />
      </div>
      <template #footer>
        <div>
          <el-button @click="closeFun">关闭</el-button>
          <el-button type="primary" @click="submitFun">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import TableForm from '@/components/common/table/tableForm.vue';

const emit = defineEmits(['cancel', 'submit']);

const props = defineProps(['configInfo', 'tableName']);

const tableFormRef = ref();
const visible = ref(true);

const closeFun = () => {
  emit('cancel');
};

const submitFun = async () => {
  const valid = await tableFormRef.value.validateFun();
  if (valid) {
    const fromData = tableFormRef.value.getFormDataFun();
    emit('submit', fromData);
  }
};

const configFormData = ref<any>({});

watch(
  () => props.configInfo,
  (newVal) => {
    if (newVal) {
      configFormData.value = newVal;
      nextTick(() => {
        if (configFormData.value?.id) {
          tableFormRef.value.setFormDataFun(configFormData.value);
        } else {
          tableFormRef.value.resetFun();
        }
      });
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped></style>
