<template>
 <div class="q-pa-md q-gutter-sm">
    <q-btn label="プロパティ" icon="keyboard_arrow_right" color="primary" @click="drawerRight = !drawerRight"  />
    <!-- <q-btn label="Readプロパティ" icon="keyboard_arrow_right" color="primary" @click="write('right')" /> -->
    <q-drawer
        side="right"
        v-model="drawerRight"
        show-if-above
        bordered
        :width="301"
        :breakpoint="500"
        class="bg-grey-3"
      >
       <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" v-if="drawerRight"/>
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="Save"  @click="save"/>
          <q-btn flat label="Cancel" @click="cancel" />
        </q-card-actions>
      </q-card>
  </q-drawer>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import ActionProperty from 'components/right/ActionProperty.vue';
      const drawerRight = ref(false);
      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 cancel = async() =>{
      drawerRight.value = false;
    }

    const save = async () =>{

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

    }
</script>
