<template>
  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" min-width="50vw" min-height="60vh">
    <template v-slot:toolbar>
      <q-btn flat round dense icon="more_vert" >
      <q-menu  auto-close anchor="bottom start">
        <q-list>
          <q-item clickable @click="copyCondition()">
            <q-item-section avatar><q-icon name="content_copy" ></q-icon></q-item-section>
            <q-item-section >コピー</q-item-section>
          </q-item>
          <q-item clickable @click="pasteCondition()">
            <q-item-section avatar><q-icon name="content_paste" ></q-icon></q-item-section>
            <q-item-section >貼り付け</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
      </q-btn>
    </template>
    <NodeCondition v-model:conditionTree="tree"></NodeCondition>
  </show-dialog>
</template>
<script lang="ts">
import { defineComponent, ref ,watchEffect} from 'vue';
import ShowDialog from '../../components/ShowDialog.vue';
import NodeCondition  from './NodeCondition.vue';
import { ConditionTree } from '../../types/Conditions';
import { useQuasar } from 'quasar';
  export default defineComponent({
    name: 'ConditionObject',
    components: {
      ShowDialog,
      NodeCondition,
    },
    props: {
      conditionTree: {
        type: ConditionTree,
        default: null
      },
      show:{
        type:Boolean,
        default:false
      }
    },
    emits:[
      'closed',
      'update:conditionTree',
      'update:show'
    ],
    setup(props,context) {
      const appDg = ref();
      const $q=useQuasar();
      const tree = ref(props.conditionTree);
      const closeDg = (val:string) => {
        if (val == 'OK') {
        //   if(tree.value.root.children.length===0){
        //     $q.notify({
        //       type: 'negative',
        //       message: `条件式を設定してください。`
        //     });
        //  }
          context.emit('update:conditionTree',tree.value);
        }
        showflg.value=false;
        context.emit('update:show',false);
        context.emit('closed',val);
      };
      const showflg =ref(props.show);
      //条件式をコピーする
      const copyCondition=()=>{
        if (navigator.clipboard) {
          const jsonData=tree.value.toJson();
          navigator.clipboard.writeText(jsonData).then(() => {
              console.log('Text successfully copied to clipboard');
          },
          (err) => {
            console.error('Error in copying text: ', err);
          });
        } else {
          console.log('Clipboard API not available');
        }
      };
      //条件式を貼り付ける
      const pasteCondition=async ()=>{
        try {
          const text = await navigator.clipboard.readText();
          console.log('Text from clipboard:', text);
          tree.value.fromJson(text);
        } catch (err) {
          console.error('Failed to read text from clipboard: ', err);
          throw err;
        }
      }
      watchEffect(() => {
        showflg.value=props.show;
      });

      return {
        tree,
        appDg,
        closeDg,
        showflg,
        copyCondition,
        pasteCondition
      };
    }
  });
</script>
