<template>
  <div :class="boxClass">
    <vxe-toolbar ref="xToolbarRef" :custom="custom">
      <!-- 工具按钮 -->
      <template #buttons>
        <div :class="`${prefixCls}-button div`" :size="btnSize">
          <slot v-if="showPrefix" name="toolbarPrefix" :size="btnSize" />
          <a-button v-if="addBtnCfg.enabled && showAdd" type="primary" :preIcon="addBtnCfg.buttonIcon" :disabled="disabled" :loading="deleting" @click="trigger('add')">
            <span>{{ addBtnCfg.buttonName }}</span>
          </a-button>
          <a-button v-if="showSave" preIcon="ant-design:save-outlined" :disabled="disabled" @click="trigger('save')">
            <span>保存</span>
          </a-button>
          <template v-if="deleting || selectedRowIds.length > 0">
            <Popconfirm v-if="removeBtnCfg.enabled && showRemove" :title="`确定要删除这 ${selectedRowIds.length} 项吗?`" :disabled="deleting" @confirm="onRemove">
              <a-button :preIcon="removeBtnCfg.buttonIcon" :disabled="disabled" :loading="deleting">
                <span>{{ removeBtnCfg.buttonName }}</span>
              </a-button>
            </Popconfirm>
            <template v-if="showClearSelection">
              <a-button preIcon="ant-design:delete-outlined" @click="trigger('clearSelection')">清空选择</a-button>
            </template>
          </template>
          <slot v-if="showSuffix" name="toolbarSuffix" :size="btnSize" />
          <a v-if="showCollapse" style="margin-left: 4px" @click="toggleCollapse">
            <span>{{ collapsed ? '展开' : '收起' }}</span>
            <Icon :icon="collapsed ? 'ant-design:down-outlined' : 'ant-design:up-outlined'" />
          </a>
        </div>
      </template>
    </vxe-toolbar>
  </div>
</template>

<script lang="ts" setup>
  import { computed, inject, ref, onMounted } from 'vue';
  // noinspection ES6UnusedImports
  import { Popconfirm } from 'ant-design-vue';
  import { VxeToolbarInstance } from 'vxe-table';
  import { Icon } from '/@/components/Icon';
  import { propTypes } from '/@/utils/propTypes';

  const props = defineProps({
    size: propTypes.string,
    disabled: propTypes.bool.def(false),
    custom: propTypes.bool.def(false),
    toolbarConfig: propTypes.object,
    disabledRows: propTypes.object,
    hasBtnAuth: propTypes.func,
    selectedRowIds: propTypes.array.def(() => []),
    addBtnCfg: propTypes.object.def(() => ({
      enabled: true,
      buttonIcon: 'ant-design:plus-outlined',
      buttonName: '新增',
    })),
    removeBtnCfg: propTypes.object.def(() => ({
      enabled: true,
      buttonIcon: 'ant-design:minus-outlined',
      buttonName: '删除',
    })),
  });
  const emit = defineEmits(['save', 'add', 'remove', 'clearSelection', 'register']);
  const xToolbarRef = ref({} as VxeToolbarInstance);
  const prefixCls = `${inject('prefixCls')}-toolbar`;
  const boxClass = computed(() => [
    prefixCls,
    {
      [`${prefixCls}-collapsed`]: collapsed.value,
    },
  ]);
  // 是否收起
  const collapsed = ref(true);
  // 配置的按钮
  const btns = computed(() => {
    let { btn, btns } = props.toolbarConfig || {};
    btns = btn || btns || ['add', 'remove', 'clearSelection'];
    // 排除掉没有授权的按钮
    return btns.filter((btn) => {
      // 系统默认的批量删除编码配置为 batch_delete 此处需要兼容一下
      if (btn === 'remove') {
        //update-begin-author:taoyan date:2022-6-1 for: VUEN-1162 子表按钮没控制
        return hasBtnAuth(btn) && hasBtnAuth('batch_delete');
        //update-end-author:taoyan date:2022-6-1 for: VUEN-1162 子表按钮没控制
      }
      return hasBtnAuth(btn);
    });
  });
  const showAdd = computed(() => btns.value.includes('add'));
  const showSave = computed(() => btns.value.includes('save'));
  const showRemove = computed(() => btns.value.includes('remove'));
  // 配置的插槽
  const slots = computed(() => props.toolbarConfig?.slot || ['prefix', 'suffix']);
  const showPrefix = computed(() => slots.value.includes('prefix'));
  const showSuffix = computed(() => slots.value.includes('suffix'));
  // 是否显示清除选择按钮
  const showClearSelection = computed(() => {
    if (btns.value.includes('clearSelection')) {
      // 有禁用行时才显示清空选择按钮
      // 因为禁用行会阻止选择行，导致无法取消全选
      // return Object.keys(props.disabledRows).length > 0
    }
    return false;
  });
  // 是否显示展开收起按钮
  const showCollapse = computed(() => btns.value.includes('collapse'));
  // 按钮 size
  const btnSize = computed(() => (props.size === 'tiny' ? 'small' : null));

  onMounted(() => {
    // 注册 vxe-toolbar
    emit('register', {
      xToolbarRef,
    });
  });

  // 判断按钮是否已授权
  function hasBtnAuth(key: string) {
    return props.hasBtnAuth ? props.hasBtnAuth(key) : true;
  }

  /** 触发事件 */
  function trigger(name) {
    emit(name);
  }

  // 切换展开收起
  function toggleCollapse() {
    collapsed.value = !collapsed.value;
  }

  // 【TV360X-1975】在Online设计中，当字段多时，由于会同步删除其他表格导致删除时间变长，所以增加删除loading，防止以为点击删除按钮无效
  const deleting = ref(false);

  let deleteTimer: any = null

  function onRemove() {
    trigger('remove')
    deleting.value = true;
    if (deleteTimer) {
      clearTimeout(deleteTimer)
    }
    deleteTimer = setTimeout(() => deleting.value = false, 300);
  }

</script>
