<template>
    <div class="q-my-md" v-bind="$attrs">
        <q-card flat>
            <q-card-section class="q-pa-none q-my-sm q-mr-md">
                <!-- <div class=" q-my-none ">App Field Select</div> -->
                <div class="row q-mb-xs">
                    <div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="q-mb-xs">{{ selectedField.app?.name || '未選択' }}</div>
                    </div>
                    <div class="col-1">
                        <q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
                    </div>
                </div>
            </q-card-section>
            <q-separator />
            <q-card-section class="q-pa-none q-ma-none">
                <div style="">
                    <div v-if="selectedField.fields && selectedField.fields.length > 0 ">
                      <q-list bordered>
                        <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
                            <q-item :key="index" dense clickable >
                                <q-item-section>
                                        <q-item-label>
                                            {{ item.label }}
                                        </q-item-label>
                                </q-item-section>
                                <q-item-section side>
                                    <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
                                </q-item-section>
                            </q-item>
                        </q-virtual-scroll>
                      </q-list>
                    </div>
                    <!-- <div v-else class="row q-mt-lg">
                    </div> -->
                </div>
                <!-- <q-separator /> -->
            </q-card-section>
            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
                <div class="row">
                    <div class="text-grey text-caption"> {{ $props.placeholder }}</div>
                    <!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
                </div>
            </q-card-section>
        </q-card>
     </div>

    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">

        <div class="q-mx-md q-mb-lg">
            <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>

            <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
                <div v-if="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
                <q-space />
                <div>
                    <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
                        showSelectApp = true;
                    }"></q-btn>
                </div>
            </div>
        </div>

        <div v-if="!showSelectApp && selectedField.app?.name">
            <div>
                <div class="row q-mb-md">
                    <!-- <div class="col"> -->
                    <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
                    <!-- </div> -->
                    <q-space />
                    <!-- <div class="col"> -->
                    <div class="q-mr-md">
                      <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
                          <template v-slot:before>
                              <q-icon name="search" />
                          </template>
                      </q-input>
                    </div>
                </div>
                <div class="row">
                    <field-select ref="fieldDlg" name="フィールド" :type="selectType"
                        :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields" :fieldTypes="fieldTypes"></field-select>
                </div>
            </div>
        </div>
        <div style="min-width: 45vw;" v-else>
        </div>

    </show-dialog>

    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
        <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>
        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter" ></AppSelect>
    </show-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect, computed } from 'vue';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
import AppSelect from '../AppSelect.vue';
interface IApp{
  id:string,
  name:string
}
interface IField {
    name: string,
    code: string,
    type: string
}

interface IAppFields{
   app?:IApp,
   fields:IField[]
}

export default defineComponent({
    inheritAttrs:false,
    name: 'AppFieldSelect',
    components: {
        ShowDialog,
        FieldSelect,
        AppSelect,
    },
    props: {
        displayName: {
            type: String,
            default: '',
        },
        name: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '',
        },
        modelValue: {
            type: Object,
            default: null
        },
        selectType:{
            type:String,
            default:'single'
        },
        fieldTypes:{
            type:Array,
            default:()=>[]
        }
    },
    setup(props, { emit }) {
        const appDlg = ref();
        const fieldDlg = ref();
        const show = ref(false);
        const showSelectApp = ref(false);
       const selectedField = ref<IAppFields>({
          app:undefined,
          fields:[]
       });
       if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
         selectedField.value=props.modelValue as IAppFields;
       }
        const store = useFlowEditorStore();

        const isSelected = computed(() => {
            return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
        });

        const showDg = () => {
            show.value = true;
        };

        const clear = () => {
            selectedField.value ={
              fields:[]
            } ;
        }

        const closeAppDlg = (val: string) => {
            if (val == 'OK') {
                selectedField.value.app = appDlg.value.selected[0];
                selectedField.value.fields=[];
                showSelectApp.value=false;
            }
        };

        const closeFieldDialog=(val:string)=>{
          if (val == 'OK') {
                selectedField.value.fields = fieldDlg.value.selected;
            }
        };

        const removeField=(index:number)=>{
          selectedField.value.fields.splice(index,1);
        }
        watchEffect(() => {
            emit('update:modelValue', selectedField.value);
        });

        return {
            store,
            appDlg,
            fieldDlg,
            show,
            showDg,
            closeAppDlg,
            closeFieldDialog,
            selectedField,
            showSelectApp,
            isSelected,
            filter: ref(),
            clear,
            fieldFilter: ref(),
            removeField
        };
    }
});
</script>
