
<script setup>
// 引入依赖
import api from '@/api/userManage'
import capi from '@/api/course'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
// import { toSQLLine } from '@/utils/stringFun'
// import WarningBar from '@/components/warningBar/warningBar.vue'
// import coursePool from './components/coursePool.vue'
// import exercisesPool from '@/view/course/components/exercisesPool.vue'
import {ref,onMounted,provide } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import cityList from '@/utils/city.json';
// store
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
// 变量
// const path = ref(import.meta.env.VITE_BASE_API)
const queryParams = ref({
  page:1,
  pageSize:10,
  status:'',
  userId:'',
  userType:'',
  name:'',
  province:''
})
const tableData = ref([])
const total = ref(0)
const status_list = ref([
  {
    name:'审核中',
    value:1
  },
  {
    name:'同意',
    value:2
  },
  {
    name:'拒绝',
    value:3
  }
])
// 生命周期
onMounted(() => {
  getWithdrawList()
})
// 方法
async function getWithdrawList() {
  const res = await api.getWithdrawList(queryParams.value)
  if(res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
function onSubmit() {
  getWithdrawList()
}
const onReset = () => {
  queryParams.value = {
    page:1,
    pageSize:10,
    status:'',
    userId:'',
    userType:'',
    name:'',
    province:''
  }
}
function handleCurrentChange(val) {
  queryParams.value.page = val
  getWithdrawList()
}
function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getWithdrawList()
}
function viewUserFunc(row) { // 查看订单
  router.push({name:'viewUserManage',params:{id:row.user_id}})
}
function getStateName(state) {
  return status_list.value.filter((item,i) => {
    return item.value === state
  })[0].name
}
async function passFunc(row) { // 通过
  ElMessageBox.confirm('是否通过该提现申请?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(async() => {
    const res = await api.passWithdraw({
          withdraw_id:row.id
    })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '操作成功!'
      })
      getWithdrawList()
    }
  },() => {
  })
}
async function rejectFunc(row) { // 拒绝
  ElMessageBox.confirm('是否拒绝该提现申请?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(async() => {
    const res = await api.rejectWithdraw({
          withdraw_id:row.id
    })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '操作成功!'
      })
      getWithdrawList()
    }
  },() => {
  })
}
</script>
<template>
  <div>
    <!--    搜索框-->
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="queryParams">
        <el-form-item label="提现状态">
          <el-select v-model="queryParams.status" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in status_list"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区域">
          <el-select v-model="queryParams.province" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in cityList"
              :key="item.ProID"
              :label="item.name"
              :value="i"
            />
          </el-select>
        </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">
      <!--      批量操作-->
      <div class="gva-btn-list">
      </div>
      <!--      数据列表-->
      <el-table border :data="tableData">
        <el-table-column align="center" label="ID"  prop="user_id" sortable="custom" />
        <el-table-column align="center" label="头像" min-width="150">
          <template #default="scope">
            <img class="avatar-css" :src="scope.row.avatar" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" prop="name" />
        <el-table-column align="center" label="手机号" min-width="150" prop="phone" />
        <el-table-column align="center" label="余额" min-width="150" prop="balance" />
        <el-table-column align="center" label="提现金额" min-width="150" prop="count" />
        <el-table-column align="center" label="提现时间" min-width="150" >
          <template #default="scope">
            {{formatDate(scope.row.CreatedAt)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属省份" min-width="150">
          <template #default="scope">
            {{custom.getProvinceName(scope.row.province)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" min-width="150">
          <template #default="scope">
            {{getStateName(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button
              icon="view"
              size="small"
              type="primary"
              link
              @click="viewUserFunc(scope.row)"
            >查看</el-button>
            <el-button
              icon="check"
              size="small"
              type="primary"
              link
              @click="passFunc(scope.row)"
            >通过</el-button>
            <el-button
              icon="close"
              size="small"
              type="primary"
              link
              @click="rejectFunc(scope.row)"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="queryParams.page"
          :page-size="queryParams.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

  </div>
</template>
<style scoped lang="scss">
  .avatar-css{
    height: 100px;
    width: 150px;
  }
  .e-img{
    width: 150px;
    height: 100px;
  }
  .option-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
</style>
