<template>
  <div class="app-container">
    <el-row :gutter="20">
        <el-col >
            <!-- 查询 -->
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
               <el-form-item label="园所" prop="status">
                  <el-select
                     v-model="queryParams.school_id"
                     placeholder="请选择园所"
                     clearable
                     filterable
                     remote
                     style="width: 240px"
                  >
                     <el-option
                        v-for="school in schoolList"
                        :key="school._id"
                        :label="school.name"
                        :value="school._id"
                     />
                  </el-select>
               </el-form-item>
               <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>

            <!-- @selection-change="handleSelectionChange" -->
            <el-table v-loading="loading" :data="userList" >
               <!-- <el-table-column type="selection" width="50" align="center" /> -->
               <!-- 序号 -->
               <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="schoolName" prop="schoolName" />
               <el-table-column label="课件名" align="center" key="fileName" prop="fileName" />
               <el-table-column label="下载量" align="center" key="download" prop="download" />
               <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 { getCurrentInstance, ref, reactive, toRefs } from "vue";
import { callCloudFunction } from "@/api/cloud";
import moment from "moment";

const { proxy } = getCurrentInstance();

const userList = ref([]);
const loading = ref(false);
const total = ref(0);
const dateRange = ref([]);
const schoolList = ref([]);

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

const { queryParams } = toRefs(data);

// 获取学校列表
async function getSchoolList() {
  try {
    const { data } = await proxy.$models.wx_school.list({
      filter: { where: {} },
      pageSize: 10000,
      pageNumber: 1,
      getCount: true,
      envType: "prod",
    });
    schoolList.value = data.records;
  } catch (error) {
    console.error("获取园所列表失败", error);
  }
}

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

  // 处理时间范围字段，保证 dateRange.value 是数组
  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 filteredParams = {};
  for (const key in queryParams.value) {
    const value = queryParams.value[key];
    if (value !== null && value !== undefined && value !== "") {
      filteredParams[key] = value;
    }
  }

  try {
    const res = await callCloudFunction("database", {
      page: "xiazailiangtongji",
      action: "findMicrocodePage",
      data: filteredParams,
    });

    userList.value = res.records;
    total.value = res.total;
  } catch (error) {
    console.error("查询失败", error);
  } finally {
    loading.value = false;
  }
}

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

// 重置按钮
function resetQuery() {
  dateRange.value = [];
  queryParams.value.school_id = undefined;
  handleQuery();
}

// 初始化
getSchoolList();
getList();
</script>

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