<template>
  <div class="app-container">
    <el-row :gutter="20">
        <el-col>
            <!-- 查询 -->
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
               <el-form-item label="创建时间" style="width: 308px;">
                  <el-date-picker
                     v-model="dateRange"
                     value-format="YYYY-MM-DD"
                     type="daterange"
                     range-separator="-"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                  ></el-date-picker>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
               </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="userList">
               <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
                :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
               />
               <el-table-column label="用户名" align="center" key="user_name" prop="user_name" />
               <el-table-column label="进入时间" align="center" key="start_time" prop="start_time">
                  <template #default="scope">
                    <span>{{ moment(scope.row.start_time).format("YYYY-MM-DD HH:mm:ss") }}</span>
                  </template>
               </el-table-column>
               <el-table-column label="退出时间" align="center" key="end_time" prop="end_time">
                  <template #default="scope">
                    <span>{{ moment(scope.row.end_time).format("YYYY-MM-DD HH:mm:ss") }}</span>
                  </template>
               </el-table-column>
               <el-table-column label="浏览时长" align="center" key="duration" prop="duration" />
               <el-table-column label="下载次数" align="center" key="total" prop="total" />
               <el-table-column label="创建时间" align="center" key="createdAt" prop="createdAt">
                  <template #default="scope">
                    <span>{{ moment(scope.row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}</span>
                  </template>
               </el-table-column>
            </el-table>

            <pagination
               v-show="total > 0"
               :total="total"
               v-model:page="queryParams.pageNum"
               v-model:limit="queryParams.pageSize"
               @pagination="getList"
            />
        </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { callCloudFunction } from "@/api/cloud";
import moment from "moment";

const { proxy } = getCurrentInstance();

const userList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const dateRange = ref([]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams } = toRefs(data);

/** 查询用户列表 */
async function getList() {
  loading.value = true;

  // 处理时间范围字段
  if (Array.isArray(dateRange.value) && dateRange.value.length === 2) {
    queryParams.value.startTime = new Date(dateRange.value[0]).getTime();
    queryParams.value.endTime = new Date(dateRange.value[1]).getTime();
  } else {
    queryParams.value.startTime = undefined;
    queryParams.value.endTime = undefined;
  }

  // 只传有效的查询条件
  const params = {};
  for (const [key, value] of Object.entries(queryParams.value)) {
    if (value !== null && value !== "" && value !== undefined) {
      params[key] = value;
    }
  }

  try {
    const res = await callCloudFunction("database", {
      page: "userstats",
      action: "findMmonitorBehaviorPage",
      data: params,
    });
    console.log(res.records, 'res.recordsres.recordsres.recordsres.records');
    userList.value = res.records || [];
    total.value = res.total ?? 0;
    loading.value = false;
  } catch (err) {
    console.error("查询失败", err);
    loading.value = false;
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  getList();
}

// 初始化列表
getList();
</script>

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