<template>
  <div class="comp-content">
    <el-drawer
      v-model="visible"
      :title="`新增参数`"
      :size="640"
      :close-on-click-modal="false"
      @close="closeFun"
      z-index="10"
    >
      <div class="content">
        <!-- <TableForm ref="tableFormRef" :tableName="tableName" :data="{}" /> -->
        <PageConfig ref="pageConfigRef" :node-attribute="nodeAttribute"></PageConfig>
      </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 PageConfig from '@/views/simulation/creation/components/pageConfig/index.vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  currentConfig: {
    type: Object,
    default: () => {},
  },
  tableName: {
    tyep: String,
    default: '',
  },
});
const emit = defineEmits(['cancel', 'submit']);
const currentRow = ref<any>({});
const visible = ref(true);
const pageConfigRef = ref();

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

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

  const fromData: any = pageConfigRef.value.drawingList || [];

  let result: any = false;

  for (let i = 0; i < fromData.length; i++) {
    if (!fromData[i].englishLabel?.length) {
      result = true;
    }
  }

  if (result) {
    ElMessage.warning('存在参数未填写英文名，请补充完整！');
    return;
  } else {
    emit('submit', fromData);
  }
};

const nodeAttribute = ref<any>({});
watch(
  () => props.currentConfig,
  (newVal) => {
    if (newVal) {
      currentRow.value = newVal;
      nodeAttribute.value = newVal;
      nextTick(() => {
        // tableFormRef.value.resetFun();
      });
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
</style>
