<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="queryhFunc" :resetFunc="onReset">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData['queryDateRange']" customDateRangeType="dateTime" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData.userId" :placeholder="'用户ID'" :msg="vdata.searchData.userId" />
        <jeepay-text-up v-model:value="vdata.searchData.userName" :placeholder="'用户名'" :msg="vdata.searchData.userName" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.sysType" placeholder="所属系统">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="PLATFORM">
              运营平台
            </a-select-option>
            <a-select-option v-if="$hasAgentEnt()" value="AGENT">
              代理商系统
            </a-select-option>
            <a-select-option value="MCH">
              商户系统
            </a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="vdata.searchData"  
        row-key="sysLogId"
        :row-selection="{ onChange: onSelectChange }"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_SYS_LOG_DEL')" type="danger" class="mg-b-30" @click="delFunc">
              <DeleteOutlined />删除
            </a-button>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'userName'">
            <b>{{ record.userName }}</b>
          </template>

          <template v-if="column.key === 'sysType'">
            <a-tag :key="record.sysType" :color="record.sysType === 'PLATFORM'?'green':record.sysType === 'MCH'?'geekblue':record.sysType === 'AGENT'?'cyan':'loser'">
              {{ record.sysType === 'PLATFORM'?'运营平台':record.sysType === 'MCH'?'商户系统':record.sysType === 'AGENT'?'代理商系统':'其他' }}
            </a-tag>
          </template>

          <template v-if="column.key === 'op'">
            <a-button v-if="$access('ENT_SYS_LOG_VIEW')" type="link" @click="detailFunc(record.sysLogId)">
              详情
            </a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 日志详情抽屉 -->
    <template>
      <a-drawer
        width="40%"
        placement="right"
        :closable="true"
        :visible="visible"
        :title="visible === true? '日志详情':''"
        @close="onClose"
      >
        <a-row justify="space-between" type="flex">
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="用户ID">
                {{ vdata.detailData.userId }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="用户IP">
                {{ vdata.detailData.userIp }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="用户名">
                <b>
                  {{ vdata.detailData.userName }}
                </b>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="所属系统">
                <a-tag :key="vdata.detailData.sysType" :color="vdata.detailData.sysType === 'PLATFORM'?'green':vdata.detailData.sysType === 'MCH'?'geekblue':vdata.detailData.sysType === 'AGENT'?'cyan':'loser'">
                  {{ vdata.detailData.sysType === 'PLATFORM'?'运营平台':vdata.detailData.sysType === 'MCH'?'商户系统':vdata.detailData.sysType === 'AGENT'?'代理商系统':'其他' }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-divider />
        <a-row justify="space-between" type="flex">
          <a-col :sm="24">
            <a-descriptions>
              <a-descriptions-item label="操作描述">
                {{ vdata.detailData.methodRemark }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="24">
            <a-descriptions>
              <a-descriptions-item label="请求方法">
                {{ vdata.detailData.methodName }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="24">
            <a-descriptions>
              <a-descriptions-item label="请求地址">
                {{ vdata.detailData.reqUrl }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-row justify="start" type="flex">
          <a-col :sm="24">
            <a-form-item label="请求参数">
              <a-textarea
                v-model:value="vdata.detailData.optReqParam"
               
                disabled="disabled"
                style="background-color: black;color: #FFFFFF;height: 100px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row justify="start" type="flex">
          <a-col :sm="24">
            <a-form-item label="响应参数">
              <a-textarea
                v-model:value="vdata.detailData.optResInfo"
                
                disabled="disabled"
                style="background-color: black;color: #FFFFFF;height: 150px"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-drawer>
    </template>
  </page-header-wrapper>
</template>

<script setup lang="ts">
import { API_URL_SYS_LOG, req } from '@/api/manage'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { message,Modal } from 'ant-design-vue'

// 导入全局函数
const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const infoTable = ref()

// eslint-disable-next-line no-unused-vars
const tableColumns = reactive([
  { key: 'userName', title: '用户名', fixed: 'left' },
  { key: 'userId', title: '用户ID', dataIndex: 'userId' },
  { key: 'userIp', title: '用户IP', dataIndex: 'userIp' },
  { key: 'sysType', title: '所属系统'},
  { key: 'methodRemark', title: '操作描述', ellipsis: true, dataIndex: 'methodRemark' },
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
  { key: 'op', title: '操作',  fixed: 'right', align: 'center' }
])

const vdata = reactive({
  searchData : {} as any,
  detailData: {} as any,
  selectedIds:[] as any,
  btnLoading:false
})

  let createdStart = '' // 选择开始时间
  let createdEnd = '' // 选择结束时间
  let visible = ref(false)
  const dateRangePicker = ref()

  // 请求table接口数据
  function reqTableDataFunc (params) {
    return req.list(API_URL_SYS_LOG, params)
  }

  function delFunc () {
    if (vdata.selectedIds.length === 0) {
      message.error('请选择要删除的日志')
      return false
    }
    Modal.confirm({
      title: '确认删除' + vdata.selectedIds.length + '条日志吗？',
      okType: 'danger',
      onOk () {        
        req.delById(API_URL_SYS_LOG, vdata.selectedIds).then(res => {
          vdata.selectedIds = [] // 清空选中数组
          infoTable.value.refTable(true)
          $infoBox.message.success('删除成功')
        })
      },
      })
  }

  function detailFunc (recordId) {
    req.getById(API_URL_SYS_LOG, recordId).then(res => {
      vdata.detailData = res
    })
    visible.value = true
  }

  function onClose () {
    visible.value = false
  }

  function queryhFunc () {
    // 当前用户id类型判断
    if(vdata.searchData.userId){
      var numReg = /^[0-9]*$/
      var numRe = new RegExp(numReg)
      if (!numRe.test(vdata.searchData.userId)) {
        return message.error('请输入正确的用户ID')
      }
    }

    vdata.btnLoading = true
    infoTable.value.refTable(true)
  }

  // 多选函数
  function onSelectChange(selectedRowKeys, selectedRows){
    vdata.selectedIds = []
  
    selectedRows.forEach(e => {  
      vdata.selectedIds.push(e.sysLogId)
    })
  }

  function onReset(){
      //重置搜索内容
      dateRangePicker.value.returnSelectModel()
      vdata.searchData = { queryDateRange: '' }
    }
</script>
