<template>
  <!-- <div class="q-pa-md q-gutter-sm" > -->
    <q-dialog :model-value="visible" persistent bordered >
      <q-card style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
        <q-toolbar class="bg-grey-4">
          <q-toolbar-title>{{ name }}</q-toolbar-title>
          <q-space></q-space>
          <slot name="toolbar"></slot>
          <q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
        </q-toolbar>
        <q-card-section>
          <!-- <div class="text-h6">{{ name }}</div> -->
        </q-card-section>
        <q-card-section class="q-pt-none" :style="sectionStyle">
         <slot></slot>
        </q-card-section>
        <q-card-actions align="right" class="text-primary q-mt-lg">
          <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>
import {computed} from 'vue'
export default {
  name: 'ShowDialog',
  props: {
    name:String,
    visible: Boolean,
    width:String,
    height:String,
    minWidth:String,
    minHeight:String
  },
  emits: [
    'close'
  ],
  setup(props, context) {
    const CloseDialogue = (val) => {
      context.emit('update:visible', false);
      context.emit('close', val);
    }

    const cardStyle = computed(() => ({
      minWidth: props.minWidth,
      width: props.width
    }));

    const sectionStyle = computed(() => ({
      height: props.height,
      minHeight: props.minHeight
    }));

    return {
      CloseDialogue,
      cardStyle,
      sectionStyle
    }
  },
}
</script>
