<script lang="ts" setup>
import { h, onMounted, ref, watch } from 'vue';
import type { DataTableColumns, DataTableRowKey, RowData } from 'naive-ui';
import {
  NButton,
  NCard,
  NDataTable,
  NDialog,
  NForm,
  NFormItem,
  NInput,
  NModal,
  NPagination,
  NRadio,
  NSpace,
  NSpin,
  useDialog,
  useMessage
} from 'naive-ui';
import { api_operateLog, api_operatePage } from '@/api';

// 常量和响应式数据
const tableData = ref([]);
const message = useMessage();
const pageSizes = ref([10, 20, 50, 100]);
const show = ref(false);
const range = ref<any>();

const pageData = ref({
  pageNum: 1,
  pageSize: 10,
  total: 1
})

const serarchData = ref({
  pageNum: pageData.value.pageNum,
  pageSize: pageData.value.pageSize,
  username: '',
  startTime: '',
  endTime: ''
})

const detailForm = ref({
  uname: '',
  username: '',
  methodName: '',
  costTime: '',
  createTime: '',
  className: ''
})

// 添加详情框相关的响应式数据
const detailModalVisible = ref(false);

// 表格列配置
const tableColumn = [
  {
    title: '用户名',
    key: 'username',
    align: 'center',
    minWidth: 200
  },
  {
    title: '用户姓名',
    key: 'name',
    align: 'center',
    minWidth: 120
  },
  {
    title: '操作时间',
    key: 'createTime',
    align: 'center',
    minWidth: 180
  },
  {
    title: '查看详情',
    key: 'details',
    align: 'center',
    minWidth: 180,
    render(row: any) {
      // 改用Vue推荐的方式创建元素
      return h(NSpace, { justify: 'center' }, [
        h(
          NButton,
          {
            size: 'small',
            style: {
              color: '#eee',
              backgroundColor: '#2196ed',
              borderColor: '#2196ed',
              borderRadius: '4px',
              padding: '4px 12px'
            },
            onClick: () => handleDetails(row)
          },
          [
            h('img', {
              src: '/src/assets/jieguo.png',
              alt: '详情',
              style: {
                width: '14px',
                height: '14px',
                marginRight: '5px'
              }
            }),
            '详情'
          ]
        )
      ]);
    }
  }
];

const checkedRowKeysRef = ref<DataTableRowKey[]>([]);

function handleCheck(rowKeys: DataTableRowKey[]) {
  checkedRowKeysRef.value = rowKeys;
}

function handleSearch() {
  search()
}

function handleReset() {
  serarchData.value = {
    pageNum: pageData.value.pageNum,
    pageSize: pageData.value.pageSize,
    username: '',
    startTime: '',
    endTime: ''
  };
  range.value = null;

  search();
}

async function handleDetails(row: any) {
  console.log('查看详情:', row);
  let res = await api_operateLog(row.id);
  if (res.data.code == 200) {
    console.log(res);
    let data = res.data.data;
    detailForm.value = {
      uname: data.name,
      username: data.username,
      methodName: data.methodName,
      costTime: data.costTime,
      createTime: data.createTime,
      className: data.className
    }
  } else {
    message.error(res.msg);
  }
  detailModalVisible.value = true;
}

async function search() {
  let res = await api_operatePage(serarchData.value);
  if (res.data.code == 200) {
    tableData.value = res.data.data.records;
    pageData.value = {
      pageNum: res.data.data.page,
      pageSize: res.data.data.pageSize,
      total: Number(res.data.data.total)
    }
  } else {
    message.error(res.msg);
  }
}

function checkModal() {
  detailModalVisible.value = false;
}
// 日期范围
function watchTimeData(value: any) {
  serarchData.value.startTime = value[0];
  serarchData.value.endTime = value[1];
}
// 日期范围清空
function handleclear() {
  serarchData.value.startTime = ''
  serarchData.value.endTime = ''
}
//分页
function handlePage() {
  serarchData.value.pageNum = pageData.value.pageNum;
  search();
}

function handlePageSize() {
  serarchData.value.pageSize = pageData.value.pageSize;
  pageData.value.pageNum = 1;
  serarchData.value.pageNum = 1;
  search();
}


onMounted(() => {
  search()
});
</script>

