<template>
    <div id="box">
        <div class="title">用户年龄+性别统计分布</div>
        <div class="container">
            <div class="num1">{{this.allNum}}</div>
            <div class="num2">{{this.menNum}}</div>
            <div class="num3">{{this.womenNum}}</div>
            <div class="title1">
                <span>用户年龄、性别比例分布</span>
            </div>
            <div class="title2">用户年龄、性别统计</div>
            <div class="com">
            <com/>
        </div>
            <div class="com1">
                <div class="man_pie">{{this.menProportion}}</div>
                <div class="women_pie">{{this.womenProportion}}</div>
                <div style="position:absolute;top:20%;right:15%">
                    <span class="man_size">男 (</span>
                    <span class="man_number">{{this.menNum}}</span>
                    <span class="man_unit">人)</span>
                </div>
                <com1 style="width: 50%"></com1>
                <div style="position:absolute;top:54%;right:15%">
                    <span class="women_size">女 (</span>
                    <span class="women_number">{{this.womenNum}}</span>
                    <span class="women_unit">人)</span>
                </div>
            </div>

            <div class="com2">
                <com2></com2>
                <span class="man">男</span>
                <span class="women">女</span>
                <span class="allnum">总数</span>
                <span class="n1">{{this.age18}}</span>
                <span class="n1 n2">{{this.age25}}</span>
                <span class="n1 n3">{{this.age30}}</span>
                <span class="n1 n4">{{this.age35}}</span>
                <span class="n1 n5">{{this.age40}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    const axios=require('axios');

    import com from "../pageview/page8";
    import com1 from "../pageview/page8-1";
    import com2 from "../pageview/page8-2";

    export default {
        components: {com,com1,com2},
        name: "Home",
        data() {
            return {
                menNum:'',
                menProportion:'',
                womenNum:'',
                womenProportion:'',
                allNum:'',
                age18:'',
                age25:'',
                age30:'',
                age35:'',
                age40:'',
            };
        },
        methods: {
            ageGroupFind(){
                axios.get('https://mz.tshe.cn/restauantCH/user/ageGroupFind')
                    .then(res=>{
                        let string=''
                        let s=''
                        res.data.forEach(item=>{
                           string = JSON.stringify(item.name).toString()
                                .split(':')[0];
                           s=string.substring(1,string.length-1);
                           if(s=='18-25岁'){
                               this.age18=item.value;
                           }
                            if(s=='25-30岁'){
                                this.age25=item.value;
                            }
                            if(s=='30-35岁'){
                                this.age30=item.value;
                            }
                            if(s=='35-40岁'){
                                this.age35=item.value;
                            }
                            if(s=='大于40岁'){
                                this.age40=item.value;
                            }
                        })
                    })
            }
        },
        created(){
            this.ageGroupFind();
            axios.get('https://mz.tshe.cn/restauantCH/user/getAgeSexInfo')
                .then(res=>{
                    res.data.forEach(item=>{
                        if(item.totalNum){
                            this.allNum=item.totalNum;
                        }
                        if(item.sex=="男"){
                            this.menNum=item.count;
                            this.menProportion=item.proportion;
                        }
                        if(item.sex=="女"){
                            this.womenNum=item.count;
                            this.womenProportion=item.proportion;
                        }
                    })
                })
        },
    };
</script>

<style scoped>
    #box {
        height: 80%;
        width: 60%;
        flex-wrap: wrap;
        /*display: flex;*/
    }

    .title {
        /*padding-top: 0.8%;*/
        color: #fec400;
        font-size: 1vw;
        font-weight: 900;
        padding-left: 28px;
        line-height: 5vh;
        background: url("../assets/br1/title_bj.png") no-repeat;
        background-size: 100% 100%;
        height: 5%;
        width: 350px;
    }

    .container {
        width: 83%;
        height: 93%;
        position: absolute; /*position:定位属性*/
        /* absolute:对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，
        则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。*/
        top: 7%;
        background: url("../assets/br1/bj1-3-1.png") no-repeat;
        background-size: 100% 100%;
    }

    .num1 {
        width: 29%;
        height: 13.5%;
        /* border: 1px solid red; */
        position: absolute;
        left: 1.5%;
        top: 2.5%;
        font-family: "AharoniBold";
        font-size: 80px;
        color: #fec400;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .num2 {
        width: 29%;
        height: 13.5%;
        /* border: 1px solid red; */
        position: absolute;
        left: 35.5%;
        top: 2.5%;
        font-family: "AharoniBold";
        font-size: 80px;
        color: #fec400;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .num3 {
        width: 29%;
        height: 13.5%;
        /* border: 1px solid red; */
        position: absolute;
        left: 69%;
        top: 2.5%;
        font-family: "AharoniBold";
        font-size: 80px;
        color: #fec400;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .title1 {
        color: #fff;
        position: absolute;
        font-family: "SYHT";
        font-size: 1vw;
        top: 34.5%;
        left: 15%;
        font-weight: 600;
        background: url("../assets/br1/tipbj.png") no-repeat;
        background-size: 100% 100%;
        /* border: 1px solid red; */
        width: 17%;
        height: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }

    .title2 {
        color: #fff;
        position: absolute;
        font-family: "SYHT";
        font-size: 1vw;
        top: 34.5%;
        left: 63%;
        font-weight: 600;
        background: url("../assets/br1/tipbj.png") no-repeat;
        background-size: 100% 100%;
        width: 17%;
        height: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        /* border: 1px solid red; */
    }

    .com {
        width: 43%;
        height: 32%;
        margin-left: -110px;
        margin-top: -20px;
        /*border: 1px solid red;*/
        position: absolute;
        top: 43%;
        left: 0.5%;
    }

    .com1 {
        width: 35%;
        height: 20%;
        left: 12%;
        /* border: 1px solid red; */
        position: absolute;
        top: 73%;
    }

    .com2 {
        margin-top: -7px;
        width: 45%;
        height: 47.5%;
        left: 49%;
        /* border: 1px solid red; */
        position: absolute;
        top: 44%;
    }

    .man {
        color: #2691ff;
        font-family: "SYHT";
        font-size: 20px;
        font-weight: 800;
        position: absolute;
        top: 0%;
        left: 33%;
    }

    .women {
        color: #fec400;
        font-family: "SYHT";
        font-size: 20px;
        font-weight: 800;
        position: absolute;
        top: 0%;
        left: 64%;
    }

    .n1 {
        color: white;
        font-family: "SYHT";
        font-size: 18px;
        font-weight: 800;
        width: 15.5%;
        height: 6%;
        /* border: 1px solid red; */
        position: absolute;
        top: 7%;
        left: 42%;
        text-align: center;
    }

    .n2 {
        top: 26.5%;
    }

    .n3 {
        top: 45.7%;
    }

    .n4 {
        top: 65.4%;
    }

    .n5 {
        top: 85%;
    }

    .com1_women {
        color: white;
        /* font-family: "AharoniBold" */
    }

    .allnum {
        color: #fff;
        font-family: "SYHT";
        font-size: 18px;
        font-weight: 800;
        position: absolute;
        top: -1.2em;
        left: 47%;
    }

    .man_pie {
        position: absolute;
        top: 18%;
        left: -15%;
        font-family: AharoniBold;
        color: white;
        font-size: 25px;
    }

    .women_pie {
        position: absolute;
        top: 52%;
        left: -15%;
        font-family: AharoniBold;
        color: white;
        font-size: 25px;
    }

    .man_size {
        color: white;
        font-size: 25px;
        font-weight: 800;
        font-family: SYHT;
    }

    .man_number {
        font-family: AharoniBold;
        color: white;
        font-size: 25px;
    }

    .man_unit {
        color: white;
        font-size: 25px;
        font-weight: 800
    }

    .women_size {
        color: white;
        font-size: 25px;
        font-weight: 800
    }

    .women_number {
        font-family: AharoniBold;
        color: white;
        font-size: 25px;
    }

    .women_unit {
        color: white;
        font-size: 25px;
        font-weight: 800
    }
</style>
