<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item prop="phoneNumber">
                <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" fit highlight-current-row border stripe :data="orderList">
            <el-table-column label="客户姓名" align="center" prop="userName" />
            <el-table-column label="客户手机号" align="center" prop="phoneNumber" />
            <el-table-column label="总余额（元）" align="center">
                <template slot-scope="scope">
                    {{ scope.row.rechargeBalance + scope.row.giveBalance + scope.row.welfareBalance }}
                </template>
            </el-table-column>
            <el-table-column label="现金余额（元）" align="center" prop="rechargeBalance">
                <template slot-scope="scope">
                    {{ scope.row.rechargeBalance ? scope.row.rechargeBalance : '0' }}
                </template>
            </el-table-column>
            <el-table-column label="赠送余额（元）" align="center" prop="giveBalance">
                <template slot-scope="scope">
                    {{ scope.row.giveBalance ? scope.row.giveBalance : '0' }}
                </template>
            </el-table-column>
            <el-table-column label="福利余额（元）" align="center" prop="welfareBalance">
                <template slot-scope="scope">
                    {{ scope.row.welfareBalance ? scope.row.welfareBalance : '0' }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleDetail(scope.row)">充值明细</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改活动订单对话框 -->
        <el-dialog :title="title" :visible.sync="open" size="70%">
            <el-timeline>
                <el-descriptions style="margin-right: 20px" :title="'姓名：' + userInfoVO.userName + '\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  余额：' + userInfoVO.totalBalance + '\u00a0元'" v-if="userInfoVO" />
            </el-timeline>
            <el-timeline v-for="detail in payDetailList" :key="detail.id">
                <el-timeline-item :timestamp="detail.storeName ? '充值时间：' + detail.createTime + '\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 充值渠道：' + detail.storeName : '充值时间：' + detail.createTime + '\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  充值渠道：APP'" placement="top">
                    <el-card style="width: 90%">
                        <el-descriptions :column="4">
                            <el-descriptions-item label="支付方式">
                                <dict-tag :options="dict.type.recharge_pay_type" :value="detail.payType" />
                            </el-descriptions-item>
                            <el-descriptions-item label="充值金额">{{ detail.rechargeAmount }} 元</el-descriptions-item>
                            <el-descriptions-item label="赠送金额">{{ detail.giveAmount }} 元</el-descriptions-item>
                            <el-descriptions-item label="福利金额">{{ detail.welfareAmount }} 元</el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>

<script>
import { getRechargeRecordByUserId } from '@/api/recharge/order'
import { allOrg } from '@/api/system/store'
import { getUserBalanceCountList } from '@/api/recharge/card'

export default {
    name: 'BalanceCount',
    dicts: ['recharge_pay_type', 'recharge_order_status'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 充值订单表格数据
            orderList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: null,
                phoneNumber: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            queryCreateTime: null,
            userInfoVO: null,
            storeList: [],
            payDetailList: []
        }
    },
    created() {
        allOrg().then((res) => {
            this.orgList = res.data
            this.orgList.forEach((org) => {
                if (org.sourceType == '02') {
                    this.storeList.push(org)
                }
            })
        })
        this.getList()
    },
    methods: {
        /** 查询充值订单列表 */
        getList() {
            this.loading = true
            getUserBalanceCountList(this.queryParams).then((response) => {
                this.orderList = response.data.records
                this.total = response.data.total
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {}
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },

        /** 支付明细详情 */
        handleDetail(row) {
            this.reset()
            const id = row.userId
            getRechargeRecordByUserId(id).then((response) => {
                this.payDetailList = response.data
                console.log(this.payDetailList)
                if (this.payDetailList) {
                    this.userInfoVO = this.payDetailList[0]
                    console.log(this.userInfoVO)
                }
                this.open = true
                this.title = '充值明细详情'
            })
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        }
    }
}
</script>
