<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="30rem"
      :height="heightNum"
      @register="register"
      title="Add new server config"
      @cancel="handleCancel"
      :showOkBtn="true"
      @ok="handleSubmit"
      v-model:visible="visible"
    >
      <div style="display: flex; align-items: center; justify-content: center">
        <h2>Server type：</h2>
        <Select
          v-model:value="selectValue"
          style="width: 340px"
          :options="selectOptions"
          @change="emitChange"
        />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Select } from 'ant-design-vue';
  import { SelectTypes } from 'ant-design-vue/es/select';

  const emit = defineEmits(['register', 'emitSelect']);
  const [register] = useModalInner((data) => {
    console.log(data);
  });
  const heightNum = ref(80);
  const visible = ref(false);
  const selectValue = ref('LwM2M');
  const selectOptions = ref<SelectTypes['options']>([
    {
      label: 'LwM2M Server',
      value: 'LwM2M',
    },
    {
      label: 'Bootstrap Server',
      value: 'Bootstrap',
    },
  ]);
  const emitChange = (e) => {
    selectValue.value = e;
  };
  const handleSubmit = () => {
    emit('emitSelect', selectValue.value);
    handleCancel();
  };

  const handleCancel = () => {
    visible.value = false;
  };
</script>
<style lang="less" scoped></style>