<template>
  <q-page>
    <div class="q-pa-md">
      <div class="q-gutter-sm row items-start">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/" />
          <q-breadcrumbs-el :label="title" icon="rule" />
        </q-breadcrumbs>
      </div>
      <div style="min-height: 100vh;">
        <div class="q-pa-md">
          <q-btn-dropdown split color="primary" label="ルール新規作成" size="lg">
            <q-list>
              <q-item v-for="action in actions" clickable v-close-popup @click="onItemClick" :key="action">
                <q-item-section>
                  <q-item-label>{{ action }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>
        <div class="q-pa-md">
          <q-select v-model="model" :options="options" label="Standard"/>
          <q-btn :label="model+'選択'" color="primary" @click="showDg()" />
          <show-dialog v-model:visible="show" :name="model" @close="closeDg">
            <template v-if="model=='アプリ'">
              <app-select ref="appDg" :name="model" type="single"></app-select>
            </template>
            <template v-if="model=='フィールド'">
              <field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
            </template>
            <template v-if="model=='アクション'">
              <action-select ref="appDg" :name="model" type="single"></action-select>
            </template>
          </show-dialog>
        </div>
      </div>

    </div>
  </q-page>
</template>

<script setup lang="ts">
import ShowDialog from 'components/ShowDialog.vue';
import AppSelect from 'components/AppSelect.vue';
import FieldSelect from 'components/FieldSelect.vue';
import ActionSelect from 'components/ActionSelect.vue';
import { ref } from 'vue'
let show = ref(false);
let appDg = ref();
let model = ref('アプリ');
let options = ['アプリ','フィールド','アクション']
const showDg = () => {
  show.value = true;
};


const closeDg = (val:string) => {
  if (val == 'OK') {
      alert(JSON.stringify(appDg.value.selected))
  }

};
interface Props {
  title: string;
  actions: string[];
}
const props = withDefaults(defineProps<Props>(), {
  title: "ルールエディター",
  actions: () => ["フィールド制御", "一覧画面", "その他"]
});
function onItemClick(evt: Event) {
  return;
}
</script>
