
<script setup>
// 引入依赖
import api from '@/api/userManage'
// import capi from '@/api/course'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
// import _ from 'lodash'
// import { toSQLLine } from '@/utils/stringFun'
// import WarningBar from '@/components/warningBar/warningBar.vue'
// import ckEditor from '@/components/richText/ckEditor5.vue'
import {ref,onMounted } from 'vue'
// import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 变量
const typeList = custom.getExercisesTypeList()
const queryParams = ref({
  page:1,
  pageSize:10,
  type:'',
  deal_time:''
})
const tableData = ref([])
const total = ref(0)
const dealTypeList = ref([
  {
    name:'课程',
    value:1
  },{
    name:'测试',
    value:2
  },
])
const deal_types = ref([])
const std_price_arr = ['balance','consume']
// 生命周期
onMounted(() => {
  queryParams.value.id = parseInt(route.params.user_id)
  deal_types.value = custom.getDealType()
  getDealMoneyList()
})
// 方法
async function getDealMoneyList() {
  const res = await api.getDealMoneyList(queryParams.value)
  if(res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
    console.log(res.data)
    for(let item of tableData.value) {
      for(let prop in item) {
        if(std_price_arr.includes(prop)) {
          // console.log(111)
          item[prop] = Number((item[prop]/100).toFixed(2))
        }
      }
    }
    
  }
}
function onSubmit() {
  getDealMoneyList()
}
const onReset = () => {
  queryParams.value = {
    page:1,
    pageSize:10,
    type:'',
    deal_time:''
  }
  queryParams.value.id = parseInt(route.params.user_id)
}
function handleCurrentChange(val) {
  queryParams.value.page = val
  getDealMoneyList()
}
function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getDealMoneyList()
}
function getTypeName(type) {
  return deal_types.value.filter((item,i) => {
    return item.value == type
  })[0].name
}
</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.type" clearable placeholder="请选择">
            <el-option
              v-for="item in deal_types"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="交易时间">
           <el-date-picker class="oi-item" style="margin-left:5px"
            v-model="queryParams.deal_time"
            type="date"
            placeholder="交易时间"
            format="YYYY-MM-DD"
            value-format="x"
           />
        </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">
        <el-table-column align="left" label="交易单号" min-width="150" prop="wallet_log_id" />
        <el-table-column align="left" label="类别" min-width="150">
          <template #default="scope">
            {{getTypeName(scope.row.wallet_log_type)}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="交易时间" min-width="150" >
          <template #default="scope">
            {{formatDate(scope.row.CreatedAt)}}
          </template>
        </el-table-column>
<!--        <el-table-column align="left" label="交易方式" min-width="150" prop="subject" />-->
        <el-table-column align="left" label="交易详情" min-width="150" prop="desc" />
        <el-table-column align="left" label="交易金额" min-width="150" prop="consume" />
        <el-table-column align="left" label="资产余额" min-width="150" prop="balance" />

      </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">
  .option-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
</style>
