<script setup lang="ts">
import AForm from '@/components/AForm/index.vue'
import { FormConfigType } from '@/components/AForm/type'
import { ToolbarConfigType } from '@/components/AToolbar/type'
import { ColumnConfigType } from '@/components/ATable/type'
import { StrAnyObj, StrAnyObjArr } from '@/typings'
import { useHandleData } from '@/utils/useHandleData'
import { getPageApi, deleteApi, getDetailApi } from '@/api/log/exception'
import { getListApi } from '@/api/system/user'

const queryRef = ref<InstanceType<typeof AForm>>()
const formRef = ref<InstanceType<typeof AForm>>()

const showQuery = ref<boolean>(true)
const selectKeys = ref<string[]>([])
const pageTotal = ref<number>(0)

const queryData = ref<StrAnyObj>({ pageNum: 1, pageSize: 10 })
const tableData = ref<StrAnyObjArr>([])
const formData = ref<StrAnyObj>({})

const dialogTitle = ref<string>('')
const dialogVisible = ref<boolean>(false)

const queryConfig: FormConfigType[] = [
  {
    type: 'select',
    prop: 'method',
    label: '请求方式',
    option: [
      {
        key: 'GET',
        label: 'GET'
      },
      {
        key: 'POST',
        label: 'POST'
      },
      {
        key: 'PUT',
        label: 'PUT'
      },
      {
        key: 'DELETE',
        label: 'DELETE'
      }
    ]
  },
  {
    type: 'input',
    prop: 'bestMatching',
    label: '接口'
  },
  {
    type: 'input',
    prop: 'username',
    label: '账号'
  },
  {
    type: 'select',
    prop: 'createUser',
    label: '用户名',
    keyName: 'id',
    labelName: 'nickname',
    async option() {
      const userList = await getListApi()
      userList.unshift({ id: 1000000000000000000, nickname: '超级管理员' })
      return userList
    }
  },
  {
    type: 'datePicker',
    prop: 'createTime',
    label: '异常时间',
    datePickerType: 'daterange',
    defaultTime: [new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]
  }
]

const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getPage()
    }
  },
  {
    common: 'reset',
    click() {
      queryRef.value?.resetFields()
      getPage()
    }
  },
  {
    common: 'delete',
    permissions: 'logException:delete',
    disabled() {
      return selectKeys.value.length == 0
    },
    click() {
      handleRemove(selectKeys.value)
    }
  }
]

const columnConfig: ColumnConfigType[] = [
  {
    prop: 'method',
    label: '请求方式'
  },
  {
    prop: 'bestMatching',
    label: '接口'
  },
  {
    prop: 'username',
    label: '账号'
  },
  {
    prop: 'nickname',
    label: '用户名'
  },
  {
    prop: 'createTime',
    label: '异常时间',
    width: 200
  },
  {
    prop: 'errorMsg',
    label: '异常信息',
    showOverflowTooltip: true
  },
  {
    width: 200,
    handleConfig: [
      {
        common: 'detail',
        click(row) {
          dialogVisible.value = true
          dialogTitle.value = '操作日志明细'
          getDetailApi({ id: row.id }).then((resp: StrAnyObj) => {
            formData.value = resp
          })
        }
      },
      {
        common: 'delete',
        permissions: 'logException:delete',
        click(row) {
          handleRemove([row.id])
        }
      }
    ]
  }
]

const formConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'method',
    label: '请求方式',
    placeholder: '',
    autosize: true
  },
  {
    type: 'input',
    prop: 'bestMatching',
    label: '接口',
    placeholder: '',
    autosize: true
  },
  {
    type: 'input',
    itemType: 'textarea',
    prop: 'requestBody',
    label: 'body参数',
    placeholder: '',
    autosize: true
  },
  {
    type: 'input',
    itemType: 'textarea',
    prop: 'requestParam',
    label: 'param参数',
    placeholder: '',
    autosize: true
  },
  {
    type: 'input',
    itemType: 'textarea',
    prop: 'requestAttribute',
    label: '接口路径变量',
    placeholder: '',
    autosize: true
  },
  {
    type: 'input',
    itemType: 'textarea',
    prop: 'errorMsg',
    label: '异常信息',
    placeholder: '',
    autosize: true
  },
  {
    type: 'input',
    itemType: 'textarea',
    prop: 'errorDetail',
    label: '异常明细',
    placeholder: '',
    autosize: true
  }
]

onMounted(() => {
  getPage()
})

function getPage() {
  getPageApi(queryData.value).then((resp) => {
    tableData.value = resp.records
    pageTotal.value = resp.total
  })
}

function tableSelectionChange(item: StrAnyObjArr) {
  selectKeys.value = item.map((item) => item.id)
}

function handleRemove(idList: string[]) {
  useHandleData('是否确认删除？', () => {
    deleteApi({ idList }).then(() => {
      ElMessage.success('删除成功')
      getPage()
    })
  })
}
</script>

<template>
  <div>
    <el-card v-if="showQuery">
      <a-form ref="queryRef" v-model="queryData" :config="queryConfig" :span="6"> </a-form>
    </el-card>

    <a-table
      selection
      :data="tableData"
      :page-total="pageTotal"
      :toolbar-config="toolbarConfig"
      :column-config="columnConfig"
      v-model:showQuery="showQuery"
      v-model:page-num="queryData.pageNum"
      v-model:page-size="queryData.pageSize"
      @page-num-change="getPage"
      @page-size-change="getPage"
      @selection-change="tableSelectionChange"
    >
    </a-table>

    <a-dialog v-model="dialogVisible" :title="dialogTitle" width="1300px" :footer="false">
      <a-form ref="formRef" v-model="formData" :config="formConfig" readonly :span="24"> </a-form>
    </a-dialog>
  </div>
</template>
