<template>
  <a-modal
    :width="1000"
    v-model:visible="visible"
    title="按钮配置"
    :maskClosable="false"
    destroyOnClose
    @cancel="handleClose"
    @ok="handleSubmit"
    :bodyStyle="{ minHeight: '400px' }"
  >
    <div class="h-full pt-4">
      <div :class="[prefixCls, 'pb-4']" :style="{ height: `calc(100% - 95px)` }">
        <a-table
          size="middle"
          :columns="buttonColumns"
          :pagination="false"
          :data-source="buttonConfigs"
          :scroll="{ y: `calc(100% - 56px) !important` }"
        >
          <template #headerCell="{ column }">
            <div class="header-cell__custom-title">{{ column.title }}</div>
          </template>
          <template #bodyCell="{ column, record, index }">
            <!---如果是checked一类的组件-->
            <template v-if="column.key === 'isUse'">
              <a-checkbox v-model:checked="record[column.dataIndex]" />
            </template>
            <template v-if="column.key === 'name'">
              <a-input
                :disabled="buttonConfigs[index].isDefault"
                v-model:value="record[column.dataIndex]"
              />
            </template>

            <template v-if="column.key === 'code'">
              <a-input
                :disabled="buttonConfigs[index].isDefault"
                v-model:value="record[column.dataIndex]"
              />
            </template>

            <template v-if="column.key === 'action'">
              <template v-if="!record.isDefault">
                <a-select
                  v-model:value="record.buttonType"
                  class="!mr-1.5"
                  size="small"
                  v-if="record.showType === 'top'"
                >
                  <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-select v-model:value="record.showType" class="!mr-1.5" size="small">
                  <a-select-option value="inline">行内</a-select-option>
                  <a-select-option value="top">顶部</a-select-option>
                </a-select>
                <ExecuteEvent v-model:processEvent="record.setting" classStyle="inline mr-1">
                  <SettingOutlined class="cursor-pointer" />
                </ExecuteEvent>
                <DeleteTwoTone two-tone-color="#ff8080" @click="buttonRemove(index)" />
              </template>
            </template>
          </template>
        </a-table>
      </div>
      <div class="mt-2 mx-10px pb-4">
        <a-button type="dashed" block @click="buttonAdd">
          <PlusOutlined />
          {{ t('新增') }}
        </a-button>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { PlusOutlined, DeleteTwoTone, SettingOutlined } from '@ant-design/icons-vue';

  import { ButtonConfig } from '/@/model/generator/listConfig';

  import { useMessage } from '/@/hooks/web/useMessage';

  import { useI18n } from '/@/hooks/web/useI18n';

  import ExecuteEvent from './ExecuteEvent.vue';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { cloneDeep } from 'lodash-es';

  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const props = defineProps({
    list: {
      type: Array<ButtonConfig>,
      default: () => [],
    },
    configDia: Boolean,
  });
  const emit = defineEmits(['update:configDia', 'update:list']);

  const { notification } = useMessage();
  const visible = ref(props.configDia);

  const buttonColumns = ref([
    {
      title: t('启用'),
      dataIndex: 'isUse',
      key: 'isUse',
      width: '80px',
      align: 'center',
    },
    {
      title: t('按钮名称'),
      dataIndex: 'name',
      key: 'name',
      width: '200px',
    },
    {
      title: t('按钮编码'),
      dataIndex: 'code',
      key: 'code',
      width: '200px',
    },

    {
      title: t('操作'),
      key: 'action',
      fixed: 'right',
      align: 'center',
    },
  ]);
  const buttonConfigs = ref<ButtonConfig[]>(cloneDeep(props.list) || []);

  onMounted(async () => {});

  const buttonAdd = () => {
    //给各个组件赋默认值
    const pushObj: ButtonConfig = {
      isUse: true,
      name: '',
      code: '',
      icon: '',
      isDefault: false,
      setting: [],
      showType: 'top',
      buttonType: 'primary',
    };
    buttonConfigs.value.push(pushObj);
  };

  const buttonRemove = (index) => {
    buttonConfigs.value.splice(index, 1);
  };

  //验证当前步骤的数据
  const validateStep = async (): Promise<boolean> => {
    //验证按钮配置
    for (let i = 0; i < buttonConfigs.value.length; i++) {
      if (!buttonConfigs.value[i].name) {
        notification.error({
          message: t('提示'),
          description: t(`按钮配置第{index}条，未填写按钮名！`, { index: i + 1 }),
        }); //提示消息
        return false;
      }

      if (!buttonConfigs.value[i].code) {
        notification.error({
          message: t('提示'),
          description: t(`按钮配置第{index}条，未填写按钮编码！`, { index: i + 1 }),
        }); //提示消息
        return false;
      }
    }
    return true;
  };

  const handleClose = () => {
    emit('update:configDia', false);
  };

  const handleSubmit = () => {
    let res = validateStep();
    if (!res) return;
    emit('update:list', buttonConfigs.value);
    emit('update:configDia', false);
  };
</script>
<style lang="less" scoped>
  .vben-basic-table .ant-table-wrapper {
    height: auto;
    max-height: 100%;
    overflow: auto;
  }

  :deep(.vben-basic-table .ant-table) {
    height: auto;
  }
</style>
