
<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()
// import * as echarts from 'echarts';
// 变量
const queryParams = ref({
  page:1,
  pageSize:10,
  id:0,
  type:2, // 是否中奖
  time:'', // 抽经时间
  current_page:1
})
const tableData = ref([])
const total = ref(0)
const typeList = ref([
  {
    name:'已中奖',
    value:1
  },
  {
    name:'未中奖',
    value:2
  }
])
// 生命周期
onMounted(() => {
  queryParams.value.id = parseInt(route.params.user_id)
  getRaffleDetailList()
})
// 方法
async function getRaffleDetailList() {
  const res = await api.getAuctionDetailList(queryParams.value)
  if(res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
function onSubmit() {
  getRaffleDetailList()
}
const onReset = () => {
  queryParams.value = {
    page:1,
    pageSize:10,
    user_id:0,
    type:'', // 是否中奖
    time:'', // 抽经时间
    current_page:1
  }
}
function handleCurrentChange(val) {
  queryParams.value.page = val
  getRaffleDetailList()
}
function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getRaffleDetailList()
}
</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.subject" clearable placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :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.last_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" >
          <template #default="scope">
            {{formatDate(scope.row.CreatedAt)}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="抽奖编号" min-width="150" prop="name">
          <template #default="scope">
            {{custom.getExercisesTypeName(scope.row.type)}}
          </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="teacher_id" />
        <el-table-column align="left" label="参与人数" min-width="150" prop="status" />
        <el-table-column align="left" label="是否获奖" min-width="150" prop="status" />
        <el-table-column align="left" label="抽奖消费" min-width="150" prop="status" />
      </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>
