<template>
  <div class="q-pa-md q-gutter-sm">
    <q-dialog :model-value="visible" persistent>
      <q-card :style="{minWidth : width }">
        <q-card-section>
          <div class="text-h6">{{ name }}選択</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
         <slot></slot>
        </q-card-section>
        <q-card-actions align="right" class="text-primary">
          <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
          <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>

export default {
  name: 'ShowDialog',
  props: {
    name:String,
    visible: Boolean,
    width:String
  },
  emits: [
    'close'
  ],
  setup(props, context) {
    const CloseDialogue = (val) => {
      context.emit('update:visible', false);
      context.emit('close', val);
    }

    return {
      CloseDialogue
    }
  },
}
</script>
