<template>
  <div class="q-pa-md q-gutter-sm">
    <q-drawer
         side="right"
         :show-if-above="false"
         bordered
         :width="301"
         :breakpoint="500"
         class="bg-grey-3"
         :model-value="showPanel"
         elevated
         overlay
       >
       <q-form  @submit="save" autocomplete="off" class="full-height">
        <q-card class="column" style="max-width: 300px;min-height: 100%">
         <q-card-section>
           <div class="text-h6">{{ actionNode?.subTitle }}：設定</div>
         </q-card-section>
         <q-card-section class="col q-pt-none">
           <property-list :node-props="actionProps" v-if="showPanel" ></property-list>
         </q-card-section>

         <q-card-actions align="right" class="bg-white text-teal">
            <q-btn flat label="キャンセル" @click="cancel"  outline dense padding="none sm" color="primary"/>
            <q-btn flat label="更新" type="submit" outline dense padding="none sm" color="primary" />
         </q-card-actions>
       </q-card>
      </q-form>
   </q-drawer>
   </div>
 </template>
 <script lang="ts">
import {  ref,defineComponent, PropType ,watchEffect} from 'vue'
import PropertyList from 'components/right/PropertyList.vue';
import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
 export default defineComponent({
  name: 'PropertyPanel',
  components: {
    PropertyList
  },
  props: {
    actionNode:{
      type:Object as PropType<IActionNode>
    },
    drawerRight:{
      type:Boolean,
      required:true
    }
  },
  emits: [
    'update:drawerRight',
    'saveActionProps'
  ],
  setup(props,{emit}) {
     const showPanel =ref(props.drawerRight);

    const cloneProps = (actionProps:IActionProperty[]|undefined):IActionProperty[]|null=>{
        if(!actionProps){
          return null;
        }
        const json=JSON.stringify(actionProps);
        return JSON.parse(json);
    }

    const actionProps =ref(cloneProps(props.actionNode?.actionProps));

    watchEffect(() => {
      if(showPanel.value!==undefined){
        showPanel.value = props.drawerRight;
      }
      showPanel.value = props.drawerRight;
      actionProps.value= cloneProps(props.actionNode?.actionProps);
    });

    const cancel = async() =>{
      showPanel.value = false;
      emit('update:drawerRight',false )
    }

    const save = async () =>{
      showPanel.value=false;
      emit('saveActionProps', actionProps.value);
      emit('update:drawerRight',false );
    }

    return {
      cancel,
      save,
      actionProps,
      showPanel
    }
  }
});
 </script>
 <style lang="scss">
</style>