<template>
  <div id="DepartmentPage">
    <div>
      <NSpin :show="show">
        <NCard size="medium">
          <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center">
            <NSpace>
              <div>
                用户名
                <NInput v-model:value="serarchData.username" placeholder="请输入角色名称"
                  style="width: 200px; margin-left: 10px" clearable="true" />
              </div>
              <div style="display: flex; align-items: center; margin-left: 30px">
                <div>日期范围</div>
                <n-date-picker v-model:value="range" type="datetimerange" @update:value="watchTimeData" clearable
                  @clear="handleclear" style="margin-left: 10px" />
              </div>

              <NButton color="#2198f2" style="padding: 0px 17px; border-radius: 5px; margin-left: 20px"
                @click="handleSearch">
                查询
              </NButton>
              <NButton style="padding: 0px 17px; border-radius: 5px" @click="handleReset">重置</NButton>
            </NSpace>
          </div>

          <NDataTable :row-key="row => row.id" :columns="tableColumn" :data="tableData" :bordered="true"
            :pagination="false" tree-column-key="name" @update:checked-row-keys="handleCheck" />

          <div style="display: flex; justify-content: end; margin-top: 30px;">
            <ElPagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
              :page-sizes="[10, 20, 30, 40]" background="#2196f3" layout="sizes, prev, pager, next"
              :total="pageData.total" @size-change="handlePageSize" @current-change="handlePage" />
          </div>
        </NCard>
      </NSpin>
    </div>
    <!-- 详情框组件 -->
    <NModal v-model:show="detailModalVisible" title="日志详情" preset="dialog" :close-on-esc="true" :show-icon="false"
      style="width: 630px">
      <hr />
      <div style="display: flex; flex-direction: column; gap: 20px">
        <!-- 第一行：用户名和账号 -->
        <div style="display: flex; gap: 78px; padding-top: 20px">
          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; align-items: center; gap: 8px">
              <span style="font-weight: bold; width: 60px">用户名</span>
              <NInput v-model:value="detailForm.username" placeholder="请输入用户名" :disabled="true" style="width: 180px" />
            </div>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; align-items: center; gap: 8px">
              <span style="font-weight: bold; width: 60px">用户姓名</span>
              <NInput v-model:value="detailForm.uname" placeholder="请输入用户姓名" :disabled="true" style="width: 180px" />
            </div>
          </div>
        </div>

        <!-- 第二行：操作方法和执行耗时 -->
        <div style="display: flex; gap: 78px">
          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; align-items: center; gap: 8px">
              <span style="font-weight: bold; width: 60px">操作方法</span>
              <NInput v-model:value="detailForm.methodName" placeholder="请输入操作方法" :disabled="true"
                style="width: 180px" />
            </div>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; align-items: center; gap: 8px">
              <span style="font-weight: bold; width: 60px">执行耗时</span>
              <NInput v-model:value="detailForm.costTime" placeholder="请输入执行耗时" :disabled="true" style="width: 180px" />
            </div>
          </div>
        </div>

        <!-- 第三行：创建时间 -->
        <div style="width: 100%; display: flex; flex-direction: column; gap: 4px">
          <div style="display: flex; align-items: center; gap: 8px">
            <span style="font-weight: bold; width: 60px">创建时间</span>
            <NInput v-model:value="detailForm.createTime" placeholder="请输入创建时间" :disabled="true" style="width: 90%" />
          </div>
        </div>

        <!-- 第四行：操作类名 -->
        <div style="display: flex; flex-direction: column; gap: 4px">
          <div style="width: 100%; display: flex; gap: 8px">
            <span style="font-weight: bold; width: 60px">操作类名</span>
            <NInput v-model:value="detailForm.className" type="textarea" placeholder="请输入操作类名" :disabled="true"
              style="width: 90%; height: 160px" />
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end; padding: 10px 20px">
        <NButton color="#2196ed" @click="checkModal">确认</NButton>
      </div>
    </NModal>
  </div>
</template>

<style scoped>
:deep(.n-form-item-content > div) {
  &::-webkit-scrollbar {
    display: none;
  }
}

:deep(.n-pagination .n-pagination-item.n-pagination-item--active) {
  background-color: #2196ed !important;
  color: white !important;
  border-color: #2196ed !important;
}
</style>
