<template>
  <div class="box">
    <!-- 查询 -->
    <div class="inquire">
      <span>游戏</span>
      <el-select v-model="inquire.gameArrVal" placeholder="请选择">
        <el-option
          v-for="item in inquire.gamesArr"
          :key="item.gameId"
          :label="item.gameName"
          :value="item.gameId"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 时间选择器 -->
    <div class="inquire">
      <span class="demonstration">日期</span>
      <el-date-picker
        v-model="inquire.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <!-- 查询按钮 -->
    <el-button
      class="primary"
      type="primary"
      @click="
        tableData = [];
        currentPage = 1;
        isFinished = false;
        getData();
      "
      >查询</el-button
    >
    <el-button class="primary" type="primary" @click="confirmExport2Excel()"
      >导出</el-button
    >

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="dateTime" align="center" label="日期" />
      <el-table-column prop="userCount" align="center" label="人数" />
      <el-table-column prop="consumeNum" align="center" label="货币消耗" />
      <el-table-column prop="settleNum" align="center" label="结算总量" />
      <el-table-column prop="platformNum" align="center" label="平台收入" />
      <el-table-column align="center" label="操作" width="300">
        <template v-slot="scope">
          <el-button
            class="primary"
            type="primary"
            @click="
              detailPageFunArr = scope.row;
              tableDataDetails = [];
              currentPage2 = 1;
              isFinished2 = false;
              detailPageFun();
            "
            size="default"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!-- <el-pagination
      style="margin-top: 10px"
      class="paginationClass"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
    <!-- 加载更多按钮 -->
    <div v-if="!isFinished" class="pagination">
      <el-button
        class="pagination_in"
        @click="loadMore"
        type="primary"
        :loading="isLoading"
        >加载更多</el-button
      >
    </div>
    <div v-else class="pagination">
      <span class="pagination_in">没有更多数据了</span>
    </div>
  </div>

  <!-- 内嵌单个工会详情 -->
  <el-dialog :title="detailsTitle" v-model="detailsDialog">
    <el-table
      v-loading="loading2"
      :data="tableDataDetails"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="erbanNo" align="center" label="用户平台ID" />
      <el-table-column prop="nick" align="center" label="昵称" />
      <el-table-column prop="consumeNum" align="center" label="货币消耗" />
      <el-table-column prop="settleNum" align="center" label="结算总量" />
      <el-table-column prop="platformNum" align="center" label="平台收入" />
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination
      style="margin-top: 10px"
      class="paginationClass"
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
      layout="sizes, prev, pager, next"
      :total="total2"
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
    /> -->
    <!-- 加载更多按钮 -->
    <div v-if="!isFinished2" class="pagination">
      <el-button
        class="pagination_in"
        @click="loadMore2"
        type="primary"
        :loading="isLoading2"
        >加载更多</el-button
      >
    </div>
    <div v-else class="pagination">
      <span class="pagination_in">没有更多数据了</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailsDialog = false">关闭</el-button>
        <el-button type="primary" @click="confirmExport2Excel2()"
          >导出</el-button
        >
      </div></template
    >
  </el-dialog>
</template>
<script>
import {
  statisPage,
  sysConfKey,
  detailPage,
  exportForMiniGame,
  statisExport,
} from "@/api/lingSmallGames/lingSmallGames";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage, ElTable } from "element-plus";
import { ref } from "vue";
import { ElMessageBox } from "element-plus"; // 正确引入 ElM
export default {
  name: "lingSmallGames",
  data() {
    return {
      loading: false,
      loading2: false,
      //查询所需条件对象
      inquire: {
        time: "",
        gameArrVal: "",
        gamesArr: [],
      },
      // 表格
      tableData: [],
      // 分页
      total: 0, //总页数
      currentPage: 1, //页码
      pageSize: 10, //条数
      isLoading: false, // 加载状态
      isFinished: false, // 是否加载完成
      //   弹窗
      detailsDialog: false,
      detailsTitle: "",
      tableDataDetails: [],
      dateTimePub: null,
      detailPageFunArr: {},
      // 分页
      total2: 0, //总页数
      currentPage2: 1, //页码
      pageSize2: 10, //条数
      isLoading2: false, // 加载状态
      isFinished2: false, // 是否加载完成
    };
  },
  created() {
    sysConfKey({ configId: "leadercc_game" }).then((res) => {
      this.inquire.gamesArr = JSON.parse(res.data.configValue);
      this.getData();
    });
  },
  methods: {
    // 查询接口
    getData() {
      this.isLoading = true;
      this.loading = true;
      let time = this.inquire.time;
      let startTime = "";
      let endTime = "";
      if (time && time.length > 0) {
        startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      statisPage({
        gameId: this.inquire.gameArrVal,
        startTime: startTime,
        endTime: endTime,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          // 判断返回的记录是否为空数组
          const records = res.data.records;
          if (records.length > 0) {
            // 如果有数据，追加到表格数据中
            this.tableData = [...this.tableData, ...records];
            this.currentPage++; // 更新当前页码
          } else {
            // 如果数据长度为 0，停止加载
            this.isFinished = true;
          }
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
        this.loading = false;
        this.isLoading = false;
      });
    },
    // 加载下一页数据
    loadMore() {
      if (!this.isFinished) {
        this.currentPage = this.currentPage++;
        this.getData(this.currentPage);
      }
    },
    // 加载下一页数据
    loadMore2() {
      if (!this.isFinished2) {
        this.currentPage2 = this.currentPage2++;
        this.detailPageFun(this.currentPage2);
      }
    },
    // 导出
    confirmExport2Excel() {
      this.loading = true;
      let time = this.inquire.time;
      let startTime = "";
      let endTime = "";
      if (time && time.length > 0) {
        startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      exportForMiniGame({
        gameId: this.inquire.gameArrVal,
        startTime: startTime,
        endTime: endTime,
      }).then();
    },
    // 导出弹窗
    confirmExport2Excel2() {
      statisExport({
        dateTime: this.dateTimePub,
        gameId: this.inquire.gameArrVal,
      }).then();
    },
    // 详情接口
    detailPageFun() {
      this.isLoading2 = true;
      this.detailsDialog = true;
      this.loading2 = true;
      this.detailsTitle = this.dateTimePub = this.detailPageFunArr.dateTime;
      detailPage({
        gameId: this.detailPageFunArr.gameId,
        dateTime: this.detailPageFunArr.dateTime,
        pageNum: this.currentPage2,
        pageSize: this.pageSize2,
      }).then((res) => {
        if (res.code == 200) {
          // 判断返回的记录是否为空数组
          const records2 = res.data.records;
          if (records2.length > 0) {
            // 如果有数据，追加到表格数据中
            this.tableDataDetails = [...this.tableDataDetails, ...records2];
            this.currentPage2++; // 更新当前页码
          } else {
            // 如果数据长度为 0，停止加载
            this.isFinished2 = true;
          }
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
        this.loading2 = false;
        this.isLoading2 = false;
      });
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
    handleSizeChange2() {
      this.detailPageFun();
    },
    handleCurrentChange2() {
      this.detailPageFun();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  .inquire {
    display: inline-block;
    margin-right: 20px;
    span {
      margin-right: 10px;
    }
    .input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }
  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
.selectBox {
  display: flex;
  height: 35px;
  line-height: 35px;
  margin-bottom: 20px;
}
.selectBoxImg {
  height: 150px;
}
.pagination {
  margin: 10px auto 10px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pagination_in {
  text-align: center;
}
</style>
