<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './config';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { applicationRecordPage } from '/@/api/application/record';
  import { useDrawer } from '/@/components/Drawer';
  import RecordDetailDrawer from './components/RecordDetailDrawer.vue';
  import { ref, nextTick, onUnmounted } from 'vue';

  const { t } = useI18n();

  const getPathUrl = ref('');

  const getPathUrlName = ref('');

  const onCloseVal = ref(0);

  const [registerTable, { reload, getForm, setTableData, setPagination }] = useTable({
    api: applicationRecordPage,
    immediate: false,
    columns,
    showIndexColumn: false,
    clickToRowSelect: false,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      fieldMapToTime: [['callTime', ['startTime', 'endTime'], 'x']],
      baseColProps: { span: 8 },
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    rowKey: 'id',
    actionColumn: {
      width: 200,
      title: t('common.actionText'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const [registerDrawer, { openDrawer }] = useDrawer();

  const handleSuccess = () => {
    reload();
  };

  const handleViewDetail = (record) => {
    openDrawer(true, {
      isUpdate: true,
      record,
    });
  };

  /**
   *@param url,name
   **/
  function getParam(url, name) {
    try {
      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      let r = url.split('?')[1].match(reg);
      if (r != null) {
        return r[2];
      }
      return '';
    } catch (e) {
      return '';
    }
  }

  getPathUrl.value = window.location.href;

  const name = 'name';

  const getName = getParam(getPathUrl.value, name);

  getPathUrlName.value = decodeURIComponent(getName);

  const setInitQueryTable = async () => {
    if (getPathUrlName.value !== '') {
      const { items, total } = (await applicationRecordPage({
        page: 1,
        pageSize: 10,
        applicationName: getPathUrlName.value,
      })) as any;
      nextTick(() => {
        setTableData(items);
        setPagination({ total });
        const { setFieldsValue, resetFields } = getForm();
        setFieldsValue({
          applicationName: getPathUrlName.value,
        });
        if (onCloseVal.value == 1) {
          resetFields();
        }
      });
    } else {
      setTimeout(() => {
        reload();
      }, 80);
    }
  };

  setInitQueryTable();

  onUnmounted(() => {
    getPathUrlName.value = '';
  });
</script>

<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.viewText'),
              icon: 'ant-design:eye-outlined',
              onClick: handleViewDetail.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <RecordDetailDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>