<template>
  <div class="router">
    <el-card>
      <el-space direction="vertical" alignment="align-items: left" style="margin-top: 30px">
        <!-- 过滤条件框 -->
        <div>
          <el-form :model="filterForm">
            <el-space :size="40">
              <el-form-item label="选择时间：">
                <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                  end-placeholder="结束时间" @change="dateChange" />
              </el-form-item>
              <el-form-item label="名称：" width="60px">
                <el-input v-model="filterForm.name" placeholder="请输入名称" clearable />
              </el-form-item>
              <el-form-item label="内容" width="60px">
                <el-input v-model="filterForm.content" placeholder="请输入内容" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleScreen">筛选</el-button>
              </el-form-item>
            </el-space>
          </el-form>
        </div>
      </el-space>

      <el-divider />

      <!-- 表格 -->
      <el-table v-loading="loading" :data="tableList" border stripe style="width: 100%"
        @selection-change="handleSelectionChange" @filter-change="filterChange">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" :index="indexMethod(1)" />
        <el-table-column prop="flag" label="同步状态" :filters="[
          { text: '同步成功', value: '1' },
          { text: '同步失败', value: '0' },
        ]" :filter-multiple="false" filter-placement="bottom-end" align="center" width="155px">
          <template #default="scope">
            <el-tag :type="scope.row.flag === 1 ? 'success' : ''" disable-transitions>{{ scope.row.flag === 1 ? "同步成功" :
                "同步失败"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="content" label="内容" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="155px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px">
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30]"
          layout="->, total,sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" hide-on-single-page />
      </div>
    </el-card>
    <!-- 详情页面 -->
    <el-dialog v-model="visible" title="详情页面" width="40%">
      <el-form :model="detailForm" label-position="left" label-width="100px" style="padding: 0 5%"
        :disabled="(disabled = true)">
        <el-form-item label="名称：">
          <el-input v-model="detailForm.name" placeholder="名称为" />
        </el-form-item>
        <el-form-item label="同步状态：">
          <el-input v-model="detailForm.flag" placeholder="同步状态为" />
        </el-form-item>
        <el-form-item label="内容：">
          <el-input v-model="detailForm.content" placeholder="内容为" />
        </el-form-item>
        <el-form-item label="请求参数：">
          <el-input type="textarea" :rows="5" v-model="detailForm.data" placeholder="请求参数为" />
        </el-form-item>
        <el-form-item label="同步时长：">
          <el-input v-model="detailForm.costime" placeholder="同步时长为为" />
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-input v-model="detailForm.createTime" placeholder="创建时间为" />
        </el-form-item>
        <el-form-item label="返回信息：">
          <el-input type="textarea" :rows="4" v-model="detailForm.message" placeholder="返回信息为" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelVisible1">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import moment from "moment";
import { ElTable } from "element-plus";
import { getQueryxyunLog } from "@/services/api/systemApi/log/logApi";
import { useXyunLogTableList } from "./tableConfigData/useXyunLog";

interface List {
  flag: Boolean;
  name: string;
  createTime: string;
  content: string;
}
const dateTime = ref();
const filterForm = ref({
  dateFrom: "",
  dateTo: "",
  name: "",
  content: "",
});
const detailForm = ref({
  flag: "",
  name: "",
  content: "",
  data: "",
  message: "",
  costime: "",
  createTime: "",
});
const indexMethod = (index: number) => {
  return index++;
};
const visible = ref(false);
// 多选框
const multipleSelection = ref<List[]>([]);
// 分页
const disabled = ref(false);
const filters = ref();
const { tableList, total, loading, pageSize, currentPage } =
  useXyunLogTableList();
// 同步筛选
const filterChange = (value: any) => {
  nextTick(() => {
    const flag = value["el-table_1_column_2"][0];
    filters.value = flag;
    page(
      currentPage.value,
      pageSize.value,
      filterForm.value.dateFrom,
      filterForm.value.dateTo,
      filterForm.value.name,
      filterForm.value.content,
      filters.value
    );
  });
};
const dateChange = (value: any) => {
  filterForm.value.dateFrom = moment(value[0]).format("YYYY-MM-DD HH:mm:ss");
  filterForm.value.dateTo = moment(value[1]).format("YYYY-MM-DD HH:mm:ss");
};
// 选择多选框的数据
const handleSelectionChange = (val: List[]) => {
  multipleSelection.value = val;
};

// 详情
const handleDetails = (scope: any) => {
  console.log(filterForm.value);
  detailForm.value = scope;
  visible.value = true;
};
// 对话框取消按钮
const cancelVisible1 = () => {
  const arr: any = [];
  detailForm.value = arr;
  visible.value = false;
};
// 筛选按钮
const handleScreen = () => {
  page(
    currentPage.value,
    pageSize.value,
    filterForm.value.dateFrom,
    filterForm.value.dateTo,
    filterForm.value.name,
    filterForm.value.content,
    filters.value
  );
};
// 筛选
const page = (
  pageNo?: number,
  pageSize?: number,
  dateFrom?: string,
  dateTo?: string,
  name?: string,
  content?: string,
  flag?: any
) => {
  filterForm.value.content,
    getQueryxyunLog(
      pageNo,
      pageSize,
      dateFrom,
      dateTo,
      name,
      content,
      flag
    ).then((res: any) => {
      if (res.code === 200) {
        tableList.value = res.data.records;
        total.value = res.data.total;
      }
      filterForm.value.dateFrom = ''
      filterForm.value.dateTo = ''
    });
};
// 每页新条数
const handleSizeChange = (val: number) => {
  page(
    val,
    pageSize.value,
    filterForm.value.dateFrom,
    filterForm.value.dateTo,
    filterForm.value.name,
    filterForm.value.content,
    filters.value
  );
  // if (val === pageSize.value) return;
  // page(val, pageSize.value);
};
// 新页数
const handleCurrentChange = (val: number) => {
  page(
    val,
    pageSize.value,
    filterForm.value.dateFrom,
    filterForm.value.dateTo,
    filterForm.value.name,
    filterForm.value.content,
    filters.value
  );
};
</script>
<style scoped>
</style>
