<template>
    <div class="managePlatform-left">
        <title-line :con="'学员画像'"></title-line>
        <!-- 男女比例图 -->
        <div class="gender">
            <div class="male">
                <img src="../../../static/images/index/male.png" alt="">
            </div>
            <div class="details">
                <p class="percent">
                    <span>{{genderPercent.male}}</span>
                    <span>{{genderPercent.female}}</span>
                </p>
                <div class="line">
                    <span class="male" :style={width:genderPercent.male}></span>
                    <span class="female" :style={width:genderPercent.female}></span>
                </div>
                <p class="num">
                    <span>{{gender.male | dealWithNumber}}</span>
                    <span>{{gender.female | dealWithNumber}}</span>
                </p>
            </div>
            <div class="female">
                <img src="../../../static/images/index/female.png" alt="">
            </div>
        </div>
        <!-- 年龄结构/学历情况 -->
        <div class="ageAndEdu">
            <div class="age">
                <div class="partTitle">年龄结构</div>
                <div class="average">
                    <span>平均年龄</span>
                    <i>{{ageAverage}}</i>
                </div>
                <bar-chart :option="ageConfig.option"/>
            </div>
            <span class="line"></span>
            <div class="edu">
                <div class="partTitle">学历情况</div>
                <pie-chart :option="eduConfig.option"/>
            </div>
        </div>
        <!-- 党派分布/民族分布 -->
        <div class="distribution">
            <div class="title">
                <p :class="distShowKey === 'party' ? 'curr' : ''" @click="changeDist('party')">党派分布</p>
                <p :class="distShowKey === 'ethnic' ? 'curr' : ''" @click="changeDist('ethnic')">民族分布</p>
            </div>
            <ul>
                <li v-for="(item, index) in distribution[distShowKey]" :key="index">
                    <p>{{item.name}}</p>
                    <count-to :endVal="item.value"/>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import TitleLine from '@/components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import utils from 'utils'
export default {
    name: 'Left',

    components: {
        TitleLine,
        BarChart,
        PieChart
    },

    filters: {
        dealWithNumber (num) {
            return utils.dealWithNumber(num)
        }
    },

    data () {
        return {
            // 男女学员数量
            gender: {
                male: 92768,
                female: 41768
            },
            genderPercent: {},
            // 年龄数据
            age: [
                {
                    name: '60’s',
                    value: 32
                }, {
                    name: '70’s',
                    value: 106
                }, {
                    name: '80’s',
                    value: 184
                }, {
                    name: '90’s',
                    value: 131
                }
            ],
            // 平均年龄
            ageAverage: 45.7,
            // 年龄结构配置
            ageConfig: {},
            // 学历数据
            edu: [
                {value: 735, name: '大专'},
                {value: 580, name: '本科'},
                {value: 484, name: '硕士'},
                {value: 300, name: '博士以上'}
            ],
            // 学历情况配置
            eduConfig: {},
            // 分布
            distribution: {
                // 党派
                party: [
                    {
                        name: '民革',
                        value: 4293
                    }, {
                        name: '民盟',
                        value: 4293
                    }, {
                        name: '民健',
                        value: 4293
                    }, {
                        name: '民进',
                        value: 4293
                    }, {
                        name: '无党派',
                        value: 4293
                    }
                ],
                // 民族
                ethnic: [
                    {
                        name: '汉族',
                        value: 3924
                    }, {
                        name: '藏族',
                        value: 3924
                    }, {
                        name: '维吾尔族',
                        value: 3924
                    }, {
                        name: '白族',
                        value: 3924
                    }, {
                        name: '苗族',
                        value: 3924
                    }
                ]
            },
            // 分布当前展示数据标识
            distShowKey: 'party'
        }
    },

    mounted () {
        this.init()
        this.getAge()
        this.getEdu()
    },

    methods: {
        init () {
            this.dealGender()
        },
        // 求性别百分比
        dealGender () {
            const arr = Object.values(this.gender)
            const total = arr.reduce((pre, next) => pre + next)
            this.genderPercent = {
                male: (this.gender.male * 100 / total).toFixed(1) + '%',
                female: (this.gender.female * 100 / total).toFixed(1) + '%'
            }
        },
        // 年龄结构
        getAge () {
            this.ageConfig = {
                option: {
                    seriesData: [
                        {
                            data: this.age.map(item => item.value).reverse()
                        }
                    ],
                    base: {
                        yAxis: [{
                            data: this.age.map(item => item.name).reverse()
                        }]
                    }
                }
            }
        },
        // 学历情况
        getEdu () {
            this.eduConfig = {
                option: {
                    seriesData: [
                        {
                            data: this.edu
                        }
                    ]
                }
            }
        },
        // 党派/民族分布
        changeDist (type) {
            this.distShowKey = type
        }
    }
}
</script>

<style lang="less" scoped>
    .managePlatform-left {
        padding-top: 14px;
        .partTitle {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 18px;
        }
        .gender {
            display: flex;
            margin-top: 8px;
            .details {
                padding: 0 7px;
                flex: 1;
                font-family: CenturyGothic;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 17px;
                p {
                    display: flex;
                    justify-content: space-between;
                }
                .percent {
                    font-size: 20px;
                }
                .line {
                    display: flex;
                    margin-top: 5px;
                    margin-bottom: 4px;
                    span {
                        width: 0%;
                        height: 8px;
                        transition: width linear 300ms;
                        &.male {
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                            background-color: #00BEFF;
                        }
                        &.female {
                            border-top-right-radius: 4px;
                            border-bottom-right-radius: 4px;
                            background-color: #00DE7D;
                        }
                    }
                }
                .num {
                    font-size: 24px;
                }
            }
        }
        .ageAndEdu {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            div {
                width: 47%;
            }
            .line {
                width: 1px;
                height: 153px;
                background: linear-gradient(0deg, transparent, #3A95BF, transparent)
            }
            .age {
                .average {
                    width: 100%;
                    display: flex;
                    font-weight: 400;
                    line-height: 30px;
                    margin-top: 10px;
                    span {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        color: #6DCDFF;
                    }
                    i {
                        font-size: 24px;
                        font-family: CenturyGothic;
                        color: #ffffff;
                        padding-left: 10px;
                    }
                }
            }
        }
        .distribution {
            margin-top: 10px;
            .title {
                display: flex;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(109, 205, 255, .8);
                line-height: 28px;
                border-bottom: 1px solid rgba(91, 191, 255, .3);
                p {
                    padding: 0 10px;
                    cursor: pointer;
                    &.curr {
                        font-size: 18px;
                        color: #FFFFFF;
                        border-bottom: 2px solid #5BBFFF;
                    }
                }
            }
            ul {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                li {
                    width: 91px;
                    height: 62px;
                    background: url(../../../static/images/index/distBg.png) no-repeat left top;
                    p {
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #6DCDFF;
                        line-height: 37px;
                        padding-left: 10px;
                    }
                    span {
                        font-size: 20px;
                        font-family: CenturyGothic;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 20px;
                        padding-left: 10px;
                    }
                }
            }
        }
    }
</style>