<template>
  <div class="comp-content">
    <el-drawer v-model="visible" :title="`新增指标`" :size="600" :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, nextTick, watch } from 'vue';
import TableForm from '@/components/common/table/tableForm.vue';

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

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();

    console.log(fromData, 'fromData');
    emit('submit', fromData);

  }
  console.log(props.tableName);

};

watch(
  () => props.tableName,
  (newVal) => {
    if (newVal) {

      nextTick(() => {
        console.log(newVal, 'newVal');

        tableFormRef.value.resetFun();

      });

    }
  },
  { immediate: true }
);

</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 18px !important;
}
</style>
