<template>
  <DialogFrame ref="refDialog" :width="250" header-title="Add new Service">
    <div class="row justify-center">
      <div>
        <div class="q-ma-md text-primary text-bold">Choose new service</div>
        <q-select dense filled class="col-4" :options="opts" v-model="option"></q-select>
        <div class="row justify-end">
          <q-btn class="q-mt-md" no-caps color="primary">Add Service</q-btn>
        </div>
      </div>
    </div>
  </DialogFrame>
</template>

<script setup lang="ts">
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
import { ref } from 'vue';
import { useNotify } from 'src/vueLib/general/useNotify';
import { appApi } from 'src/boot/axios';

const { NotifyResponse } = useNotify();

const refDialog = ref();
const driverRows = ref([]);
const opts = ref();
const option = ref('');

interface conf {
  name: string;
}
function open() {
  appApi
    .get('services/all')
    .then((resp) => {
      driverRows.value = resp.data;
      opts.value = resp.data.services.map((item: conf) => item.name);
    })
    .catch((err) => NotifyResponse(err, 'error'));
  refDialog.value.open();
}

defineExpose({ open });
</script>
