<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="filterForm.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" />
              </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"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="flag"
          label="同步状态"
          :filters="[
            { text: '同步成功', value: '0' },
            { text: '同步失败', value: '1' },
          ]"
          :filter-method="filterTag"
          :filter-multiple="false"
          filter-placement="bottom-end"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.flag }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="content" label="内容" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column fixed="right" label="操作" align="center">
          <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]"
          :small="small"
          :disabled="disabled"
          :background="background"
          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="dialogVisible" title="添加日志" width="40%">
      <el-form
        :model="addForm"
        label-position="right"
        label-width="100px"
        style="padding: 0 5%"
      >
        <el-form-item label="名称：">
          <el-input v-model="addForm.name" placeholder="请输入名称：" />
        </el-form-item>
        <el-form-item label="同步状态：">
          <el-input v-model="addForm.flag" placeholder="请输入同步状态：" />
        </el-form-item>
        <el-form-item label="内容：">
          <el-input v-model="addForm.content" placeholder="请输入内容：" />
        </el-form-item>
        <el-form-item label="请求参数：">
          <el-input
            type="textarea"
            v-model="addForm.data"
            placeholder="请输入请求参数："
          />
        </el-form-item>
        <el-form-item label="同步时长：">
          <el-input v-model="addForm.costime" placeholder="请输入同步时长：" />
        </el-form-item>
        <el-form-item label="错误原因：">
          <el-input v-model="addForm.message" placeholder="请输入错误原因：" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelVisible">取消</el-button>
          <el-button type="primary" @click="confirmVisible">确认</el-button>
        </span>
      </template>
    </el-dialog> -->

    <!-- 详情页面 -->
    <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"
            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 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 } from "vue";
import moment from "moment";
import { ElTable } from "element-plus";
import { useXyunLogTableList } from "./tableConfigData/useXyunLog";

interface List {
  flag: Boolean;
  name: string;
  createTime: string;
  content: string;
}
const filterForm = ref({
  dateTime: [] as any[],
  name: ""
})
const detailForm = ref({
  flag: "",
  name: "",
  content: "",
  data: "",
  message: "",
  costime: "",
  createTime: "",
});
const dialogVisible = ref(false);
const visible = ref(false);
// 多选框
const multipleSelection = ref<List[]>([]);
// 分页
// 总页数
// const total = ref(0);
// 当前页数
const currentPage = ref(4);
// 每页条数
const pageSize = ref(10);
// 是否使用小型分页样式
const small = ref(true);
// 是否为分页按钮添加背景色
const background = ref(false);
// 是否禁用分页
const disabled = ref(false);

// onMounted(() => {
//   init();
// });
// const init = () => {
//   getQueryxyunLog().then((res) => {
//     tableData.value = res.data.records
//   });
// };

const { tableList, total, loading } = useXyunLogTableList();

// 同步成功/失败
const filterTag = (value: Boolean, row: any) => {
  
  console.log(row.flag);
  return row.flag === value
  // console.log(value);
  // if(value) {
  //   tableList.value.forEach(item => {
  //     console.log(item);
  //   })
  // }
};

const dateChange = (value: any) => {
  const time = [];
  let starttime = moment(value[0]).format("YYYY-MM-DD HH:mm:ss");
  let endtime = moment(value[1]).format("YYYY-MM-DD HH:mm:ss");
  time.push(starttime, endtime);
  filterForm.value.dateTime = time
};
// 选择多选框的数据
const handleSelectionChange = (val: List[]) => {
  multipleSelection.value = val;
};
// 点击弹出页面
const addDialogVisible = () => {
  dialogVisible.value = true;
};
// 详情
const handleDetails = (scope: any) => {
  console.log(filterForm.value);
  
  detailForm.value = scope;
  visible.value = true;
};
// 对话框取消按钮
const arr: any = [];
const cancelVisible = () => {
  detailForm.value = arr;
  dialogVisible.value = false;
};
const cancelVisible1 = () => {
  const arr: any = [];
  detailForm.value = arr;
  visible.value = false;
};
// 筛选按钮
const handleScreen = () => {
  console.log("点击筛选");
};
// 分页
// 每页新条数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 新页数
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
<style scoped></style>
