<template>
  <div>
    <en-table-layout :tableData="tableData.data" :loading="loading">
      <template #toolbar>
        <div class="inner-toolbar inner-toolbar2">
          <div class="toolbar-btns"></div>
          <en-table-search @search="searchEvent" @advancedSearch="advancedSearchEvent" advanced advancedWidth="465" :placeholder="$t('search_log')">
            <!-- <template #advanced-content>
              <el-form ref="advancedFormRef" :model="advancedForm" label-width="80px">
                <el-form-item label="日志级别">
                  <el-select v-model="advancedForm.level" placeholder="请选择" clearable>
                    <el-option label="一般" value="normal" />
                    <el-option label="重要" value="important" />
                  </el-select>
                </el-form-item>
                <el-form-item label="操作时间">
                  <el-date-picker
                    v-model="advancedForm.order_time_range"
                    type="daterange"
                    align="center"
                    :editable="false"
                    unlink-panels
                    :default-time="['00:00:00', '23:59:59']"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="x"
                    :disabled-date="disabledDate"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </template> -->
          </en-table-search>
        </div>
      </template>

      <template #table-columns>
        <el-table-column prop="operator_name" :label="$t('operator_name')" />
        <el-table-column prop="operate_detail" :label="$t('operate_detail')" />
        <el-table-column :label="$t('operate_time')" align="center">
          <template #default="scope">{{ unixToDate(scope.row.operate_time) }}</template>
        </el-table-column>
        <el-table-column prop="operate_ip" :label="$t('operate_ip')" />
        <el-table-column :label="$t('operate_level')" align="center">
          <template #default="scope">{{ scope.row.level === 'important' ? $t('operate_import') : $t('operate_same') }}</template>
        </el-table-column>
        <el-table-column :label="$t('operate')">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleShowDetail(scope.row)" v-if="checkPermission(['systemLogs:detail'])">{{$t('view')}}</el-button>
          </template>
        </el-table-column>
      </template>
      <template #pagination>
        <el-pagination
          v-if="tableData.data_total"
          @size-change="handlePageSizeChange"
          @current-change="handlePageCurrentChange"
          :current-page="tableData.page_no"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.data_total"
        >
        </el-pagination>
      </template>
    </en-table-layout>

    <el-dialog :title="$t('log_info')" v-model="showLogDetail" width="40%" class="!rounded-lg">
      <div class="logInfo">{{$t('operator_name')}}：{{ currDetailLog.operator_name }}</div>
      <div class="logInfo">{{$t('operate_detail')}}：{{ currDetailLog.operate_detail }}</div>
      <div class="logInfo">{{$t('request_method')}}：{{ currDetailLog.method }}</div>
      <div class="logInfo">{{$t('request_parameters')}}：{{ currDetailLog.params }}</div>
      <div class="logInfo">{{$t('operate_ip')}}：{{ currDetailLog.operate_ip }}</div>
      <div class="logInfo">{{$t('operate_level')}}：{{ currDetailLog.level === 'important' ? $t('operate_import') : $t('operate_same') }}</div>
      <div class="logInfo">{{$t('operate_time')}}：{{ unixToDate(currDetailLog.operate_time) }}</div>
    </el-dialog>
  </div>
</template>
  
  <script lang="ts"setup>
import { ref, reactive, onMounted } from 'vue';
import * as API_Setting from '@/api/setting';
import { useStore } from 'vuex';
const store = useStore();
const loading = ref(false);
const params = reactive<{
  page_no: number;
  page_size: number;
  keyword?: string;
  start_time?: number;
  end_time?: number;
  order_time_range?:number;
  company_id?:string
}>({
  page_no: 1,
  page_size: 10,
  company_id: store.state.companId,
});
const tableData = ref<any>({});
const searchTime = ref('');
const showLogDetail = ref(false);
const currDetailLog = ref<any>({});
const advancedForm = reactive<{
  order_time_range?: number;
}>({});
const advancedFormRef = ref(null);

const handlePageSizeChange = (size) => {
  params.page_size = size;
  GET_SystemLogs();
};

const handlePageCurrentChange = (page) => {
  params.page_no = page;
  GET_SystemLogs();
};

const searchEvent = (data) => {
  Object.assign(params, { keyword: data });
  Object.keys(advancedForm).forEach((key) => delete params[key]);
  params.page_no = 1;
  GET_SystemLogs();
};

const advancedSearchEvent = () => {
  Object.assign(params, advancedForm);
  delete params.start_time;
  delete params.end_time;
  if (advancedForm.order_time_range) {
    params.start_time = advancedForm.order_time_range[0] / 1000;
    params.end_time = advancedForm.order_time_range[1] / 1000;
  }
  delete params.keyword;
  delete params.order_time_range;
  params.page_no = 1;
  GET_SystemLogs();
};

const GET_SystemLogs = () => {
  loading.value = true;
  const clonedParams = JSON.parse(JSON.stringify(params));
  Object.keys(clonedParams).forEach((key) => {
    if (!clonedParams[key] && clonedParams[key] !== 0) {
      delete clonedParams[key];
    }
  });
  API_Setting.getSystemLogs(clonedParams)
    .then((response) => {
      loading.value = false;
      tableData.value = response;
      params.page_no = response.page_no;
      params.page_size = response.page_size;
    })
    .catch(() => {
      loading.value = false;
    });
};

const handleShowDetail = (row) => {
  showLogDetail.value = true;
  currDetailLog.value = row;
};

const checkPermission = (permissions) => {
  // 实现权限检查逻辑
  return true;
};

const unixToDate = (unix) => {
  // 实现 unix 时间戳转日期的逻辑
  return new Date(unix * 1000).toLocaleString();
};

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

onMounted(() => {
  GET_SystemLogs();
});
</script>
  
  <style>
.inner-toolbar2 {
  justify-content: flex-end !important;
}

.inner-toolbar2 .dateSearch {
  margin-right: 20px;
}

.toolbar-search {
  display: flex;
  width: 400px;
}

.toolbar-search .el-button {
  margin-left: 18px;
}

.nc-container {
  height: 32px !important;
  overflow: hidden;
}

.face-image {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.el-dialog__body {
  padding: 10px 20px;
}

.img-code {
  width: 80%;
}

.img-code .el-input-group__append {
  padding: 0;
  margin: 0;
}

.img-code .el-input-group__append img {
  display: block;
  height: 30px;
  cursor: pointer;
}

.logInfo {
  margin-bottom: 20px;
}
</style>