<template>

    <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="selField?.app && !showSelectApp">{{ selField?.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 && selField?.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" :updateSelectFields="updateSelectFields"
                    :appId="selField?.app?.id" not_page :filter="fieldFilter"
                    :selectedFields="selField.fields" :fieldTypes="fieldTypes"></field-select>
            </div>
        </div>
    </div>
    <div style="min-width: 45vw;" v-else>
    </div>


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

<script lang="ts">
import { defineComponent, ref, watchEffect, computed, reactive } from 'vue';
import ShowDialog from './ShowDialog.vue';
import FieldSelect from './FieldSelect.vue';
import AppSelectBox from './AppSelectBox.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: 'AppFieldSelectBox',
    components: {
        ShowDialog,
        FieldSelect,
        AppSelectBox,
    },
    props: {
        selectedField: {
            type: Object,
            required: true
        },
        selectType: {
            type: String,
            default: 'single'
        },
        fieldTypes:{
            type:Array,
            default:()=>[]
        }
    },
    setup(props, { emit }) {
        const showSelectApp = ref(false);
        const selField = reactive(props.selectedField);

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

        const updateSelectApp = (newAppinfo: IApp) => {
            selField.app = newAppinfo
        }

        const updateSelectFields = (newFields: IField[]) => {
            selField.fields = newFields
        }

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

        return {
            showSelectApp,
            isSelected,
            updateSelectApp,
            filter: ref(),
            updateSelectFields,
            fieldFilter: ref(),
            selField
        };
    }
});
</script>
