<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="tableName" v-model:data="formData" />
      </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';
import { cloneDeep } from 'lodash-es';

const props = defineProps(['configParamInfo', 'tableName']);
const emit = defineEmits(['cancel', 'submit']);
const currentRow = ref<any>({});
const tableFormRef = ref();
const formData = 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.configParamInfo,
  (newVal) => {
    if (newVal) {
      currentRow.value = cloneDeep(newVal);
      nextTick(() => {
        tableFormRef.value.setFormDataFun(currentRow.value);
      });
    }
  },
  { immediate: true }
);
</script>

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