<template>
    <div v-bind="$attrs">
        <q-field :label="displayName" labelColor="primary" stack-label
        :rules="rulesExp"
        lazy-rules="ondemand"
        v-model="selectedApp"
        ref="fieldRef">
            <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="selectedApp.app.name">
                            {{ selectedApp.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: {
        displayName: {
            type: String,
            default: '',
        },
        name: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '',
        },
        modelValue: {
            type: Object,
            default: null
        },
        //例：[val=>!!val ||'入力してください']
        rules: {
          type: String,
          default: undefined
        },
        required: {
          type: Boolean,
          default: false
        },
        requiredMessage: {
          type: String,
          default: ''
        }
    },
    setup(props, { emit }) {
        const appDg = ref();
        const fieldRef=ref();
        const dgIsShow = ref(false)
        const selectedApp = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
        const closeDg = (state: string) => {
            dgIsShow.value = false;
            if (state == 'OK') {
                selectedApp.app = appDg.value.selected[0];
                fieldRef.value.validate();
            }
        };
        //ルール設定
        const customExp = props.rules === undefined ? [] : eval(props.rules);
        const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を選択してください。`;
        const requiredExp = props.required ? [((val: any) => (!!val && !!val.app && !!val.app.name) || errmsg)] : [];
        const rulesExp = [...requiredExp, ...customExp];
        watchEffect(() => {
            emit('update:modelValue', selectedApp);
        });

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