<template>
  <div 
  v-loading="loading"
  :element-loading-text="$t('dataLoading')">
    <Group>
    <div style="display: flex;">
      <el-form style="flex: 1; display: flex; flex-wrap: wrap;" label-suffix=":" :model="query">
        <el-form-item :label="$t('name')" class='label'>
          <el-input v-model="query.username" :placeholder="$t('userPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('roomNumber')" class='label'>
          <el-input v-model="query.roomnumber" :placeholder="$t('roomPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('session')" class='label'>
          <el-select v-model="query.changci" clearable >
            <el-option :label="$t('primaryField')" value="1"></el-option>
            <el-option :label="$t('intermediateField')" value="2"></el-option>
            <el-option :label="$t('higherOrderField')" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('tiem')" class='label'>
          <div style="display: flex;">
            <el-date-picker
          v-model="value2"
          type="dates"
          :placeholder="$t('startDate')"
        />
        <span>至</span>
        <el-date-picker
          v-model="value2"
          type="dates"
          :placeholder="$t('endDate')"
        />
          </div>
        </el-form-item>
      </el-form>
      <el-button style="align-self: center;" type="primary" @click="searchHandler">{{$t('inquire')}}</el-button>
    </div>
  </Group>
  <Group :show-header="false">
      <Table 
      :data="tableData"
      :pagination="pagination"
      @changePage="changePage"
      @changePageSize="changePageSize"
      >
        <template #table>
            <el-table-column :label="$t('loginName')" prop="username"></el-table-column>
            <el-table-column :label="$t('nickname')" prop="nickname"></el-table-column>
            <el-table-column :label="$t('roomNumber')" prop="roomnumber"></el-table-column>
            <el-table-column :label="$t('session')" prop="changci"></el-table-column>
            <el-table-column :label="$t('startTime')" prop="starttime"></el-table-column>
            <el-table-column :label="$t('endTime')" prop="endtime"></el-table-column>
            <el-table-column :label="$t('disburse')" prop="zhichu"></el-table-column>
            <el-table-column :label="$t('royalty')" prop="ticheng"></el-table-column>
         </template>
         <template #sum>
          <div class="sum">
            <span class="text">{{ $t('totalExpenditure')}}：<span class="red">850000</span></span>
            <span class="text">{{$t('totalCommissions')}}：<span class="red">150000</span></span>
          </div>
          </template>
      </Table>
  </Group>
  </div>
</template>

<script setup  name="user">
import { ref, reactive, onMounted} from 'vue';
import Group from '@/components/group.vue';
import Table from '@/components/table.vue';
import request from '@/utils/request';
// 查询相关
const query = reactive({
  username: ''
});
const loading = ref(false);
const tableData = ref([]);
// 表格相关
const pagination = {
pageNo: 1,
pageSize: 10,
total: 0,
}
const changePage = (page) => {
  pagination.pageNo = page
  feachTableData()
}
const changePageSize = (pageSize) => {
  pagination.pageSize = pageSize
  feachTableData()
}
const searchHandler = () => {
  pagination.pageNo = 1
  feachTableData()
}
const feachTableData = async() => {
  loading.value = true
  const params = {
      // ...query,
      ...pagination
    }
    try {
      const res = await request('post', '/admin/user/getUserGameRecordList', params)
      if (res.code === 200) {
        loading.value = false
        pagination.total = res.data.total
        tableData.value = res.data.records
      } else {
        loading.value = false
      }
      
    } catch (error) {
      console.log(error, 'error');
      loading.value = false
    }
}
onMounted(() => {
  feachTableData()
})
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.label{
  width: 33%;
  padding-right: 8px;
  box-sizing: border-box;
}
.sum{
  background: #ebeaea64;
  text-align: end;
  padding-right: 18px;
  border-radius: 3px;
  .text{
    line-height: 36px;
    font-weight: 600;
    margin-right: 10px;
  }
  .red{
    color: red;
  }
}

</style>

<style lang="scss">
.el-table th, .el-table td {
  text-align: center !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 136px;
  height: 136px;
  text-align: center;
}
</style>