<template>
    <div class="main-content12 expense-wrap">
        <h3 class="pagetitle">余额管理</h3>
        <div class="flex-common">
            <div class="flex-between">
                <el-tabs v-model="totalType" @tab-click="handleClick">
                    <el-tab-pane label="余额充值" name="1"></el-tab-pane>
                    <el-tab-pane label="充值记录" name="2"></el-tab-pane>
                    <el-tab-pane label="退款记录" name="3"></el-tab-pane>
                </el-tabs>
                <div class="flex">
                </div>
            </div>
            <div class="mt24">
                <div class="flex-between w552 mt12">
                    <div class="wallet-choose">充值选择</div>
                    <div class="wallet-desc flex">设置通用余额提醒，防止余额不足，点此设置<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
                </div>

                <div class="flex gap24">
                    <div class="wallet-item wallet-item-active">
                        <div class="wallet-name">通用钱包</div>
                        <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
                    </div>
                    <div class="wallet-item">
                        <div class="wallet-name">通用钱包</div>
                        <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>


export default {
    components: {

    },
    props: {
        total_type: {
            type: String,
            default: '1'
        },
    },
    data() {
        return {
            totalType:'1',
            date: this.getNow(),
            tableLoading:false,

            walletList:[],


            siteNum: 1,
            tableKey: '',
            monthList:[],
            monthTotal:[],
            payList:[],
            nameList:[],
            topList:[],
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.totalType = this.total_type;

            this.handleClick()
        })
    },
    methods: {
        handleClickDetail(id){
            if(this.totalType == 2) this.$router.push(`/agent/statisticalDetails?uid=${id}&total_type=${this.totalType}&date=${this.date}`)
            if(this.totalType == 3) this.$router.push(`/agent/statisticalDetails?chktype=${id}&total_type=${this.totalType}&date=${this.date}`)
        },
        handleClicksiteRank(id){
            this.$router.push(`/agent/siteRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
        },
        handleClickserviceRank(id){
            this.$router.push(`/agent/serviceRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
        },
        handleClick(){
            this.monthList = []
            this.payList = []
            this.monthTotal = []
            this.nameList = []
            this.topList = []
            this.tableKey = Math.random();
            if(this.totalType == 1) this.getRechargeData()
            if(this.totalType == 2) this.getSiteStats()
            if(this.totalType == 3) this.getChktypeStats()
        },
        getRechargeData() {
            try {
                this.$http('POST', '/agentnew/ajax_get_recharge_data', {date: this.date}).then(response => {
                    this.$nextTick(() => {
                        this.walletList = response.data
                        console.log(response)
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        getSiteStats() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_site_stats', {date: this.date}).then(response => {
                    this.tableLoading = false
                    this.$nextTick(() => {
                        this.monthList = response.data.list
                        this.payList = response.data.pay_list
                        this.monthTotal = response.data.total
                        this.nameList = response.data.name_list
                        this.topList = response.data.top_list
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
        getChktypeStats() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => {
                    this.tableLoading = false
                    this.$nextTick(() => {
                        this.monthList = response.data.list
                        this.payList = response.data.pay_list
                        this.monthTotal = response.data.total
                        this.nameList = response.data.name_list
                        this.topList = response.data.top_list
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
    }
}

</script>
<style lang="scss" scoped>
.w552{
  width: 552px;
  letter-spacing: 0.08em;
}
.wallet-choose{
  font-size: 14px;
  color: #1E2226;
}
.wallet-desc{
  font-size: 12px;
  color: #8A9099;
}
.wallet-item{
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    padding: 16px 18px;
    width: 264px;
    letter-spacing: 0.08em;
    border-radius: 8px;
    background: #F2F7FF;

    .wallet-name{
      color: #006AFF;
      font-size: 14px;
      font-weight: bold;
    }
    .wallet-num{
      font-size: 12px;
      color: #626573;
    }
    .wallet-price{
      font-size: 22px;
      font-weight: bold;
      color: #626573;
    }
}

.wallet-item-active{
  background: #F2F7FF;
}

.gap24 {
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
  background-color: #E8F0FE; /* 背景色 */
  color: #006AFF; /* 文字颜色 */
  font-weight: 600;
}

.loss-profit{
    color: #FF4D4F;
}
.red{
  color: #FF4D4F;
}

.expense-wrap{
    .pagetitle {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.08em;
        color: #1E2226;
        margin-top: 8px;
    }
    .monthTotal-wrap{
        display: grid;
        grid-gap: 12px;
        grid-template-columns: repeat(auto-fit, 287px);
    }

    .loss-tip{
        width: 50px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFF1F0;
        box-sizing: border-box;
        border: 1px solid #FFA39E;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0.08em;
        color: #FF4D4F;
    }
    .loss-tip-empty{
        width: 50px;
        height: 24px;
        display: flex;
    }
    .total-item{
        padding: 14px 16px;
        font-size: 12px;
        letter-spacing: 0.03em;
        color: #23242B;
        box-sizing: border-box;
        border-radius: 4px;
        background: #F2F7FF;
        min-height: 153px;
        .price{
            text-align: left;
            font-size: 12px;
            font-weight: normal;
            line-height: 15px;
            letter-spacing: 0.08em;
            color: #1E2226;
            margin: 14px 0;
            b{
                font-size: 22px;
                line-height: 20px;
                letter-spacing: normal;
            }
        }
        .total-bottom{
            align-items: flex-start;
        }
    }
    .loss{
        background: #FFF1F0;
        .top-left b{
            color: #FF4D4F;
        }
    }
    .gain{
        background: #EFFFE0;
        .top-left b{
            color: #00C261;
        }
    }
}
</style>