<template>
  <div class="comp-content">
    <el-drawer
      v-model="visible"
      :title="`${currentRow?.id ? '编辑' : '新增'}应用`"
      :size="400"
      :close-on-click-modal="false"
      @close="closeFun"
    >
      <div class="content">
        <TableForm ref="tableFormRef" :tableName="tableName" />
      </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 props = defineProps(['currentAppInfo', 'tableName']);
const emit = defineEmits(['cancel', 'submit']);
const currentRow = ref<any>({});
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);
  }
};

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

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