<template>
    
    <div>
      <div class="gva-search-box">
      </div>
      <div class="gva-table-box">
        <el-button @click="resetDateFilter">{{year}} 年</el-button>
        <el-table :data="tableData" @sort-change="sortChange">
          
          <el-table-column align="left" label="月份" min-width="150" prop="task_month" sortable="custom" />
          <el-table-column align="left" label="完成新增" min-width="150" prop="new_complete" />
          <el-table-column align="left" label="完成活跃" min-width="150" prop="retained_complete"/>
          <el-table-column align="left" label="完成付费" min-width="150" prop="pay_complete" />
        </el-table>
  
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MonthTotal',
  }
  </script>
  
  <script setup>
  import {
    monthStatistics,

  } 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 searchInfo = ref({})
  const year = ref('')

  const onReset = () => {
    searchInfo.value = {}
  }

  // 搜索
  
  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 getTableData = async() => {
    const table = await monthStatistics({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
      tableData.value = table.data.list
      year.value = table.data.list[0].task_year
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }
  
  getTableData()
  
  const searchStatusOptions = ref([
 {
    value: '',
    label: '总数据',
  },
  {
    value: 'user',
    label: '按负责人',
  },
  {
    value: 'game_port_id',
    label: '按游戏端口',
  }
])
  
  </script>
  
  <style scoped lang="scss">
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
  </style>
  