<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="rechargeDataAA.list">
            <el-table-column prop="userId" label="ID"></el-table-column>
            <el-table-column label="头像" width="200">
                <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="signInNum" label="总签到人数"></el-table-column>
            <el-table-column prop="awardAmount" label="已发放奖励总金额"></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewUserDetails(scope.row)">查看用户详情</el-button>
                    <el-button type="text" @click="rewardDetails(scope.row)">奖励详情</el-button>
                    <el-button type="text" @click="signInDetails(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="rechargeDataAA.limit" :current-page="rechargeDataAA.page"
                layout="total,sizes, prev, pager, next,jumper" :total="rechargeDataAA.totalCount">
            </el-pagination>
        </div>
        <!-- 奖励详情 -->
        <el-dialog title="奖励详情" :visible.sync="dialogVisible" width="50%">
            <div>奖励发放金额合计：{{ rechargeDataBB.totalCount }} </div>
            <el-table :data="rechargeDataBB.list">
                <el-table-column prop="userId" label="ID"></el-table-column>
                <el-table-column prop="amount" label="发放金额"></el-table-column>
                <el-table-column prop="userPhone" 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="handleSizeChange4BB" @current-change="handleCurrentChange4BB"
                    :page-sizes="[10, 20, 30, 40]" :page-size="rechargeDataCC.limit" :current-page="rechargeDataCC.page"
                    layout="total,sizes, prev, pager, next,jumper" :total="rechargeDataCC.totalCount">
                </el-pagination>
            </div>
        </el-dialog>
        <!-- 签到详情 -->
        <el-dialog title="签到详情" :visible.sync="dialogVisibles" width="50%">
            <div><span>签到人数合计：{{ rechargeDataCC.totalCount }}</span> <span>实名人数合计：{{
                rechargeDataCC.totalCount }}</span> </div>
            <el-table :data="rechargeDataCC.list">
                <el-table-column prop="userId" label="ID"></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="userName" label="实名信息">
                    <template slot-scope="scope">
                        <div>姓名：{{ scope.row.realName }}</div>
                        <div>身份证号：{{ scope.row.idCardNo }}</div>
                        <div>银行卡号：{{ scope.row.bankCardNo }}</div>
                        <div>开户行：{{ scope.row.bankBranch }}</div>
                    </template>
                </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="handleSizeChange4CC" @current-change="handleCurrentChange4CC"
                    :page-sizes="[10, 20, 30, 40]" :page-size="rechargeDataCC.limit" :current-page="rechargeDataCC.page"
                    layout="total,sizes, prev, pager, next,jumper" :total="rechargeDataCC.totalCount">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rewardDetailsList: [], // 奖励详情列表
            rewardtotalPage: 0, // 奖励详情总页数
            signInDetailsList: [], // 签到详情列表
            signInDetailsTotalPage: 0, // 签到详情总页数
            formInline: {
                keywords: ''
            },
            page: 1,
            limit: 10,
            rechargeDataAA: {
                totalCount: 0,
                list: [],
                page: 1,
                limit: 10,
            },
            rechargeDataBB: {
                totalCount: 0,
                list: [],
                page: 1,
                limit: 10,
            },
            rechargeDataCC: {
                totalCount: 0,
                list: [],
                page: 1,
                limit: 10,
            },
            dialogVisible: false,// 控制奖励详情弹窗的显示与隐藏
            dialogVisibles: false // 控制签到详情弹窗的显示与隐藏
        }
    },
    mounted() {
        this.getRechargeData()
    },
    methods: {
        viewUserDetails(item) {
            this.$router.push({ path: '/userDetail', query: { userId: item.userId, active: 'first' } })
        },
        rewardDetails(item) {
            if (item) {
                this.rechargeDataBB.itemUserId = item.userId
            }
            this.$http.get('/ext/sys/invite/friend/award/detail/page', {
                params: {
                    page: this.rechargeDataBB.page,
                    limit: this.rechargeDataBB.limit,
                    userId: this.rechargeDataBB.itemUserId
                }
            }).then(response => {
                if (response.data.code === 0) {
                    this.rechargeDataBB.list = response.data.data.list
                    this.rechargeDataBB.totalCount = response.data.data.totalCount
                    this.dialogVisible = true
                } else {
                    this.$message.error(response.data.message)
                }
            }).catch(error => {
                console.error(error)
                this.$message.error('获取数据失败')
            })
        },
        signInDetails(item) {
            if (item) {
                this.rechargeDataCC.itemUserId = item.userId
            }
            this.$http.get('/ext/sys/invite/friend/signIn/page', {
                params: {
                    page: this.rechargeDataCC.page,
                    limit: this.rechargeDataCC.limit,
                    userId: this.rechargeDataCC.itemUserId
                }
            }).then(response => {
                if (response.data.code === 0) {
                    this.rechargeDataCC.list = response.data.data.list
                    this.rechargeDataCC.totalCount = response.data.data.totalCount
                    this.dialogVisibles = true
                } else {
                    this.$message.error(response.data.message)
                }
            }).catch(error => {
                console.error(error)
                this.$message.error('获取数据失败')
            })
        },
        onSubmit() {
            this.rechargeDataAA.page = 1
            this.rechargeDataAA.limit = 10
            this.getRechargeData()
        },
        reset() {
            this.formInline = {
                keywords: ''
            }
            this.getRechargeData()
        },
        getRechargeData() {
            this.$http.get('/ext/sys/invite/friend/award/page', {
                params: {
                    page: this.rechargeDataAA.page,
                    limit: this.rechargeDataAA.limit,
                    keywords: this.formInline.keywords
                }
            }).then(response => {
                if (response.data.code === 0) {
                    this.rechargeDataAA.list = response.data.data.list
                    this.rechargeDataAA.totalCount = response.data.data.totalCount
                } else {
                    this.$message.error(response.data.message)
                }
            }).catch(error => {
                console.error(error)
                this.$message.error('获取数据失败')
            })
        },
        handleSizeChange4(val) {
            this.rechargeDataAA.limit = val
            this.rechargeDataAA.page = 1
            this.getRechargeData()
        },
        handleCurrentChange4(val) {
            this.rechargeDataAA.page = val
            this.getRechargeData()
        },
        handleSizeChange4BB(val) {
            this.rechargeDataBB.limit = val
            this.rechargeDataBB.page = 1
            this.rewardDetails()
        },
        handleCurrentChange4BB(val) {
            this.rechargeDataBB.page = val
            this.rewardDetails()
        },
        handleSizeChange4CC(val) {
            this.rechargeDataCC.limit = val
            this.rechargeDataCC.page = 1
            this.signInDetails()
        },
        handleCurrentChange4CC(val) {
            this.rechargeDataCC.page = val
            this.signInDetails()
        }


    }
}
</script>