<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">
        <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" />
    </show-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
import ShowDialog from '../ShowDialog.vue';
import { useFlowEditorStore } from 'stores/flowEditor';

export interface IApp {
    id: string,
    name: string
}
export interface IField {
    name: string,
    code: string,
    type: string
}

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

export default defineComponent({
    inheritAttrs: false,
    name: 'AppFieldSelect',
    components: {
        ShowDialog,
        AppFieldSelectBox
    },
    props: {
        displayName: {
            type: String,
            default: '',
        },
        name: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '',
        },
        modelValue: {
            type: Object,
            default: null
        },
        selectType: {
            type: String,
            default: 'single'
        }
    },
    setup(props, { emit }) {
        const show = 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 clear = () => {
            selectedField.value = {
                fields: []
            };
        }

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

        return {
            store,
            show,
            showDg: () => { show.value = true },
            selectedField,
            clear,
            removeField,
        };
    }
});
</script>
