<template>
  <div class="panel-box">
    <BasicForm @register="registerForm" />
    <span>配置响应级别及人员</span>
    <renderForm />
    <div class="btn-box">
      <a-button @click="handleCancel"> 取消</a-button>
      <a-button @click="handleSubmit" type="primary"> 确定</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { reservePlanForm } from './reservePlanForm.data';
  import { ref, watch } from 'vue';
  import renderForm from './renderForm.vue';
  const emit = defineEmits(['getShowTable']);
  // const props = defineProps({
  //   isEdict: {
  //     type: Boolean,
  //     default: false,
  //   },
  // });
  const mapReady = ref<boolean>(false);
  const [registerForm] = useForm({
    labelWidth: 130,
    schemas: reservePlanForm,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 8,
    },
  });
  function handleCancel() {
    emit('getShowTable', true);
  }
  function handleSubmit() {
    // 这里是自己写的按钮，确认提交前需要做表单验证
    emit('getShowTable', true);
  }
  watch(
    () => mapReady,
    // 地图加载完成后进入工具初始化
    () => {}
  );
</script>
<style lang="less" scoped>
  .panel-box {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 20px 30px;

    .map-box {
      width: 800px;
      height: 300px;
      position: relative;
      border: 1px;
    }

    .btn-box {
      text-align: center;
      position: fixed;
      bottom: 3%;
      left: 50%;

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