<template>
    <div v-loading="loading">
        <div class="white-box">
            <div class="filter-box">
                <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
            </div>
            <el-table class="table-box" ref="multipleTable" :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()" @selection-change="handleSelectionChange">
               <!-- <el-table-column fixed type="selection" width="55" v-if="tableHeaders" :selectable="checkSelectable"></el-table-column>-->
                <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''" :prop="tableHeader.other.prop ? tableHeader.other.prop : null">
                    <template slot-scope="scope">
                        <template v-if="scope.row[tableHeader.index].other.tag" >
                            <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
                        </template>
                        <template v-else>
                            <div v-html="scope.row[tableHeader.index].value"></div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                    <el-button type="success" size="small" @click="handleGroupManage(scope.row)" >
                        状态管理
                    </el-button>
                </template></el-table-column>
                <el-table-column label="查看凭证">


                        <template slot-scope="scope">
                            <el-button type="success" size="small" @click="handleInvoiceShow(scope.row)"
                                       v-if="scope.row.AUDIT_STATUS!=='0'">查看凭证
                            </el-button>
                        </template>


                </el-table-column>

            </el-table>
            <div class="white-box-footer">
                <el-button type="success" size="small" @click="handleExport"
                           v-show="permission.hasPermission(`finance/recharge-export`)">导出Excel
                </el-button>


                <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
            </div>
            <el-dialog title="查看充值凭证" :visible.sync="dialogInvoiceVisible">
                <div v-loading="dialogInvoiceLoading">
                    <a :href="invoiceUrl" target="_blank"><img :src="urlimg" alt="" style="max-width: 100%"></a>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogInvoiceVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import baseInfo from '@/utils/baseInfo'
    import FilterUser from '../../components/FilterUser'
    import permission from '@/utils/permission'
    import Pagination from '@/components/Pagination'
    import filterHelper from '@/utils/filterHelper'
    import {FRONTEND_SERVER} from '@/utils/config'
    import store from './../../utils/vuexStore'
    export default {
        name: 'recharge',
        components: {FilterUser,Pagination},
        mounted () {
            this.getData()
        },

        data () {
            return {
                tableHeaders: null,
                tableData: null,
                loading: true,
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                multipleSelection: [],
                tool: tool,
                permission: permission,
                filterTypes: {},
                filterModel: {},
                value:[],
                selectedIds:'',
                dialogInvoiceVisible: false,
                dialogInvoiceLoading: false,
                invoiceUrl:'',
                urlimg:''
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleCurrentChange (page) {
                this.getData(page, this.pageSize)
            },
            handleSizeChange (pageSize) {
                this.getData(this.currentPage, pageSize)
            },
            handleFilterUser(filterData){
                filterHelper.handleFilterUser(this, filterData)
            },
            handleFilter() {
                this.getData()
            },
            checkSelectable(row) {
                return row.DONT_DEL !== '1'
            },
            getData (page, pageSize) {
                let filterData = this.filterModel
                let vueObj = this
                network.getPageData(this, 'finance/recharge', page, pageSize, this.filterModel, response=>{
                    console.log(response)
                    vueObj.allData = response;
                    vueObj.filterTypes = response.filterTypes;
                    selectedIds = vueObj.allData.ID;
                    console.log(selectedIds)

                    console.log(vueObj.filterTypes)
                    let settingObj=this. vueObj.allData;
                    let settingArr = Object.keys(settingObj).map(key => {
                        //console.log(key); //为每个键名
                        return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    } );
                    this.tableData=settingArr;
                })
            },
            handleExport(){
                this.$confirm(`确定要导出当前数据吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return network.getData(`finance/recharge-export`, this.filterModel)
                }).then(response => {
                    this.$message({
                    message: response,
                    type: 'success'
                })
            }).catch(response => {

                })
            },
            handleInvoiceShow(row) {
                this.dialogInvoiceLoading = true
                this.uploadId = row.ID
                this.dialogInvoiceVisible = true

                network.getData('finance/recharge', {id: this.uploadId}).then(response => {
                    console.log(response)
                    this.dialogInvoiceLoading = false
                    let invoiceUrl = response.list;
                    console.log(row)
                    this.urlimg=row.BANK_PROVE
                    console.log(this.urlimg)

                })
            },

       /* handlestate(){
            this.$router.push({path: `/finance/recharge-status`})
        },*/

            handleGroupManage(row) {

               /* if (this.multipleSelection.length < 1) {
                    this.$message({
                        message: '请勾选要操作的会员',
                        type: 'warning'
                    })
                    return
                }else{
                    if(this.multipleSelection.length > 1){
                        this.$message({
                            message: '只能选择一个',
                            type: 'warning'
                        })
                        return
                    }
                }*/

                    this.$router.push({
                        path: `/finance/recharge-status`,
                        query: {
                            mallCode: row
                        }
                    })



            },
        },

    }

</script>

<style scoped>
    .table-box .el-form-item__label {
        width: 100px;
        color: #99a9bf;
    }

    .table-box .el-form-item {
        width: 30%;
        margin-right: 0;
        margin-bottom: 0;
    }
    .el-button--small, .el-button--small.is-round {
        padding: 9px 5px;
    }
</style>
