<template>
  <div>
    <div class="p-4">
      <div class="button-container">
        <div class="type-button">
          <a-button type="primary" :loading="loading.typeSubmitting" @click="onTypeAdd"
            >添加标准</a-button
          >
          <a-button type="primary" color="error">删除标准</a-button>
        </div>
        <div class="parameter-button">
          <a-button type="primary" @click="onParameterAdd">添加参数</a-button>
          <a-button type="primary" color="error">删除参数</a-button>
        </div>
      </div>
      <a-row :gutter="[8, 0]" :span="24">
        <a-col :span="10">
          <StandardTable />
        </a-col>
        <a-col :span="14">
          <ParameterTable />
        </a-col>
      </a-row>
    </div>
    <component :is="modal" @register="registerModal" />
    <!-- <StandardModal @register="registerModal" /> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref, markRaw, nextTick } from 'vue';
  import StandardTable from './standardTable.vue';
  import ParameterTable from './ParameterTable.vue';
  import StandardModal from './standardModal.vue';
  import ParemeterModal from './ParameterModal.vue';
  import { useModal } from '/@/components/Modal';

  const loading = ref({
    typeSubmitting: false,
  });
  const modal = ref(null) as any;
  const [registerModal, { openModal }] = useModal();

  function onTypeAdd() {
    modal.value = markRaw(StandardModal);
    nextTick(() => {
      openModal();
    });
  }
  function onParameterAdd() {
    modal.value = markRaw(ParemeterModal);
    nextTick(() => {
      openModal();
    });
  }
</script>

<style lang="less" scoped>
  .button-container {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    background-color: white;
    margin: 10px 0;
    position: relative;

    .type-button {
      position: absolute;
      left: 0;
    }

    .parameter-button {
      position: absolute;
      right: 0;
    }

    :deep(.ant-btn) {
      margin: 0 10px;
    }
  }
</style>
