<template>
  <div class="box-top">
    <NodeHead nodeName="按钮列表" />
    <PlusCircleFilled class="add-icon" @click="addComponent" />
  </div>
  <div style="height: calc(100% - 38px); overflow: auto">
    <a-form
      v-for="(item, index) in hiddenComponent"
      :key="item.key"
      :labelCol="{ span: 8 }"
      :wrapperCol="{ span: 16 }"
      labelAlign="left"
      :colon="false"
      style="margin: 20px 10px 0; position: relative"
      @mouseenter="showDeleteIndex = index"
      @mouseleave="showDeleteIndex = -1"
    >
      <a-form-item :label="t('按钮编码')" required>
        <a-input
          v-model:value="item.code"
          :disabled="['confirm', 'cancel', 'reset'].includes(item.code)"
          :placeholder="t('请输入按钮编码')"
        />
      </a-form-item>
      <a-form-item :label="t('按钮名称')" required>
        <a-input v-model:value="item.name" :placeholder="t('请输入按钮名称')" />
      </a-form-item>
      <a-form-item :label="t('按钮样式')">
        <a-select v-model:value="item.style" :placeholder="t('请选择按钮样式')">
          <a-select-option value="primary">主按钮</a-select-option>
          <a-select-option value="default">默认按钮</a-select-option>
          <a-select-option value="danger">危险按钮</a-select-option>
          <a-select-option value="link">链接按钮</a-select-option>
          <a-select-option value="text">文本按钮</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="按钮类型"
        :name="['sights', index, 'label']"
        :labelCol="{ span: 8 }"
        :wrapperCol="{ span: 16 }"
        labelAlign="left"
        :colon="false"
      >
        <a-select
          @change="
            () => {
              item.event = [];
              if (item.type == CustomButtonModalType.Modal) {
                item.event.push({
                  operateType: 2,
                  operateConfig: { js: `formActionType.openModal(curRowData)` },
                });
              }
            }
          "
          v-model:value="item.type"
          style="width: 100%"
        >
          <a-select-option :value="CustomButtonModalType.COMMON">普通按钮</a-select-option>
          <a-select-option :value="CustomButtonModalType.Modal">弹窗按钮</a-select-option>
        </a-select>
      </a-form-item>
      <template v-if="item.type == CustomButtonModalType.Modal">
        <a-form-item
          :name="['sights', index, 'modal']"
          label="按钮弹窗配置"
          :labelCol="{ span: 8 }"
          :wrapperCol="{ span: 16 }"
          labelAlign="left"
          :colon="false"
        >
          <ButtonModalConfig v-model:modalData="item.modal" :formJson="[]">
            <a-input
              :value="item.modal?.bindModal ? t('已配置') : t('点击进行配置')"
              :placeholder="t('点击进行配置')"
            >
              <template #suffix>
                <Icon icon="ant-design:ellipsis-outlined" />
              </template>
            </a-input>
          </ButtonModalConfig>
        </a-form-item>
      </template>
      <a-form-item :label="t('按钮事件配置')" v-else>
        <ExecuteEvent
          v-model:processEvent="item.event"
          :disabled="['confirm', 'cancel', 'reset'].includes(item.code)"
          classStyle="inline mr-1"
        >
          <a-input
            :value="item.event.length > 0 ? t('已配置') : t('点击进行配置')"
            :placeholder="t('点击进行配置')"
            :disabled="['confirm', 'cancel', 'reset'].includes(item.code)"
          >
            <template #suffix>
              <Icon icon="ant-design:ellipsis-outlined" />
            </template>
          </a-input>
        </ExecuteEvent>
      </a-form-item>
      <a-form-item :label="t('是否显示')">
        <a-switch v-model:checked="item.isShow" />
      </a-form-item>
      <a-form-item :label="t('显示顺序')">
        <a-input-number v-model:value="item.index" style="width: 100%" />
      </a-form-item>
      <div
        class="icon-delete"
        v-show="index === showDeleteIndex && !['confirm', 'cancel', 'reset'].includes(item.code)"
      >
        <MinusCircleFilled @click.stop="deleteHiddenComponent(index)" />
      </div>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { buttonListInfo } from '../types';
  import ExecuteEvent from '/@/components/CreateCodeStep/src/components/ExecuteEvent.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { PlusCircleFilled, MinusCircleFilled } from '@ant-design/icons-vue';
  import { Icon } from '/@/components/Icon';
  import ButtonModalConfig from '/@/components/CreateCodeStep/src/components/ButtonModalConfig.vue';

  import { CustomButtonModalType } from '/@/enums/userEnum';
  const { t } = useI18n();
  const props = defineProps({
    component: {
      type: Array as PropType<buttonListInfo[]>,
      default: () => {
        return [];
      },
    },
  });
  const defaultBtn = [
    {
      key: 'confirm',
      code: 'confirm',
      name: '确定',
      style: 'primary',
      event: [],
      isShow: true,
      index: 2,
      type: CustomButtonModalType.COMMON,
      modal: null,
    },
    {
      key: 'cancel',
      code: 'cancel',
      name: '取消',
      style: 'default',
      event: [],
      isShow: true,
      index: 1,
      type: CustomButtonModalType.COMMON,
      modal: null,
    },
    {
      key: 'reset',
      code: 'reset',
      name: '重置',
      style: 'default',
      event: [],
      isShow: true,
      index: 0,
      type: CustomButtonModalType.COMMON,
      modal: null,
    },
  ];
  const hiddenComponent = ref<buttonListInfo[]>(props.component || []);
  const emit = defineEmits(['update:component']);
  const showDeleteIndex = ref<number>(-1);
  onMounted(() => {
    defaultBtn.forEach((o) => {
      let obj = hiddenComponent.value.find((k) => k.key == o.key);
      if (!obj) {
        hiddenComponent.value.push(o);
      }
    });
    emit('update:component', hiddenComponent.value);
  });
  watch(
    () => hiddenComponent.value,
    () => {
      emit('update:component', hiddenComponent.value);
    },
    { deep: true },
  );
  const addComponent = () => {
    const key = `button${Date.now()}`;
    const com: buttonListInfo = {
      key,
      code: '',
      name: '',
      style: '',
      event: [],
      isShow: true,
      type: CustomButtonModalType.COMMON,
      modal: null,
      index: hiddenComponent.value.length,
    };

    hiddenComponent.value.unshift(com);
  };

  const deleteHiddenComponent = (index: number) => {
    hiddenComponent.value.splice(index, 1);
  };
</script>

<style lang="less" scoped>
  .box-top {
    display: flex;
    justify-content: space-between;
    margin: 5px 10px 10px;
    align-items: center;

    .add-icon {
      color: @primary-color;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .icon-delete {
    position: absolute;
    top: -12px;
    right: 0;
    text-align: center;
    color: #ff5461;
    cursor: pointer;
    font-size: 16px;
  }

  :deep(.ant-form-item) {
    margin-bottom: 10px !important;
  }
</style>
