<template>
  <div class="container-wrapper" style="padding: 24px 24px 0">
    <div class="title">
      <el-form :inline="true" :model="searchModel">
        <el-date-picker
            v-model="selectedDate"
            type="daterange"
            range-separator="-"
            @change="handleDateChange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        />
        <el-input placeholder="请输入内容" v-model="searchModel.managerName" style="width: 180px;"></el-input>
        <el-input placeholder="请输入内容" v-model="searchModel.message" style="width: 180px;"></el-input>
        <span class="default-btn" @click="getData">
          <span class="iconfont icon-RectangleCopy"></span>
          查询
        </span>
      </el-form>
    </div>
    <div class="content">
      <el-table
          :data="tableData"
          style="width: 100%;height: 100%"
          :header-cell-style="{backgroundColor: '#F1F5FB'}"

      >
        <el-table-column prop="managerName" label="用户名" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="managerUsername" label="用户名" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="message" label="操作" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createDatetime" label="时间" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="params" label="请求参数" show-overflow-tooltip>
          <template #default="scope">
            <el-input v-model="scope.row.params" class="input-with-select" disabled>
              <template #prepend>
                <el-icon @click="copy(scope.row.params)" style="cursor: pointer;font-size: 20px">
                  <CopyDocument/>
                </el-icon>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {post} from '@/utils/request.ts'
import {formatDateArray, getEndOfDay} from "@/utils/dateUtils.ts";
import {CopyDocument} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const tableData = ref<any>([])
onMounted(() => {
  init()
  getData()
})
const init = () => {
}
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const handleCurrentChange = (val: any) => {
  currentPage.value = val
  getData()

}
const getData = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    ...searchModel.value,
    beginTime: selectedDate.value ? selectedDate.value[0] : null,
    endTime: selectedDate.value ? selectedDate.value[1] : null
  }
  post("common/log/page", {query: params}).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
  })
}
const searchModel = ref<any>({})
const selectedDate = ref<any>([])
const handleDateChange = (date: any[]) => {
  if (selectedDate.value) {
    selectedDate.value = formatDateArray(date)
    selectedDate.value[1] = getEndOfDay(selectedDate.value[1]); // 输出今天 23:59
  }
}

const copy = (text: any) => {
  ElMessage.success('复制成功')
  navigator.clipboard.writeText(text)
}
</script>
<style scoped lang="scss">
.container-wrapper {
  display: flex;
  flex-direction: column;

  .title {
    font-size: 20px;
    background: #fff;
    font-weight: 500;
    margin-bottom: 24px;
  }

  .content {
    flex: 1;
    background: #fff;
    min-height: 0;
  }

  .pagination {
    height: 60px;
    background: #fff;
    border-top: 1px solid #ebeef5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

:deep(.el-input__wrapper) {
  height: 42px;
  margin-right: 24px;
}
</style>