<script lang="ts">
export default {
  name: "record",
};
</script>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getLogList, exportExcel, deleteLogs } from "@/api/record";
import { downloadFile } from '@/utils/index';
import Page from '@/components/Pagination/page.vue'
import { ElMessage,ElMessageBox } from 'element-plus'
// import { VueDevToolsTimelineColors } from "@intlify/vue-devtools";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
//定义表格数据
const tableData: any = ref([]);

// 查询数据
const queryParams = ref({
  current: 1,
  size: 20,
  opttype: '',
  type: ''
});
// 日期查询
const operationTime: any = ref();
// 分页-总页数
const total = ref(0);
// 日志类型
const type: any = ref([
  { name: '登录(login)', value: '00' },
  { name: '登出(logout)', value: '07' },
  { name: '添加(insert)', value: '01' },
  { name: '修改(update)', value: '02' },
  { name: '删除(delete)', value: '03' },
  { name: '查询(select)', value: '04' },
  { name: '其他(other)', value: '05' }
]);
//排序
const sort: any = ref([
  { name: '操作账号', value: '操作账号' },
  { name: '用户姓名', value: '用户姓名' },
  { name: 'IP地址', value: 'IP地址' },
  { name: '日志类型', value: '日志类型' },
  { name: '模块名称', value: '模块名称' },
  { name: '操作时间', value: '操作时间' },
]);
// 事件类型
const typeList: any = ref([
  { name: '系统事件', value: '0' },
  { name: '业务事件', value: '1' }
]);
// 表格加载
const loading = ref(false)
//日志详情
const LogDetails = ref(false)
const username = ref()
const requestip = ref()
const module = ref()
const orderfield = ref()
// const requestip = ref()
// 初始化加载
function init() {
  let params = {
    optType: queryParams.value.opttype,
    type: "0",
    current: queryParams.value.current,
    size: queryParams.value.size,
    startDate: '',
    endDate: '',
    username: username.value,
    requestip: requestip.value,
    module: module.value,
    orderfield: orderfield.value
  };
  if (operationTime.value != null) {
    params.startDate = operationTime.value[0];
    params.endDate = operationTime.value[1];
  }
  loading.value = true;
  getLogList(params).then((result: any) => {
    tableData.value = result.data.list;
    total.value = result.data.total;
    queryParams.value.size = result.data.size
    pcode.value = result.data.size
    queryParams.value.current = result.data.current
    loading.value = false;
  }).catch((err: any) => {
    loading.value = false;
  });
}

function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month =
      date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}

// 导出
function leadingOut() {
  let params = {
    optType: queryParams.value.opttype,
    current: queryParams.value.current,
    size: queryParams.value.size,
    type: "0",
    startDate: '',
    endDate: ''
  };
  if (operationTime.value != null) {
    params.startDate = operationTime.value[0];
    params.endDate = operationTime.value[1];
  }
  exportExcel(params).then((response: any) => {
    downloadFile(response, '日志', 'xlsx')
  });
}
//分页
const pcode = ref(20)

onMounted(() => {
  init();
});
//日志详情
const Logdata: any = ref([])
function Loglist(row: any) {
  Logdata.value.push(row)
  if (Logdata.value.length == 2) {
    Logdata.value.shift()
  }

  LogDetails.value = true
}
function handleClose() {
  LogDetails.value = false
}

function delLogs() {
  ElMessageBox.confirm('您确定要删除6个月前的数据吗？', "提示信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteLogs().then((res: any) => {
    if (res.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      init()
    }
    // loading.value = false;
  })
    })
    .catch(() => {
      init()
    });
  // loading.value = true;

}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else if (rowIndex % 2 === 1) {
    return 'success-row'
  }
  return ''
}
</script>

