<template>
  <Tooltip placement="top">
    <template #title>
      <span>{{ t('分类') }}</span>
    </template>
    <IconFontSymbol
      icon="hb-shujiegou"
      fontSize="16"
      fillColor="#C3C8CF"
      @click="handleClick"
      class="table-setting-icon"
    />
  </Tooltip>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';

  export default defineComponent({
    name: 'TreeSetting',
    components: {
      Tooltip,
      IconFontSymbol,
    },
    props: {
      showListPanel: Boolean,
      leftTreeShow: {
        type: Boolean,
      },
    },
    emits: ['treeShowChange'],
    setup(props, { emit }) {
      const { t } = useI18n();
      let showPanel = ref(false);
      watch(
        () => props.showListPanel,
        async (val) => {
          if (val) {
            showPanel.value = false;
            emit('treeShowChange', showPanel.value);
          }
        },
      );
      watch(
        () => props.leftTreeShow,
        (val) => {
          showPanel.value = val;
        },
      );
      function handleClick() {
        showPanel.value = !showPanel.value;
        emit('treeShowChange', showPanel.value);
      }

      return { handleClick, t };
    },
  });
</script>
