<template>
  <div @click="openDrawer(true)" v-show="!onlyShowAddForm">
    <IconFontSymbol icon="pifu1" fontSize="20" />
    <SettingDrawer @register="register" />
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, unref } from 'vue';
  import SettingDrawer from './SettingDrawer';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { useRouter } from 'vue-router';
  import { useDrawer } from '/@/components/Drawer';

  export default defineComponent({
    name: 'SettingButton',
    components: { SettingDrawer, IconFontSymbol },
    setup() {
      const [register, { openDrawer }] = useDrawer();
      const { currentRoute } = useRouter();

      const { query } = unref(currentRoute);

      const onlyShowAddForm = computed(() => {
        if (query.onlyShowAddForm) {
          return true;
        } else {
          return false;
        }
      });
      return {
        register,
        openDrawer,
        onlyShowAddForm,
      };
    },
  });
</script>
