<!--
 * @Description: 工具栏
-->
<template>
  <div class="operating-area">
    <!-- 头部操作按钮区域 start -->
    <!-- 操作左侧区域 start -->
    <div class="left-btn-box" style="text-indent: 20px">
      <Tooltip v-for="item in toolbarsConfigs" :title="item.title" :key="item.icon">
        <a-button @click="$emit(item.event)" id="button">
          <template #icon>
            <Icon :icon="item.icon" :style="{ fontSize: '16px' }" />
          </template>
        </a-button>
      </Tooltip>
      <Tooltip title="撤销">
        <a-button :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo" id="button">
          <template #icon>
            <Icon icon="ant-design:undo-outlined" :style="{ fontSize: '16px' }" />
          </template>
        </a-button>
      </Tooltip>
      <Tooltip title="重做">
        <a-button :class="{ disabled: !canRedo }" @click="redo" id="button">
          <template #icon>
            <Icon icon="ant-design:redo-outlined" :style="{ fontSize: '16px' }" />
          </template>
        </a-button>
      </Tooltip>
    </div>
  </div>
  <!-- 操作区域 start -->
</template>
<script lang="ts">
  import { defineComponent, inject, reactive, toRefs } from 'vue';
  import { UseRefHistoryReturn } from '@vueuse/core';
  import { IFormConfig } from '../../../typings/v-form-component';
  import { Tooltip } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';

  interface IToolbarsConfig {
    type: string;
    title: string;
    icon: string;
    event: string;
  }

  export default defineComponent({
    name: 'OperatingArea',
    components: {
      Tooltip,
      Icon,
    },
    setup() {
      const state = reactive<{
        toolbarsConfigs: IToolbarsConfig[];
      }>({
        toolbarsConfigs: [
          {
            title: '预览-支持布局',
            type: 'preview',
            event: 'handlePreview',
            icon: 'bi:life-preserver',
          },
          // {
          //   title: '预览-不支持布局',
          //   type: 'preview',
          //   event: 'handlePreview2',
          //   icon: 'ant-design:chrome-filled',
          // },
          {
            title: '导入JSON',
            type: 'importJson',
            event: 'handleOpenImportJsonModal',
            icon: 'ant-design:import-outlined',
          },
          {
            title: '生成JSON',
            type: 'exportJson',
            event: 'handleOpenJsonModal',
            icon: 'ant-design:export-outlined',
          },
          {
            title: '生成代码',
            type: 'exportCode',
            event: 'handleOpenCodeModal',
            icon: 'bi:code-slash',
          },
          {
            title: '清空',
            type: 'reset',
            event: 'handleClearFormItems',
            icon: 'ant-design:clear-outlined',
          },
        ],
      });
      const historyRef = inject('historyReturn') as UseRefHistoryReturn<IFormConfig, IFormConfig>;

      const { undo, redo, canUndo, canRedo } = historyRef;
      return { ...toRefs(state), undo, redo, canUndo, canRedo };
    },
  });
</script>

<style lang="less" scoped>
  //noinspection CssUnknownTarget
  @import url('../styles/variable.less');

  .operating-area {
    display: flex;
    place-content: center space-between;
    height: @operating-area-height;
    padding: 0 12px;
    padding-left: 30px;
    border-bottom: 2px solid @border-color;
    font-size: 16px;
    line-height: @operating-area-height;
    text-align: left;

    #button {
      margin: 0 5px;
      width: 32px;
      height: 32px;

      &.disabled,
      &.disabled:hover {
        color: #ccc;
      }

      &:hover {
        color: @primary-color;
      }

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