<template>
  <div class="layout-container">
    <!-- 菜单栏 -->
    <!-- <From :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset" /> -->
    <div class="card">
      <div class="title">平台总注册量： 35806</div>
      <Card />
    </div>
    <!-- 表格 -->
    <div class="layout-container">
      <Table @getTableData="changeTableData" :showPage="false" ref="table" :data="tableData"
        @selection-change="handleSelectionChange" style="margin-top: -5px;height: 130px;">
        <el-table-column prop="staticsType" label="统计类型">
          <template #default="scope">
            {{ scope.row.staticsType === 1 ? '当月' : '当日' }}
          </template>
        </el-table-column>
        <el-table-column prop="bannedNum" label="封禁人数" />
        <el-table-column prop="userNum" label="用户注册数" />
        <el-table-column prop="videoWatchCount" label="总广告数" />
        <el-table-column prop="withdrawAmount" label="已提现金额" />
        <el-table-column prop="withdrawCount" label="提现笔数" />
        <el-table-column prop="withdrawNum" label="提现人数" />
      </Table>
    </div>

    <Charts />
  </div>
</template>

<script setup>
  import { onBeforeMount, ref, reactive } from "vue";
  import From from "@/components/from/index.vue";
  import Table from "@/components/table/index.vue";
  import Card from './components/card/index.vue'
  import Charts from './components/charts/index.vue'
  import { getUserList, getStaticList } from '@/api/userModule.js'

  const form = ref(null);
  const tableData = ref([]);

  // 分页参数, 供table使用
  const page = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
  });

  const formSearch = ref({
    action: null,
    type: null,
    pageNum: 1,
    pageSize: 20,
    name: null,
    beginTime: null,
    endTime: null
  });


  const dynamicFormItems = [
    {
      label: 'ZID',
      prop: 'ZID',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: 'PID',
      prop: 'PID',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: 'UID',
      prop: 'UID',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '昵称',
      prop: 'name',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: 'APP应用',
      prop: 'name',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '渠道类型',
      prop: 'type1',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '渠道来源',
      prop: 'type1',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '玩家类别',
      prop: 'payType',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    { label: '注册时间', prop: 'deliveryTime', type: 'daterange', width: 5, },
    { label: '登录时间', prop: 'deliveryTime1', type: 'daterange', width: 5, },
    {
      label: '标记描述',
      prop: '标记描述',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '登录IP',
      prop: '登录IP',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: 'IP归属地',
      prop: 'IP归属地',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: 'APP版本',
      prop: 'IP归属地',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: 'app备注',
      prop: 'name',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '账号状态',
      prop: 'name',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '标记用户',
      prop: 'name',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '所属代理',
      prop: 'name',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '用户归因',
      prop: 'name',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: '新ID检索',
      prop: 'name',
      type: 'select',
      width: 4,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    {
      label: 'OAID',
      prop: 'OAID',
      type: 'input',
      width: 2,
      options: [
        { label: '0', value: 0 },
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },

    // { label: '输入框', prop: 'phone', type: 'input', width:5 },`
    // 其他动态的表单项配置
  ]



  onBeforeMount(() => {
    // getList();
    getStaticListData()
  });

  // 分页数据
  const getList = async () => {
    /* let res = await sysLogPage({ ...formSearch.value });
    res = res.result */
    tableData.value = res.list;
    page.total = res.total;
  };

  const getStaticListData = async () => {
    let res = await getStaticList()
    console.log('getStaticList', res)
    tableData.value = res.data;
    // page.total = res.pageMeta.total;
  }

  const changeTableData = (type) => {
    formSearch.value.page = type ? 1 : page.pageNum;
    formSearch.value.limit = page.pageSize;
    // 分页切换
    getList();
};

  // 搜索
  const handleFormSubmitted = (formData) => {
    // console.log("接收到子组件传递的数据", formData);
    // 其他处理逻辑
    formSearch.value.page = page.pageNum;
    formSearch.value.limit = page.pageSize;
    formSearch.value.name = formData.name
    formSearch.value.action = formData.action
    formSearch.value.type = formData.type

    if (formData.createdTime) {
      formSearch.value.beginTime = new Date(formData.createdTime[0])
        .toLocaleDateString()
        .slice()
        .replace(/\//g, "-");
      formSearch.value.endTime = new Date(formData.createdTime[1])
        .toLocaleDateString()
        .slice()
        .replace(/\//g, "-");
    } else {
      formSearch.value.beginTime = null;
      formSearch.value.endTime = null;
    }

    getList();
  };

  // 表单重置
  const handleFormReset = () => {
    formSearch.value = {
      action: null,
      type: null,
      pageNum: 1,
      pageSize: 20,
      name: null,
      beginTime: null,
      endTime: null
    };
    page.pageNum = 1
    page.pageSize = 20
    page.total = 0
    getList();
  };

  // 选择监听器
  const handleSelectionChange = (val) => {
    // context.emit("selection-change", val)
  }
</script>

<style scoped lang="scss">
  .layout-container {

    .card {
      .title {
        margin-bottom: 10px;
        font-weight: 600;
      }

      display: flex;
      flex-direction: column;
      align-items: start;
      width: calc(100% - 60px);
      margin: 30px 30px 0;
    }
  }
</style>