<template>
    <a-card class="container">
        <div class="info">
            <a-row :gutter="[16,16]">
                <a-col :span="4" class="padding_8">
                    <div class="title">
                        协议单位
                    </div>
                    <div class="value">
                        {{agreementUnitInfo.customerName}}
                        <a-tag color="cyan">
                            {{agreementUnitInfo.accountStatus_dictText}}
                        </a-tag>
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        客户类型
                    </div>
                    <div class="value">
                        {{agreementUnitInfo.customerType_dictText}}
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        消费
                    </div>
                    <div class="value">
                        {{accountModel.consume}}
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        收款
                    </div>
                    <div class="value">
                        {{accountModel.payment}}
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        记账额度
                    </div>
                    <div class="value">
                        {{agreementUnitInfo.bookkeeping == null || agreementUnitInfo.bookkeeping == 0?'无限制':agreementUnitInfo.bookkeeping}}
                    </div>
                </a-col>
                <a-col :span="4" class="padding_8">
                    <div class="title">
                        已用额度
                    </div>
                    <div class="value">
                        {{accountModel.used}}
                    </div>
                </a-col>
                <a-col :span="4" class="bak_red padding_8 border_radius_10">
                    <div class="title">
                        剩余额度
                    </div>
                    <div class="value">
                        {{accountModel.surplus}}
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="oper">

        </div>
        <div class="cotent">

        </div>
    </a-card>
</template>

<script>
    export default {
        name: 'agreementAccount',
        data:{
            agreementUnitInfo:{},
            accountModel:{
                consume:'0',
                payment:'0',
                used:'0',
                surplus:'0'
            }
        },
        activated(){
            console.log(99999)
            var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
            this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);
            this.$forceUpdate()
        },
        created() {
            var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
            this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);

            var temp = {
                consume:'0',
                payment:'0',
                used:'0',
                surplus:'0'
            }
            this.accountModel = Object.assign({}, temp);
            // console.log(agreementUnitInfo.customerName)
        }
    }
</script>

<style scoped>
    .info{
        text-align: center;
    }
    .title {
        font-size: 16px;
        font-weight: 500;
    }
    .value{
        padding-top: 10px;
    }
    .bak_red{
        background-color: red;
    }
    .padding_8{
        padding: 8px 0;
        border-radius: 10px;
    }
    .border_radius_10{
        border-radius: 10px;
    }
</style>
