<template>
 <div class="q-pa-md q-gutter-sm">
    <q-btn label="プロパティ" icon="keyboard_arrow_right" color="primary" @click="open('right')" />
    <!-- <q-btn label="Readプロパティ" icon="keyboard_arrow_right" color="primary" @click="write('right')" /> -->

    <q-dialog v-model="dialog" :position="position">
      <q-card class="column full-height" style="width: 300px">
        <q-card-section>
          <div class="text-h6">プロパティ</div>
        </q-card-section>

        <q-card-section class="col q-pt-none">
          <ActionProperty :jsonData="jsonData" :jsonValue="jsonValue"/>
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="Save" v-close-popup  @click="save"/>
          <q-btn flat label="Cancel" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue'
import ActionProperty from 'components/right/ActionProperty.vue';
    const dialog = ref(false)
    const position = ref('top')

    const jsonData = {
        elements: [
          {
            component: 'InputText',
            props: {
              name:'1',
              placeholder: 'Enter some text',
              modelValue: '',
            },
          },
          {
            component: 'SelectBox',
            props: {
              name:'2',
              placeholder: 'Choose an option',
              modelValue: '',
              options: [
                'option1',
                'option2',
                'option3'
              ],
            },
          },
          {
            component: 'DatePicker',
            props: {
              name:'3',
              placeholder: 'Choose a date',
              modelValue: '',
            },
          },
          {
            component: 'FieldInput',
            props: {
              name:'4',
              placeholder: 'Choose a field',
              modelValue: '',
            },
          },
        ]
      };

      let jsonValue = {
        1:'abc',
        2:'option2',
        3:'2023/09/04',
        4:'6666'
      };

    const open =  (pos:string) => {
      position.value = pos
      dialog.value = true
    };

    const save = async () =>{

      jsonData.elements.forEach(property => {
        if(jsonValue != undefined)
        {
          jsonValue[property.props.name] = property.props.modelValue;
        }
      });
      console.log(jsonValue);

    }
</script>
