<template>
  <div class="table-settings">
    <RedoSetting v-if="getSetting.redo" :getPopupContainer="getTableContainer" @redo="handleRedo" />
    <SizeSetting v-if="getSetting.size" :getPopupContainer="getTableContainer" />
    <ColumnSetting
      v-if="getSetting.setting"
      @columns-change="handleColumnChange"
      :getPopupContainer="getTableContainer"
    />
    <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
    <TreeSetting
      :showListPanel="showPanel"
      :leftTreeShow="leftTreeShow"
      v-if="listPageMode == LIST_MODE.HORIZONTAL && hasLeftTree"
      @tree-show-change="handleTreeChange"
    />
    <div
      class="fewer-panel-box"
      @click="changeShowPanel"
      v-if="listPageMode == LIST_MODE.HORIZONTAL"
    >
      <component :is="fewerPanelComponent" />
    </div>
  </div>
</template>
<script lang="ts">
  import type { PropType } from 'vue';
  import type { TableSetting, ColumnChangeParam } from '../../types/table';
  import { defineComponent, computed, unref, ref } from 'vue';
  import ColumnSetting from './ColumnSetting.vue';
  import SizeSetting from './SizeSetting.vue';
  import RedoSetting from './RedoSetting.vue';
  import FullScreenSetting from './FullScreenSetting.vue';
  import TreeSetting from './TreeSetting.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useTableContext } from '../../hooks/useTableContext';
  import FewerLeft from '/@/components/ModalPanel/src/FewerLeft.vue';
  import FewerRight from '/@/components/ModalPanel/src/FewerRight.vue';
  import { LIST_MODE } from '/@/enums/formViewEnum';
  export default defineComponent({
    name: 'TableSetting',
    components: {
      ColumnSetting,
      SizeSetting,
      RedoSetting,
      FullScreenSetting,
      TreeSetting,
    },
    props: {
      setting: {
        type: Object as PropType<TableSetting>,
        default: () => ({}),
      },
      listPageMode: {
        type: String,
      },
      hasLeftTree: {
        type: Boolean,
      },
      leftTreeShow: {
        type: Boolean,
      },
    },
    emits: ['columns-change', 'panelShowChange', 'treeShowChange', 'redo'],
    setup(props, { emit }) {
      const { t } = useI18n();
      const table = useTableContext();
      let showPanel = ref(false);

      let fewerPanelComponent = computed(() => {
        return showPanel.value ? FewerLeft : FewerRight;
      });
      function changeShowPanel() {
        showPanel.value = !showPanel.value;
        emit('panelShowChange', showPanel.value);
      }
      function handleTreeChange(val) {
        if (val) {
          showPanel.value = false;
          emit('panelShowChange', showPanel.value);
        }
        emit('treeShowChange', val);
      }
      const getSetting = computed((): TableSetting => {
        return {
          redo: true,
          size: true,
          setting: true,
          fullScreen: false,
          leftTree: props.listPageMode == LIST_MODE.HORIZONTAL && props.hasLeftTree,
          collapse: props.listPageMode == LIST_MODE.HORIZONTAL,
          ...props.setting,
        };
      });

      function handleColumnChange(
        data: ColumnChangeParam[],
        checkIndex: boolean,
        checkSelect: boolean,
      ) {
        emit('columns-change', data, checkIndex, checkSelect);
      }

      function getTableContainer() {
        return table ? unref(table.wrapRef) : document.body;
      }
      function handleRedo() {
        emit('redo');
      }
      return {
        getSetting,
        t,
        handleColumnChange,
        getTableContainer,
        fewerPanelComponent,
        changeShowPanel,
        LIST_MODE,
        handleTreeChange,
        showPanel,
        handleRedo,
      };
    },
  });
</script>
<style lang="less">
  .table-settings {
    display: flex;
    margin-left: 16px;

    & > * {
      margin-right: 16px;
    }

    svg {
      width: 1.3em;
      height: 1.3em;
    }

    .table-setting-icon {
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 30px;
      height: 30px;
      padding: 5px;
    }

    .fewer-panel-box {
      width: 30px;
      height: 30px;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #ddd;
      text-align: center;
      line-height: 20px;
      font-size: 30px;

      .img {
        font-size: 14px;
      }
    }
  }
</style>
