<template>
  <div v-bind="$attrs">
    <q-field :label="displayName" labelColor="primary" stack-label lazy-rules="ondemand" 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="data.dropDownApp?.name">
              {{ `${data.sourceApp?.name} -> ${data.dropDownApp?.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="20vh" disableBtn>
    <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="copySetting()">
            <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="pasteSetting()">
            <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>
    <div class="q-mb-md q-ml-md q-mr-md">
      <CascadingDropDownBox v-model:model-value="data" :finishDialogHandler="finishDialogHandler" />
    </div>
  </ShowDialog>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';
import ShowDialog from '../ShowDialog.vue';
import CascadingDropDownBox from '../CascadingDropDownBox.vue';

export default defineComponent({
  inheritAttrs: false,
  name: 'CascadingDropDown',
  components: {
    ShowDialog,
    CascadingDropDownBox
  },
  props: {
    displayName: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    modelValue: {
      type: Object,
      default: () => { ({}) }
    },
  },
  setup(props, { emit }) {
    const dgIsShow = ref(false);
    // const data = ref(props.modelValue);
    const data = ref({
      sourceApp: props.modelValue.sourceApp ?? { appFilter: '', showSelectApp: false },
      dropDownApp: props.modelValue.dropDownApp,
      fieldList: props.modelValue.fieldList ?? [],
    });
    const closeDg = (state: string) => {
      dgIsShow.value = false;
    };

    const finishDialogHandler = (boxData) => {
      data.value = boxData
      dgIsShow.value = false
      emit('update:modelValue', data.value);
    }

     //設定をコピーする
     const copySetting=()=>{
        if (navigator.clipboard) {
          const jsonData= JSON.stringify(data.value);
          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 pasteSetting=async ()=>{
        try {
          const text = await navigator.clipboard.readText();
          console.log('Text from clipboard:', text);
          const jsonData=JSON.parse(text);
          if('sourceApp' in jsonData && 'dropDownApp' in jsonData && 'fieldList' in jsonData){
            const {sourceApp,dropDownApp, fieldList}=jsonData;
            data.value.sourceApp=sourceApp;
            data.value.dropDownApp=dropDownApp;
            data.value.fieldList=fieldList;
          }
        } catch (err) {
          console.error('Failed to read text from clipboard: ', err);
          throw err;
        }
      }

    // watchEffect(() => {
    //   emit('update:modelValue', data.value);
    // });

    return {
      dgIsShow,
      closeDg,
      data,
      finishDialogHandler,
      copySetting,
      pasteSetting
    };
  }
});
</script>
