<template>
    <div>
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="日期" prop="create_date">
                <el-date-picker
                    v-model="searchInfo.create_date"
                    popper-class="picker-popovers"
                    class="timefilter"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
          </el-form-item>
    
          <el-form-item>
            <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
            <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="gva-table-box">
        <el-table :data="tableData" :span-method="objectSpanMethod" @sort-change="sortChange" border style="width: 100%">
          <el-table-column align="left" label="负责人" min-width="150" prop="user" sortable="custom" />
          <el-table-column align="left" label="游戏端口" min-width="150" prop="game_port" sortable="custom" />
          <el-table-column align="left" label="数量" min-width="150" prop="total" sortable="custom" />
          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button
                icon="edit"
                size="small"
                type="primary"
                link
                @click="selectGameInfoFunc(scope.row)"
              >查看游戏</el-button>
            </template>
          </el-table-column>
        </el-table>
  
      </div>
      <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
        <el-table :data="tableData1">
          <el-table-column align="left" label="游戏名称" show-overflow-tooltip min-width="160" prop="game_name" />
          <el-table-column align="left" label="游戏端口" show-overflow-tooltip min-width="160" prop="game_port" />
          <el-table-column align="left" label="任务日期" min-width="90" prop="create_date" />
        </el-table>
    </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'GameTotal',
  }
  </script>
  
  <script setup>
  import {
    gameStatistics,
    gameList
  } from '@/api/task'

  import { toSQLLine } from '@/utils/stringFun'
  import { ref } from 'vue'

  
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const tableData1 = ref([])
  const searchInfo = ref({})
  
  const onReset = () => {
    searchInfo.value = {}
  }
  // 关闭弹窗
  
  const dialogFormVisible = ref(false)
  const closeDialog = () => {
    dialogFormVisible.value = false
  }

  // 搜索
  
  const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    getTableData()
  }
  
  // 分页
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }
  
  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }
  
  // 排序
  const sortChange = ({ prop, order }) => {
    if (prop) {
      if (prop === 'id') {
        prop = 'id'
      }
      searchInfo.value.orderKey = toSQLLine(prop)
      searchInfo.value.desc = order === 'descending'
    }
    getTableData()
  }
  
  const selectGameInfoFunc = async(row) => {
    const res = await gameList({ user: row.user,game_port_id:row.game_port_id,date:searchInfo.value.create_date })
    tableData1.value = res.data.list
    dialogFormVisible.value = true
  }

  // 查询
  const getTableData = async() => {
    const table = await gameStatistics({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
      tableData.value = table.data.list
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
      getSpanArr(table.data.list)
    }
  }
  let spanArr = []
  const getSpanArr = (data) => {
    spanArr = []
    var pos = 0
    for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            spanArr.push(1);
            pos = 0
          } else {
            if (data[i].user === data[i - 1].user) {
              spanArr[pos] += 1;
              spanArr.push(0);
            } else {
              spanArr.push(1);
              pos = i;
            }
          }
        }
        console.log(spanArr)  
  }

  const objectSpanMethod = (row) => {
    if (row.columnIndex === 0) {
          const rowspan = spanArr[row.rowIndex];
          const colspan = rowspan > 0 ? 1 : 0;
          return {
            rowspan: rowspan,
            colspan: colspan
          }
        }
  }
  
  getTableData()
  
  
  </script>
  
  <style scoped lang="scss">
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
  </style>
  