<script setup lang="tsx">
import { reactive, ref, toRaw, unref } from 'vue'
import { useTable } from '../../../hooks/web/useTable'
import { useI18n } from '../../../hooks/web/useI18n'
import { Table, TableColumn } from '../../../components/Table'
import { Search } from '../../../components/Search'
import { FormSchema } from '../../../components/Form'
import { ContentWrap } from '../../../components/ContentWrap'
import { BaseButton } from '../../../components/Button'
import { delWorkLog, exportWorkList, getWorkList } from '../../../api/system-config/log'
import { useExport } from '../../../hooks/web/useExport'

const { t } = useI18n()
console.log('window.APP_FUN_ID', window.APP_FUN_ID)
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await getWorkList({
      current: currentPage.value,
      size: pageSize.value,
      funId: window.APP_FUN_ID,
      ...unref(searchParams),
      operateTimeStart: unref(searchParams)?.time ? unref(searchParams)?.time[0] : '',
      operateTimeEnd: unref(searchParams)?.time ? unref(searchParams)?.time[1] : ''
    })
    return {
      list: res.data.list || [],
      total: Number(res.data.totalCount || 0)
    }
  }
})

const { dataList, loading, total, pageSize, currentPage } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  {
    field: 'logId',
    label: '日志ID'
  },
  // {
  //   field: 'status',
  //   label: t('menu.status'),
  //   slots: {
  //     default: (data: any) => {
  //       return (
  //         <>
  //           <ElTag type={data.row.status === 0 ? 'danger' : 'success'}>
  //             {data.row.status === 1 ? t('userDemo.enable') : t('userDemo.disable')}
  //           </ElTag>
  //         </>
  //       )
  //     }
  //   }
  // },
  {
    field: 'userNo',
    label: '用户编号'
  },
  {
    field: 'userName',
    label: '操作人员'
  },
  {
    field: 'operateTime',
    label: '操作时间'
  },
  // {
  //   field: 'funId',
  //   label: '操作的功能ID'
  // },
  {
    field: 'clientIp',
    label: '客户端IP地址'
  },
  {
    field: 'bizData',
    label: '交互数据'
  },
  {
    field: 'reqUrl',
    label: '请求地址'
  },
  {
    field: 'funName',
    label: '操作类型'
  },
  // {
  //   field: 'logoutTime',
  //   label: '下线时间'
  // },
  // {
  //   field: 'remark',
  //   label: t('userDemo.remark')
  // },
  {
    field: 'action',
    label: t('userDemo.action'),
    width: 80,
    slots: {
      default: (data: any) => {
        const row = data.row
        return (
          <>
            <BaseButton onClick={() => del(row)} size="small" type="danger">
              {'删除'}
            </BaseButton>
          </>
        )
      }
    }
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'funName',
    label: '操作类型',
    component: 'Input'
  },
  {
    field: 'userName',
    label: '操作人员',
    component: 'Input'
  },
  {
    field: 'clientIp',
    label: '客户端IP地址',
    component: 'Input'
  },
  {
    field: 'time',
    label: '操作时间',
    component: 'DatePicker',
    componentProps: {
      type: 'datetimerange',
      ...window.dateRangeProps
    }
  }
])

const searchParams = ref<any>({})
const setSearchParams = (data: any) => {
  searchParams.value = data
  getList()
}

const del = async (row) => {
  ElMessageBox.confirm('确认删除？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await delWorkLog({ logId: toRaw(row).logId })
    getList()
  })
}

const exportLog = async () => {
  const res = await exportWorkList({
    funId: window.APP_FUN_ID
  })
  useExport(res)
}
</script>

<template>
  <ContentWrap title="日志管理">
    <template #right>
      <BaseButton type="primary" @click="exportLog">导出日志</BaseButton>
    </template>
    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
    <!--    <div class="mb-10px">-->
    <!--      <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>-->
    <!--    </div>-->
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
