<template>
  <div class="ah-container">
    <div class="btn-bar">
      <slot></slot>
      <div class="flex">
        <a-button
          v-if="$attrs.saveFormTemplate"
          type="primary"
          @click="$emit('saveFormTemplate')"
          ghost
        >
          {{ t('保存表单模板') }}
        </a-button>
        <a-button v-if="$attrs.uploadJson" type="primary" @click="$emit('uploadJson')" ghost>
          <template #icon>
            <div class="btn-icon">
              <IconFontSymbol icon="daoru" fontSize="16" fillColor="#1C8DFF" />
            </div>
          </template>
          {{ t('导入JSON') }}
        </a-button>
        <a-button v-if="$attrs.generateJson" type="primary" @click="$emit('generateJson')" ghost>
          <template #icon>
            <div class="btn-icon">
              <IconFontSymbol icon="shengchengqianbao" fontSize="16" fillColor="#1C8DFF" />
            </div>
          </template>
          {{ t('生成JSON') }}
        </a-button>
        <a-button v-if="$attrs.clearable" type="primary" @click="$emit('clearable')" danger ghost>
          <template #icon>
            <div class="btn-icon">
              <IconFontSymbol icon="shanchu" fontSize="16" fillColor="#FF5461" />
            </div>
          </template>
          {{ t('清空') }}
        </a-button>
        <a-button v-if="$attrs.preview" type="primary" @click="$emit('preview')" ghost>
          <template #icon>
            <div class="btn-icon">
              <IconFontSymbol icon="yulan" fontSize="16" fillColor="#1C8DFF" />
            </div>
          </template>
          {{ t('预览') }}
        </a-button>
        <a-button v-if="$attrs.generateCode" type="primary" @click="$emit('generateCode')" ghost>
          <template #icon>
            <div class="btn-icon">
              <IconFontSymbol icon="shengchengqianbao" fontSize="16" fillColor="#1C8DFF" />
            </div>
          </template>
          {{ t('生成代码') }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();

  defineEmits([
    'uploadJson',
    'clearable',
    'preview',
    'generateJson',
    'generateCode',
    'saveFormTemplate',
  ]);
</script>
<style scoped lang="less">
  .ah-container {
    padding: 0 10px;
    border-bottom: 1px solid #f0f2f5;
  }

  .btn-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    line-height: 0;
    padding: 0;
    background-color: #fff;
    text-align: right;

    :deep(.ant-btn) {
      display: inline-flex;
      align-items: center;
      margin-right: 16px;
      border-radius: 4px;
      padding: 0 10px;
    }

    .btn-icon {
      display: inline-block;
    }
  }

  :deep(.ant-btn) > span {
    margin-left: 5px;
  }
  // @import '/@/assets/style/designer/index.css';
</style>
