<template>
  <div>
    <BasicTable @register="registerProp" @edit-change="onEditChangeProp">
      <template #action="{ record, column }">
        <TableAction :actions="createActionsProp(record, column)" />
      </template>
    </BasicTable>

    <BasicDrawer @register="registerInfoDrawer" title="属性详情" width="70%">
      <PageWrapper title="属性详情页" contentBackground>
        <Description
          size="middle"
          title="应用信息"
          :bordered="true"
          :column="3"
          :data="applyData"
          :schema="applySchema"
        />
        <Divider />
        <Description
          size="middle"
          title="事件信息"
          :bordered="true"
          :column="3"
          :data="eventData"
          :schema="eventSchema"
        />
        <Divider />
        <Description
          size="middle"
          title="日志信息"
          :bordered="true"
          :column="3"
          :data="eventLogData"
          :schema="eventLogSchema"
        />
      </PageWrapper>
    </BasicDrawer>
  </div>
</template>

<script lang="ts" setup>
  import {
    ActionItem,
    BasicColumn,
    BasicTable,
    EditRecordRow,
    useTable,
  } from '/@/components/Table';
  import TableAction from '/@/components/Table/src/components/TableAction.vue';
  import { ref } from 'vue';
  import {
    eventLogDelete,
    queryEventLogOne,
    queryPageEventLog,
  } from '/@/api/burialPoint/eventLog/eventLog';
  import { Apply } from '/@/api/burialPoint/apply/model/applyModel';
  import { Events } from '/@/api/burialPoint/event/model/eventModel';
  import { EventLogVo } from '/@/api/burialPoint/eventLog/model/eventLogModel';
  import { queryApplyOne } from '/@/api/burialPoint/apply/apply';
  import { queryEventOne } from '/@/api/burialPoint/event/event';
  import { BasicDrawer, useDrawer } from '/@/components/Drawer';
  import { PageWrapper } from '/@/components/Page';
  import { Description } from '/@/components/Description';
  import { Divider } from 'ant-design-vue';
  import { applySchema, eventSchema, eventLogSchema } from './model/data';

  /**
   * 注册表格信息
   */
  const columnsProp = [
    // {
    //   title: 'id',
    //   dataIndex: 'id',
    //   editRow: false,
    //   width: 200,
    // },
    {
      title: '触发应用',
      dataIndex: 'applyName',
      editRow: true,
      width: 200,
    },
    {
      title: '触发事件',
      dataIndex: 'eventName',
      editRow: true,
      width: 200,
    },
    {
      title: '触发用户',
      dataIndex: 'userName',
      editRow: true,
      width: 200,
    },
    {
      title: '触发时间',
      dataIndex: 'eventTime',
      editRow: true,
      width: 200,
    },
    {
      title: '设备类型',
      dataIndex: 'deviceType',
      editRow: true,
      width: 200,
    },
    {
      title: '设备浏览器',
      dataIndex: 'deviceBrowser',
      editRow: true,
      width: 200,
    },
    {
      title: 'IP地址',
      dataIndex: 'ipAddress',
      editRow: true,
      width: 200,
    },
  ];
  const [registerProp, methods] = useTable({
    title: '属性表',
    api: queryPageEventLog,
    fetchSetting: {
      pageField: 'pageNum',
      listField: 'eventLogVos',
      totalField: 'totalRow',
    },
    beforeFetch: (params) => {
      console.log(params);
    },
    columns: columnsProp,
    rowKey: 'id',
    actionColumn: {
      width: 160,
      title: '操作',
      slots: { customRender: 'action' },
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `applyName`,
          label: `应用`,
          component: 'Input',
          colProps: {
            xl: 12,
            xxl: 8,
          },
        },
        {
          field: `eventName`,
          label: `事件`,
          component: 'Input',
          colProps: {
            xl: 12,
            xxl: 8,
          },
        },
      ],
    },
    canResize: true,
    showIndexColumn: false,
  });

  /**
   * 控制表格行
   * @param record
   * @param column
   */
  function createActionsProp(record: EditRecordRow, column: BasicColumn): ActionItem[] {
    return [
      {
        label: '详情',
        onClick: handleOpenInfo.bind(null, record),
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否删除事件',
          confirm: handleDeleteProp.bind(null, record),
        },
      },
    ];
  }

  /**
   * 删除表格信息
   */
  function handleDeleteProp(record: Recordable) {
    eventLogDelete(record.id).then((res)=>{
      methods.reload()
      console.log('点击了删除', record);
    })
  }

  function onEditChangeProp({ column, value, record }) {
    // 本例
    if (column.dataIndex === 'uuid') {
      record.editValueRefs.name4.value = `${value}`;
    }
    console.log(column, value, record);
  }

  /**
   * 属性详情抽屉
   */
  const [registerInfoDrawer, { openDrawer: openDrawerInfo }] = useDrawer();

  const applyData = ref<Apply>();
  const eventData = ref<Events>();
  const eventLogData = ref<EventLogVo>();

  /**
   * 操作属性详情抽屉
   * @param record
   */
  async function handleOpenInfo(record: Recordable) {
    // console.log('打开抽屉');
    // 打开抽屉
    openDrawerInfo();

    await queryApplyOne(record.applyId).then((res: Apply) => {
      applyData.value = res;
    });
    await queryEventOne(record.eventId + '&applyId=' + record.applyId).then((res: Events) => {
      eventData.value = res;
    });
    await queryEventLogOne(record.id).then((res: EventLogVo) => {
      eventLogData.value = res;
    });
  }
</script>

<style scoped></style>
