<template>
  <div 
  v-loading="loading"
  :element-loading-text="$t('dataLoading')">
    <Group>
    <div style="display: flex;">
      <el-form style="flex: 1; display: flex;" label-suffix="：" :model="query">
        <el-form-item :label="$t('name')" style="width: 33%;">
          <el-input v-model="query.username" :placeholder="$t('userPlaceholder')"></el-input>
        </el-form-item>
      </el-form>
      <el-button 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 type="selection" width="55" /> -->
            <!-- <el-table-column label="头像" prop="icon">
              <template #default="scope">
                <el-avatar :size="60" :src="scope.row.icon?scope.row.icon:'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'">
              </el-avatar>
              </template>
            </el-table-column> -->
            <!-- <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('telephone')" prop="phone"></el-table-column>
            <!-- <el-table-column :label="$t('mailbox')" prop="email"></el-table-column> -->
            <el-table-column :label="$t('registrationTime')" prop="createTime"></el-table-column>
            <el-table-column :label="$t('coin')" prop="coin"></el-table-column>
            <el-table-column :label="$t('controls')" width="150">
              <template #default="scope"> 
                <div  style="display: flex; flex-direction: column;justify-content: center; align-items: center;">
                  <el-button text type='primary' size="small"style="margin-left: 12px;" @click="topUp(scope.row)">{{ $t('topUp') }}</el-button>
                </div>
              </template>
            </el-table-column>
         </template>
      </Table>
  </Group>
  <el-dialog 
  :title="$t('topUp')"
  v-model="dialogVisible"
  append-to-body
  close-on-click-modal>
  <el-form :model="formData" ref="formRef" label-suffix=":">
    <el-form-item :label="$t('topUp')">
      <el-input v-model="formData.coinValue" :placeholder="$t('pleaseEnter')" clearable ></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
      <el-button @click="resetForm" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small">确 定</el-button>
    </template>
</el-dialog>
  </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';
import { cloneDeep } from 'lodash';
import { ElMessage } from 'element-plus';
import i18n from '@/utils/i18n'
// 查询相关
const query = reactive({
  username: ''
});
const loading = ref(false);
const dialogVisible = ref(false);
const tableData = ref([]);
const formRef = ref(null)
const formData = reactive({
  coinValue:''
})
let rowClone = {}
// 表格相关
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 resetForm = ()=>{
  formRef.value.resetFields()
  dialogVisible.value = false
  formData.coinValue = ''
}
const feachTableData = async() => {
  loading.value = true
  const params = {
      // ...query,
      ...pagination
    }
    try {
      const res = await request('post', '/admin/user/getUserList', params)
      if (res.code === 200) {
        loading.value = false
        pagination.total = res.data.total
        tableData.value = res.data.records
        // tableData.value = [{username:'mock',nickName:'昵称',phone:18688888888,email:'123456@163.com',createTime:'2025-01-16 8:28:56'}]
      } else {
        loading.value = false
      }
      
    } catch (error) {
      console.log(error, 'error');
      loading.value = false
    }
}
const submit = async() => {
  console.log(rowClone, 'row');
  
  try {
      const res = await request('post', 'admin/pay/rechargeByHand',{userId:rowClone.id, coin:Number(formData.coinValue)})
      if (res.code === 200) {
        resetForm()
        ElMessage.success(i18n.global.t('successfulOperation'))
      }
  } catch (error) {
    dialogVisible.value = false
  }
}
const topUp = async(row) => {
  dialogVisible.value = true
  rowClone = cloneDeep(row)
}
onMounted(() => {
  feachTableData()
})
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</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>