<template>
  <div>
    <Navbar title="操作日志" :is-go-back="false" />
    <a-card>
      <a-form ref="formRef" :model="logState">
        <a-row :gutter="20">
          <a-col :span="4">
            <a-form-item name="code" :label="'日志分类'">
              <a-select
                v-model:value="logState.code" show-search option-filter-prop="label" allow-clear
                placeholder="请选择日志分类"
                :options="classes.map((item) => ({ value: item.code, label: item.name }))"
                @change="searchDatas"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item name="userName" :label="'操作人'">
              <a-input
                v-model:value="logState.userName" placeholder="请输入操作人"
                @press-enter="searchDatas"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item name="ip" :label="'ip'">
              <a-input v-model:value="logState.ip" placeholder="请输入Ip" @press-enter="searchDatas" />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item :label="'创建日期'">
              <a-range-picker
                v-model:value="dateValue" format="YYYY-MM-DD HH:mm:ss" :show-time="{
                  defaultValue: [
                    dayjs('00:00:00', 'HH:mm:ss'),
                    dayjs('23:59:59', 'HH:mm:ss'),
                  ],
                }" style="width: 90%;" @change="createDateChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="1.5" style="padding-right: 0 !important;">
            <a-form-item>
              <a-button type="primary" :icon="h(SearchOutlined)" @click="searchDatas">
                搜索
              </a-button>
            </a-form-item>
          </a-col>
          <a-col :span="1.5" />
          <a-form-item>
            <a-button danger :icon="h(DeleteOutlined)" @click="clearInfo">清空</a-button>
          </a-form-item>
        </a-row>
      </a-form>
    </a-card>
    <CommonTable
      ref="table" :data-source="dataSource" :columns="columns" :total="total"
      @get-pager="getPageParams"
    />
  </div>
  <Loading v-if="isLoading" />
</template>

<script setup>
import { ref, h, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import Common from '../common/Common.js';
import CommonTable from '../common/CommonTable.vue';
import { ajaxApi, ajaxApiGet } from '../api/workflow/workflow.js';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
const table = ref();
const isLoading = ref(false);
const dataSource = ref([]);
const classes = ref([]);
const dateValue = ref([null,null]);
const logState = ref({
  ip: '',
  code: '',
  endDate: '',
  beginDate: '',
  userName: '',
});

const total = ref(0);

const pagination = ref({
  start: 1,
  length: 20,
});

onMounted(() => {
  queryClass();
  searchDatas();
});

// 查询,回到第一页
const searchDatas = () => {
  table.value.backFirstPage();
};

// 获取分页参数
const getPageParams = (start, length) => {
  pagination.value.start = (start - 1) * length;
  pagination.value.length = length;
  queryOperationLog();
};

const createDateChange = (_, dateString) => {
  logState.value.endDate = dateString[1];
  logState.value.beginDate = dateString[0];
  searchDatas();
};

// 查询终端数据
const queryOperationLog = () => {
  const params = {
    ...logState.value,
    ...pagination.value,
  };
  isLoading.value = true;
  const url = 'api/OperationLogResource/queryOperationLog';
  ajaxApi(url, params).then(
    success => {
      if (success.errorCode === 0) {
        if (success.datas && success.datas.length > 0) {
          dataSource.value = success.datas;
          total.value = success.total;
        } else {
          total.value = 0;
          dataSource.value = [];
        }
      } else {
        message.warning(success.errorMessage);
      }
      isLoading.value = false;
    },
    error => {
      isLoading.value = false;
      Common.processException(error);
    },
  );
};

const queryClass = () => {
  const url = 'api/OperationLogResource/queryClass';
  ajaxApiGet(url).then(
    success => {
      if (success.errorCode === 0) {
        if (success.datas && success.datas.length) {
          classes.value = success.datas;
        } else {
          classes.value = [];
        }
      } else {
        message.warning(success.errorMessage);
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

const columns = ref([
  {
    title: '编号',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '操作人名称',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: 'ip',
    dataIndex: 'ip',
    key: 'ip',
  },
  {
    title: '描述',
    dataIndex: 'comment',
    key: 'comment',
  },
  {
    title: '创建日期',
    dataIndex: 'created',
    key: 'created',
  },
].map(item => ({ ...item, align: 'center' })));

// 清空查询条件
const clearInfo = () => {
  logState.value.ip = '';
  logState.value.code = '';
  logState.value.endDate = '';
  logState.value.userName = '';
  logState.value.beginDate = '';
  dateValue.value = [null,null];
  searchDatas();
};
</script>

<style scoped>
:deep(.ant-card .ant-card-body) {
    padding-bottom: 0px !important;
}

:deep(.ant-form-item) {
    margin-bottom: 18px !important;
}
:deep(.ant-form-item-label > label){
  font-size: 14px !important;
  font-weight: 500 !important;
}
</style>