<template>
    <div>
        <q-field :label="displayName" labelColor="primary" stack-label>
            <template v-slot:control>
                <q-card flat class="full-width">
                    <q-card-actions vertical>
                        <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">アプリ選択</q-btn>
                    </q-card-actions>
                    <q-card-section class="text-caption">
                        <div v-if="selectedField.app.name">
                            {{ selectedField.app.name }}
                        </div>
                        <div v-else>{{ placeholder }}</div>
                    </q-card-section>
                </q-card>
            </template>
        </q-field>
    </div>

    <ShowDialog v-model:visible="dgIsShow" 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 { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
import ShowDialog from '../ShowDialog.vue';
import AppSelectBox from '../AppSelectBox.vue';


export default defineComponent({
    inheritAttrs: false,
    name: 'AppSelect',
    components: {
        ShowDialog,
        AppSelectBox
    },
    props: {
        context: {
            type: Array<Props>,
            default: '',
        },
        displayName: {
            type: String,
            default: '',
        },
        name: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '',
        },
        modelValue: {
            type: Object,
            default: null
        }
    },
    setup(props, { emit }) {
        const appDg = ref()
        const dgIsShow = ref(false)
        const selectedField = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
        const closeDg = (state: string) => {
            dgIsShow.value = false;
            if (state == 'OK') {
                selectedField.app = appDg.value.selected[0];
            }
        };

        console.log(selectedField);

        watchEffect(() => {
            emit('update:modelValue', selectedField);
        });

        return {
            filter: ref(''),
            dgIsShow,
            appDg,
            closeDg,
            selectedField
        };
    }
});
</script>