<template>
  <div style=" padding: 17px 15px 8px 15px;">
    <div class="record-box">
      <div style="margin-bottom: 10px;display: flex;align-items: center;justify-content:space-between;">
        <div style=" display:flex;align-items: center;">
          <el-input placeholder="用户名称" v-model="username" clearable style="width: 140px;margin-right: 10px;"
            @input="init" />
          <el-input placeholder="IP地址" v-model="requestip" clearable style="width: 180px;margin-right: 10px;"
            @input="init" />
          <el-select v-model="queryParams.opttype" placeholder="日志类型" clearable @change="init"
            style="width: 140px;margin-right:10px;">
            <el-option v-for="item in type" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>
          <!-- <el-select v-model="queryParams.type" placeholder="事件类型" clearable @change="init"
            style="width: 120px;margin-right:10px;">
            <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select> -->


          <el-input placeholder="模块名称" v-model="module" clearable style="width: 140px;margin-right: 10px;"
            @input="init" />
          <div>
            <el-date-picker popper-class="elDatePicker" v-model="operationTime" value-format="YYYY-MM-DD"
              start-placeholder="操作开始时间" end-placeholder="操作结束时间" type="daterange" @change="init" />
          </div>
          <el-select v-model="orderfield" placeholder="排序" clearable @change="init"
            style="width: 180px;margin-left:10px;margin-right: 10px;">
            <el-option v-for="item in sort" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>
        </div>

        <div style=" display:flex;align-items: center;">
          <el-button class="searchButton" type="primary"  @click="init">搜索</el-button>
          <el-button class="searchButton" type="primary" @click="delLogs">删除6个月前数据</el-button>
          <el-button class="searchButton" type="primary" @click="leadingOut">导出日志数据</el-button>
        </div>

      </div>
      <div v-if="total > 100000"
        style="width: 100%;height: 20px;color:red;text-align: center;line-height: 20px;font-size: 16px;">
        日志记录数超过10万条，请及时清理！
      </div>
      <!-- <div  style="width: 100%;height: 30px;color:#fff;background:rgba(255, 0, 0, 0.568);text-align: center;line-height: 30px;font-weight: 600;">
        日志记录数超过10万，请及时清理
      </div> -->
      <el-table v-loading="loading" :data="tableData"
        style="width: 100%; height: calc(76vh);margin-bottom: 20px;" :row-class-name="tableRowClassName"
        :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px'}">
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="usercode" label="操作账户" width="100"></el-table-column>
        <el-table-column prop="username" label="用户姓名" width="180"></el-table-column>
        <el-table-column prop="requestip" label="IP地址" width="140"></el-table-column>
        <el-table-column prop="browser" label="浏览器" width="130"></el-table-column>
        <el-table-column prop="opttype" label="日志类型" width="130" align="center"></el-table-column>
        <el-table-column prop="module" label="模块名称" width="170"></el-table-column>
        <el-table-column prop="description" label="日志描述" min-width="100">
          <template #default="scope">
            <div
              style="display: flex;display: -webkit-flex;justify-content: space-between; align-items: center;-webkit-justify-content: space-between; -webkit-align-items: center;">
              <div>{{ scope.row.description }}</div>
              <div><img src="@/assets/newimg/xsjk_ckxq.png" alt="" style="cursor: pointer;" title="详情"
                  @click="Loglist(scope.row)"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="logtime" label="操作时间" width="196">
          <template #default="scope">
            {{ dateFormat(scope.row.logtime) }}
          </template>
        </el-table-column>
      </el-table>
      <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="init()">
      </Page>
    </div>
    <Eldialog v-if="LogDetails" :title="'日志详情'" :zIndex="2000" :width="'90%'" :height="'600px'"
      @before-close="handleClose">
      <template v-slot:PopFrameContent>
        <el-table v-loading="loading" :data="Logdata"
          style="width: 100%; height: calc(50vh - 266px);margin:15px 0px 20px 0px;"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="username" label="用户姓名" width="110"></el-table-column>
          <el-table-column prop="module" label="模块名称" width="120"></el-table-column>
          <el-table-column prop="description" label="日志描述" width="240"></el-table-column>
          <el-table-column prop="method" label="方法"></el-table-column>
          <el-table-column prop="params" label="参数"></el-table-column>
        </el-table>
      </template>
    </Eldialog>
    <!-- <el-dialog title="日志详情" v-model="LogDetails" width="90%" :before-close="handleClose" top="30px" draggable
      destroy-on-close>
     
    </el-dialog> -->
  </div>
</template>

<style scoped >
.record-box {
  padding:15px 8px 8px;
  width: 100%;
  height: calc(89vh);
  overflow: auto;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
  background: url(@/assets/navigation/ty_1614x988.png) ;
  background-size: 100% 100%;
}



/* :deep(.el-select .el-input) {
    width: 80px !important;
  } */
</style>
