<template>
  <div class="row app-box">
    <q-icon
      class="self-center q-ma-sm"
      name="widgets"
      color="grey-9"
      style="font-size: 2em"
    />
    <div class="col-7 self-center ellipsis">
      <a :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
      {{ store.appInfo?.name }}
      </a>
    </div>
    <div class="self-center">
      <q-btn
        outline
        dense
        label="変 更"
        padding="none sm"
        color="primary"
        @click="showAppDialog"
      ></q-btn>
    </div>
  </div>
  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh" >
    <template v-slot:toolbar>
        <q-input  dense debounce="300" v-model="filter" placeholder="検索" clearable>
          <template v-slot:before>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
  </ShowDialog>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
import {AppInfo} from '../../types/ActionTypes'
import ShowDialog from '../../components/ShowDialog.vue';
import AppSelectBox from '../../components/AppSelectBox.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
import { useAuthStore } from 'src/stores/useAuthStore';
export default defineComponent({
  name: 'AppSelector',
  emits:[
    'appSelected'
  ],
  components:{
    AppSelectBox,
    ShowDialog
  },
  setup(props, context) {

    const store = useFlowEditorStore();
    const authStore=useAuthStore();
    const appDg = ref();
    const showSelectApp=ref(false);

    const closeDg=(val :any)=>{
      showSelectApp.value=false;
      console.log('Dialog closed->',val);
      if (val == 'OK') {
          const data  = appDg.value.selected[0];
          console.log(data);
          const appInfo={
            appId:data.id ,
            name:data.name
          };
          store.setApp(appInfo);
          store.loadFlow();
      }
    }
    const showAppDialog=()=>{
      showSelectApp.value=true;
    }
    return {
      store,
      authStore,
      showSelectApp,
      showAppDialog,
      closeDg,
      appDg,
      filter:ref('')
    }
  }
});
</script>
<style lang="scss">
  .app-box{
    border-radius: 2px;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
  }
</style>
