<template>
  <div>
    <BasicTable @register="headersTable" :searchInfo="searchInfo">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'refName'">
          <a-input
            v-model:value="record.refName"
            @change="record.refName = record.refName.toLowerCase()"
          />
          <p style="color: #ff0000; font-size: 12px" v-if="!regExp.test(record.refName)">
            使用小写字母、数字、下划线的组合
          </p>
        </template>
        <template v-if="column.key === 'initName'">
          <a-input v-model:value="record.initName" />
        </template>
        <template v-if="column.key === 'action' && record.name != 'Geometry'">
          <TableAction
            :actions="[
              {
                label: '删除',
                onClick: () => {
                  deleteRow(record);
                },
              },
            ]"
          />
        </template>
        <template v-if="column.key === 'action' && record.name == 'Geometry'">
          <TableAction
            :actions="[
              {
                label: '删除其他字段',
                onClick: () => {
                  deleteOtherRow(record);
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, h, onMounted } from 'vue';
  // vben
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  import { headersColumns, headersSearchFormSchema } from './clound.data';
  import axios from 'axios';
  import { cloneDeep } from 'lodash-es';
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_API_URL } = getAppEnvConfig();

  const { createMessage } = useMessage();

  const props = defineProps(['headers']);
  const headers = ref(props.headers);
  // 查询前的备份
  const searchBeforeHeaders = ref();
  const emit = defineEmits(['headersTableSubmit']);
  // 正则表达式
  let regExp = /^[a-z0-9_]+$/;

  // 步骤2
  const searchParams = ref();
  const [headersTable, { reload, getDataSource }] = useTable({
    dataSource: headers,
    columns: headersColumns,
    formConfig: {
      labelWidth: 120,
      schemas: headersSearchFormSchema,
    },
    canResize: true,
    useSearchForm: true,
    showTableSetting: false,
    pagination: true,
    bordered: true,
    showIndexColumn: true,
    handleSearchInfoFn(info) {
      if (info.name == undefined) {
        // 重置
        reset();
      } else {
        reset();
        // 搜索
        searchBeforeHeaders.value = cloneDeep(headers.value);
        searchParams.value = info;
        headers.value = headers.value.filter((item) => item.name.includes(info.name));
      }
      return info;
    },
  });

  // 重置
  function reset() {
    if (searchBeforeHeaders.value) {
      headers.value.forEach((item1) => {
        searchBeforeHeaders.value.forEach((item2) => {
          item2 = item1.name == item2.name ? item1 : item2;
        });
      });
      headers.value = cloneDeep(searchBeforeHeaders.value);
    }
    searchBeforeHeaders.value = null;
  }
  // 删除
  const deleteRow = (record) => {
    headers.value = headers.value.filter((item) => {
      return item.name != record.name;
    });
    if (searchBeforeHeaders.value) {
      searchBeforeHeaders.value = searchBeforeHeaders.value.filter((item) => {
        return item.name != record.name;
      });
    }
  };
  // 删除其他字段
  const deleteOtherRow = (record) => {
    headers.value = headers.value.filter((item) => {
      return item.name == record.name;
    });
    if (searchBeforeHeaders.value) {
      searchBeforeHeaders.value = searchBeforeHeaders.value.filter((item) => {
        return item.name == record.name;
      });
    }
  };
  // 提交
  const submit2 = () => {
    reset();
    let data = getDataSource();
    let flag = data.every((item) => {
      if (!regExp.test(item.refName)) {
        createMessage.warn('提交的refName字段名中有不符合字段名命名规则的');
        return false;
      }
      return true;
    });
    if (flag) {
      emit('headersTableSubmit', getDataSource());
    }
  };

  defineExpose({
    submit2,
  });
</script>
<style lang="less" scoped>
  ::v-deep .ant-table-container table {
    line-height: 1.1 !important;

    .ant-table-row {
      td {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
      }
    }
  }

  ::v-deep .ant-table-body {
    height: 410px !important;
  }
</style>
