<template>
    <div class="sellRegister">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">销售统计</h2>
        <section class="section">
            <div class="left">
                <el-button-group>
                    <el-button :type="btnFlag1?'primary':''" @click="btn_shift_1(true)">近一周</el-button>
                    <el-button :type="btnFlag1==false?'primary':''" @click="btn_shift_1(false)">近一月</el-button>
                </el-button-group>
                <EBuySellNum class="EBuySellNum"></EBuySellNum>
            </div>
            <aside class="aside">
                <h2>近一年销售记录</h2>
                <section class="middle">
                    <h4 class="title">累计销售</h4>
                    <div class="content">
                        <div class="num">348.2</div>
                        <span class="unit">万元</span>
                    </div>
                </section>
                <footer class="bottom">
                    <div class="cel">
                        当前月
                        <span class="num">32</span>
                        万
                    </div>
                    <div class="cel">
                        上个月
                        <span class="num">76</span>
                        万
                    </div>
                </footer>
            </aside>
        </section>
        <footer class="footer">
            <el-button-group>
                <el-button :type="btnFlag2?'primary':''" @click="btn_shift_2(true)">近一周</el-button>
                <el-button :type="btnFlag2==false?'primary':''" @click="btn_shift_2(false)">近一月</el-button>
            </el-button-group>
            <E-Saleroom></E-Saleroom>
        </footer>
    </div>
</template>

<script>
import EBuySellNum from "./charts/E-BuySellNum";
import ESaleroom from "./charts/E-Saleroom";

export default {
    name: "sellRegister",
    components: {
        EBuySellNum,
        ESaleroom
    },
    data() {
        return {
            btnFlag1: true,
            btnFlag2: true
        };
    },
    created() {},
    methods: {
        btn_shift_1(flag) {
            this.btnFlag1 = flag;
        },
        btn_shift_2(flag) {
            this.btnFlag2 = flag;
        }
    }
};
</script>

<style lang="scss" scoped>
.sellRegister {
    
    .section {
        padding: 0 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .EBuySellNum {
            width: 700px;
        }
        .aside {
            width: 500px;
            height: 300px;
            color: #eee;
            border-radius: 10px;
            padding: 14px 18px;
            background-color: #1f47a5;
            .middle {
                margin: 10% 0 0 0;
                .title {
                    padding-left: 10%;
                    font-size: 20px;
                }
                .content {
                    display: flex;
                    justify-content: center;
                    position: relative;
                    .num {
                        min-width: 200px;
                        text-align: right;
                        font-size: 50px;
                        font-weight: 600;
                        background-color: #0b2c8f;
                        border-radius: 8px;
                        padding: 6px;
                        margin: 8px 10px;
                    }
                    .unit {
                        font-size: 30px;
                        position: relative;
                        bottom: -45px;
                        right: 0;
                    }
                }
            }
            .bottom {
                display: flex;
                justify-content: center;
                font-size: 18px;
                .cel {
                    margin: 25px 15px;
                    .num {
                        font-size: 30px;
                    }
                }
            }
        }
    }
    .footer{
        padding: 0 5%;
    }
}
</style>