<!-- 角色管理 -->
<template>
  <basic-container>
    <el-form>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="类型">
            <el-select v-model="searchList.logType" clearable placeholder="请选择类型">
              <el-option v-for="item in log_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              v-model="searchList.createTime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <el-button :icon="Refresh" @click="clearSearch">清空</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table v-loading="tableLoading" border :data="tableData" row-key="id">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="logType" label="类型">
          <template #default="{ row }">
            {{ getValueLabel(log_type, row.logType) }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="remoteAddr" label="IP地址" />
        <el-table-column prop="method" label="请求方式" />
        <el-table-column prop="serviceId" label="客户端" />
        <el-table-column prop="time" label="请求时间" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" width="220" align="center" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <div class="table_btn">
              <el-button size="small" :icon="View" @click="addOrUpdateHandle(row)">查看</el-button>
              <el-button size="small" :icon="Delete" @click="handleDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tablePage.total > 0"
        v-model:page="tablePage.currentPage"
        v-model:limit="tablePage.pageSize"
        :total="tablePage.total"
        @pagination="getList"
      />

      <el-dialog v-model="dialogShow" title="查看" width="50%">
        <el-form :model="dialogForm" label-width="80px" disabled>
          <el-row>
            <el-col :span="12">
              <el-form-item label="类型">
                <el-select v-model="dialogForm.logType">
                  <el-option v-for="item in log_type" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标题">
                <el-input v-model="dialogForm.title" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="IP地址">
                <el-input v-model="dialogForm.remoteAddr" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求方式">
                <el-input v-model="dialogForm.method" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户端">
                <el-input v-model="dialogForm.serviceId" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="执行时间">
                <el-input v-model="dialogForm.time" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="路径">
                <el-input v-model="dialogForm.requestUri" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建人">
                <el-input v-model="dialogForm.createBy" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="入参">
                <el-input type="textarea" :autosize="{ minRows: 1 }" v-model="dialogForm.requestParam" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="出参">
                <el-input type="textarea" :autosize="{ minRows: 1 }" v-model="dialogForm.responseParam" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="异常信息">
                <el-input type="textarea" :autosize="{ minRows: 1 }" v-model="dialogForm.exception" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="提交数据">
                <el-input type="textarea" :autosize="{ minRows: 1 }" v-model="dialogForm.params" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建时间">
                <el-input v-model="dialogForm.createTime" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Refresh, View, Delete } from "@element-plus/icons-vue";

import { useDict } from "@/hooks/dict";
import { deepClone, getValueLabel } from "@/utils/util";
import { ITablePage } from "@//const/interface_type";
import { getLogList, delLogObj } from "@/api/admin";

interface ISearchList {
  logType: string;
  createTime: string[];
}

const searchList = ref<ISearchList>({
  logType: "",
  createTime: []
}); // 搜索数据
const tableData = ref([]); // 表格数据
const tablePage = ref<ITablePage>({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const tableLoading = ref<boolean>(false); // 表格loading

const dialogShow = ref<boolean>(false); // 新增/修改/查看 弹窗是否展示
const dialogForm = ref({
  logType: "",
  title: "",
  remoteAddr: "",
  method: "",
  serviceId: "",
  time: "",
  requestUri: "",
  createBy: "",
  requestParam: "",
  responseParam: "",
  exception: "",
  params: "",
  createTime: ""
});

const { log_type } = useDict("log_type");

// 搜索/获取列表
const getList = () => {
  tableLoading.value = true;
  const payload = {
    current: tablePage.value.currentPage,
    size: tablePage.value.pageSize,
    descs: ["create_time"],
    ascs: ["time"],
    ...searchList.value
  };
  getLogList(payload).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data.records;
      tablePage.value.total = res.data.total;
      tableLoading.value = false;
    }
  });
};

getList();

// 清空搜索条件
const clearSearch = () => {
  searchList.value = {
    logType: "",
    createTime: []
  };
  getList();
};

// 添加/查看/编辑 列表数据
const addOrUpdateHandle = (row: any) => {
  dialogForm.value = deepClone(row);
  dialogShow.value = true;
};

// 删除数据
const handleDelete = (row: any) => {
  ElMessageBox.confirm(`是否确认删除ID为 “${row.id}” 的数据项?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    delLogObj(row.id).then(() => {
      ElMessage({
        type: "success",
        message: `删除 “${row.id}” 成功`
      });
      getList();
    });
  });
};
</script>

<style lang="scss" scoped></style>
