<template>
  <div class="regular-box">
    <div class="top-box">
      <div>正则校验列表</div>
      <PlusCircleFilled class="add-btn" @click="addRegular" />
    </div>
    <a-form
      layout="vertical"
      v-for="(item, index) in data.options?.rules"
      :key="index"
      class="reg-item"
      @mouseenter="showDeleteIndex = index"
      @mouseleave="showDeleteIndex = -1"
    >
      <a-form-item :label="t('正则表达式')">
        <a-textarea v-model:value="item.pattern" :placeholder="t('请输入正则表达式')" />
        <a-select
          v-model:value="item.pattern"
          style="width: 100%; margin-top: 10px"
          :placeholder="t('请选择赋值类型')"
          :options="state.bindTypeList"
          allowClear
          :field-names="{ label: 'name', value: 'regularContent', options: 'children' }"
        />
      </a-form-item>
      <a-form-item :label="t('错误提示')">
        <a-textarea :placeholder="t('请输入错误提示')" v-model:value="item.message" size="small" />
      </a-form-item>
      <div class="delete-btn" v-show="index === showDeleteIndex">
        <MinusCircleFilled @click.stop="deleteRegList(index)" />
      </div>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref, onMounted, reactive } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PlusCircleFilled, MinusCircleFilled } from '@ant-design/icons-vue';
  import { getRegularListAll } from '/@/api/system/regular';

  const { t } = useI18n();
  const props = defineProps({
    select: { type: Object },
  });
  const emit = defineEmits(['update:select']);
  const data = ref<any>();
  const showDeleteIndex = ref<number>(-1);
  const state = reactive({
    bindTypeList: [] as Array<{ name: string; regularContent: string }>,
  });
  watch(
    () => props.select,
    (val) => {
      data.value = val;
    },
    {
      immediate: true,
      deep: true,
    },
  );
  watch(
    data,
    (val) => {
      emit('update:select', val);
    },
    {
      deep: true,
    },
  );
  const addRegular = () => {
    data.value.options.rules.push({
      pattern: '',
      message: '',
    });
    data.value.options.required = true;
  };
  const deleteRegList = (index) => {
    data.value.options.rules.splice(index, 1);
  };
  //
  onMounted(async () => {
    try {
      let res = await getRegularListAll();
      state.bindTypeList = res;
    } catch (error) {}
  });
</script>

<style lang="less" scoped>
  .regular-box {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    padding: 8px 10px;
    border-radius: 4px;

    .top-box {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 5px;

      .add-btn {
        position: absolute;
        right: 0;
        color: @primary-color;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .reg-item {
      position: relative;

      .delete-btn {
        position: absolute;
        top: 0;
        right: 0;
        color: #ff5461;
        cursor: pointer;
        font-size: 16px;
      }

      :deep(.ant-form-item) {
        margin-bottom: 10px;

        .ant-form-item-label {
          padding-bottom: 10px;
        }
      }

      :deep(.ant-form-item:last-child) {
        margin-bottom: 0;
      }
    }
  }
</style>
