<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-btn label="アプリ選択" color="primary" @click="showDg()" />
              <show-dialog v-model:visible="show">
               <app-select></app-select>
              </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 { ref } from 'vue'
let name = 'アプリ'
let show = ref(false);
let type = 'multiple';
let columns = [
  {
    name: 'id',
    required: true,
    label: 'アプリID',
    align: 'left',
    field: 'id',
    sortable: true
  },
  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
  { name: 'createdate', label: '作成日時', field: 'createdate' }
]

let rows = [
  {
    id:1,
    name: '日報アプリ１',
    creator: '日報　太郎',
    createdate: '2023/07/22 11:21:48'
  },
  {
    id:2,
    name: '日報アプリ２',
    creator: '日報　太郎',
    createdate: '2023/07/25 14:10:56'
  },
]
let appDg = ref(null);
const showDg = () => {
  show.value = true;
};


const closeDg = (val) => {
  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>
