<template>
    <div>
        <div style="display: inline-block;">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户昵称/手机号">
                    <el-input v-model="formInline.keywords" placeholder="请输入用户昵称/手机号" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
                    <el-button icon="Refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="rechargeData.list">
            <el-table-column prop="userId" label="ID"></el-table-column>
            <el-table-column prop="avatar" label="头像">
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%;" />
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户昵称"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="todayUnlocked" label="今日订单数">
            </el-table-column>
            <el-table-column prop="todayDrawCount" label="当日抽奖次数">
            </el-table-column>
            <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="rewardDetails(scope.row)">查看抽奖详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange4" @current-change="handleCurrentChange4"
                :page-sizes="[10, 20, 30, 40]" :page-size="rechargeData.limit" :current-page="rechargeData.page"
                layout="total,sizes, prev, pager, next,jumper" :total="rechargeData.totalCount">
            </el-pagination>
        </div>
        <!-- 详情 -->
        <el-dialog title="抽奖详情" :visible.sync="dialogVisible" width="50%">
            <div>抽奖次数合计:{{ rechargeDataA.totalCount }} </div>
            <el-table :data="rechargeDataA.list">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="name" label="抽奖结果"></el-table-column>
                <el-table-column prop="number" label="金额"></el-table-column>
                <el-table-column prop="createTime" label="抽奖时间"></el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange4A" @current-change="handleCurrentChange4A"
                    :page-sizes="[10, 20, 30, 40]" :page-size="rechargeDataA.limit" :current-page="rechargeDataA.page"
                    layout="total,sizes, prev, pager, next,jumper" :total="rechargeDataA.totalCount">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rechargeDataList: [],
            formInline: {
                keywords: ''
            },
            rechargeData: {
                totalCount: 0,
                list: [],
                page: 1,
                limit: 10,
            },
            rechargeDataA: {
                totalCount: 0,
                list: [],
                page: 1,
                limit: 10,
                itemUserId: ''
            },
            list: [],
            dialogVisible: false,
        }
    },
    mounted() {
        this.getRechargeData()
    },
    methods: {
        goUrl(item) {
            this.$router.push({ path: '/orderCenter', query: { userName: item.userName } })
        },
        onSubmit() {
            this.rechargeData.page = 1
            this.rechargeData.limit = 10
            this.getRechargeData()
        }, reset() {
            this.formInline = {
                keywords: ''
            }
            this.getRechargeData()
        },
        getRechargeData() {
            this.$http.get('/ext/sys/lottery/count/query/page', {
                params: {
                    page: this.rechargeData.page,
                    limit: this.rechargeData.limit,
                    keywords: this.formInline.keywords
                }
            }).then(response => {
                if (response.data.code === 0) {
                    this.rechargeData.list = response.data.data.list
                    this.rechargeData.totalCount = response.data.data.totalCount
                    // this.rechargeData = response.data.data
                } else {
                    this.$message.error(response.data.msg)
                }
            }).catch(error => {
                console.error(error)
            })
        }, rewardDetails(item) {
            if (item) {
                this.rechargeDataA.itemUserId = item.userId
            }
            this.$http.get('/ext/sys/lottery/detail/page', {
                params: {
                    page: this.rechargeDataA.page,
                    limit: this.rechargeDataA.limit,
                    userId: this.rechargeDataA.itemUserId
                }
            }).then(response => {
                if (response.data.code === 0) {
                    this.rechargeDataA.list = response.data.data.list
                    this.rechargeDataA.totalCount = response.data.data.totalCount

                    this.dialogVisible = true
                } else {
                    this.$message.error(response.data.message)
                }
            }).catch(error => {
                console.error(error)
                this.$message.error('获取数据失败')
            })
        },


        handleSizeChange4(val) {
            this.rechargeData.limit = val
            this.rechargeData.page = 1
            this.getRechargeData()
        },
        handleCurrentChange4(val) {
            this.rechargeData.page = val
            this.getRechargeData()
        },
        handleSizeChange4A(val) {
            this.rechargeDataA.limit = val
            this.rechargeDataA.page = 1
            this.rewardDetails()
        },
        handleCurrentChange4A(val) {
            console.log(val, '11111111111')
            this.rechargeDataA.page = val
            this.rewardDetails()
        }
    }
}
</script>