<template>
  <div class="h-15 w-full flex items-center justify-end bg-white p-10px rounded-2xl">
    <template v-if="formButtons && formButtons.length > 0">
      <template v-for="(item, index) in formButtons" :key="item.code">
        <CustomButtonModal v-if="item.type == CustomButtonModalType.Modal" :info="item" />
        <a-button
          v-else
          :type="item.style"
          :style="{ marginLeft: index > 0 ? '10px' : 0 }"
          @click="customClick(item)"
        >
          <template #icon v-if="item.icon">
            <Icon :icon="item.icon" />
          </template>
          {{ item.name }}
        </a-button>
      </template>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { inject, ref } from 'vue';
  import { executePageButtonEvent } from '/@/utils/event/data';
  import Icon from '/@/components/Icon/index';
  import { CustomButtonModalType } from '/@/enums/userEnum';
  import CustomButtonModal from '/@/components/Form/src/components/CustomButtonModal.vue';
  const props = defineProps({
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  const widgetFormModel = inject('widgetFormModel', ref<any>({}));
  const formButtons = ref<any>(props.list || []);
  function customClick(item) {
    const event = new Function(item.clickEvent);
    event();
    executePageButtonEvent(item.event, widgetFormModel.value);
  }
</script>
<style lang="less" scoped></style>
