<template>
  <div class="step1-box">
    <a-modal
      :width="900"
      v-model:visible="state.configDia"
      :title="t('静态数据配置')"
      :maskClosable="false"
      :bodyStyle="state.modalBodyStyle"
      destroyOnClose
      @ok="handleConfirm"
      @cancel="handleClose"
    >
      <div class="step1">
        <div class="flex justify-end mb-3">
          <a-button type="primary" @click="addInParams">添加数据</a-button>
        </div>
        <a-table :columns="intableColumns" :data-source="intableData" :pagination="false">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'label'">
              <a-input v-model:value="record.label" :placeholder="t('请填写显示值')" />
            </template>
            <template v-else-if="column.dataIndex === 'value'">
              <a-input v-model:value="record.value" :placeholder="t('请填写保存值')" />
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button danger type="link" @click="deleteInData(index)">删除</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';

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

  import { notification } from 'ant-design-vue';
  import { cloneDeep } from 'lodash-es';

  const { t } = useI18n();
  const props = defineProps({
    configDialog: { type: Boolean },
    config: { type: Object },
  });
  const state = reactive({
    configDia: props.configDialog as boolean,
    modalBodyStyle: {
      padding: '15px 15px 10px 10px',
      minHeight: '400px',
    },
  });
  const intableData = ref<any>(cloneDeep(props.config) || []);

  const intableColumns = [
    {
      title: t('显示值'),
      dataIndex: 'label',
      align: 'center',
    },
    {
      title: t('保存值'),
      dataIndex: 'value',
      align: 'center',
      width: 200,
    },
    {
      title: t('操作'),
      dataIndex: 'action',
      align: 'center',
    },
  ];

  const emit = defineEmits(['update:configDialog', 'update:config']);
  //验证当前步骤的数据
  const validateStep = async (): Promise<boolean> => {
    const inarray = findDuplicates(intableData.value);

    if (inarray.length > 0) {
      let msg = t(`${inarray.length > 0 ? '保存值' + inarray.join(',') + '重复;' : ''} `);
      notification.warning({
        message: t('提示'),
        description: msg,
      });
      return false;
    }
    return true;
  };
  function findDuplicates(arr) {
    let seen = new Set();
    let duplicates: string[] = [];

    arr.forEach((item) => {
      if (seen.has(item.value)) {
        duplicates.push(item.value);
      } else {
        seen.add(item.value);
      }
    });

    return duplicates;
  }

  function addInParams() {
    intableData.value.push({
      label: 'Option ' + intableData.value.length,
      value: 'Option ' + intableData.value.length,
    });
  }
  function deleteInData(idx) {
    intableData.value.splice(idx, 1);
  }
  const handleClose = () => {
    state.configDia = false;
    emit('update:configDialog', false);
  };
  const handleConfirm = async () => {
    let res = await validateStep();
    if (res) {
      emit('update:config', intableData.value);
      handleClose();
    }
  };
</script>
<style lang="less" scoped>
  :deep(.ant-input-affix-wrapper) {
    height: auto;
  }
</style>
