<template>
  <!-- <div class="q-pa-md q-gutter-sm" > -->
    <q-dialog :model-value="visible" persistent bordered >
      <q-card class="" 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 v-if="$slots.toolbar"></q-space>
          <slot name="toolbar"></slot>
          <q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
        </q-toolbar>
        <q-card-section class="q-mt-md" :style="sectionStyle">
         <slot></slot>
        </q-card-section>
        <q-card-actions v-if="!disableBtn" align="right" class="text-primary">
          <q-btn flat :label="okBtnLabel || '確定'" :loading="okBtnLoading" :v-close-popup="okBtnAutoClose" @click="CloseDialogue('OK')" />
          <q-btn flat label="キャンセル" :disable="okBtnLoading" 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,
    okBtnLabel:String,
    okBtnLoading:Boolean,
    okBtnAutoClose:{
      type: Boolean,
      default: true
    },
    disableBtn:{
      type: Boolean,
      default: false
    }
  },
  emits: [
    'close',
    'update:visible'
  ],
  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>
