<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 class="industry">
            <div class="partTitle margin20-10">年龄结构</div>
            <bar-chart :option="industryConfig.option" :layout="industryConfig.layout" />
        </div>
        <!-- 参与度|活跃度 -->
        <div class="degree">
            <div class="selectTitle">
                <span :class="degreeKey === 'participate' ? 'curr' : ''" @click="changeDegree('participate')">参与度</span>
                <i> | </i>
                <span :class="degreeKey === 'active' ? 'curr' : ''" @click="changeDegree('active')">活跃度</span>
            </div>
            <line-chart :option="degreeConfig.option" />
        </div>
        <!-- 学员风采|明星班级 -->
        <div class="great">
            <div class="selectTitle">
                <span :class="greatKey === 0 ? 'curr' : ''" @click="greatKey = 0">学员风采</span>
                <i> | </i>
                <span :class="greatKey === 1 ? 'curr' : ''" @click="greatKey = 1">明星班级</span>
            </div>
             <!-- 学员风采 -->
            <div class="studentDemeanor" v-if="greatKey === 0">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item, index) in studentDemeanor" :key="index">
                        <img :src="item.pic" alt="照片"  @click="openStudent(index)">
                        <p>{{item.name}}</p>
                        <p>{{item.position}}</p>
                    </swiper-slide>
                </swiper>
            </div>
            <!-- 明星班级 -->
            <div class="starClass" v-if="greatKey === 1">
                <vue-seamless-scroll 
                    :data="starClass"
                    :class-option="classOption"
                    class="scrolliframe"
                >
                    <ul>
                        <li v-for="(item, index) in starClass" :key="index">
                            <span>{{item.name}}</span>
                            <span>{{item.content1}}</span>
                            <span>{{item.content2}}</span>
                            <span>{{item.content3}}</span>
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>
        </div>
    </div>
</template>

<script>
import TitleLine from '@/components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import LineChart from '@/components/echarts/LineChart.vue'
import Swiper from '@/components/Swiper'
import { swiperSlide } from 'vue-awesome-swiper'
import utils from 'utils'
export default {
    name: 'Left',

    components: {
        TitleLine,
        BarChart,
        PieChart,
        LineChart,
        Swiper,
        swiperSlide
    },

    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',
            // 行业分布
            industry: [
                {
                    name: '家电行业',
                    value: 4172
                }, {
                    name: '电子信息',
                    value: 892
                }, {
                    name: '机械制造',
                    value: 8321
                }, {
                    name: '纺织生产',
                    value: 1892
                }, {
                    name: '生物医药',
                    value: 1892
                }
            ],
            industryConfig: {
                layout: {
                    height: '143px'
                }
            },
            // 参与度活跃度
            degree: {
                // 参与度
                participate: [
                    {
                        name: '课程',
                        value: [
                            {
                                name: '0-20%',
                                value: 100
                            }, {
                                name: '21-40%',
                                value: 180
                            }, {
                                name: '41-60%',
                                value: 310
                            }, {
                                name: '61-80%',
                                value: 380
                            }, {
                                name: '81-100%',
                                value: 489
                            }
                        ]
                    }, {
                        name: '活动',
                        value: [
                            {
                                name: '0-20%',
                                value: 30
                            }, {
                                name: '21-40%',
                                value: 110
                            }, {
                                name: '41-60%',
                                value: 220
                            }, {
                                name: '61-80%',
                                value: 310
                            }, {
                                name: '81-100%',
                                value: 320
                            }
                        ]
                    }
                ],
                // 活跃度
                active: [
                    {
                        name: '课程',
                        value: [
                            {
                                name: '0-20%',
                                value: 100
                            }, {
                                name: '21-40%',
                                value: 29
                            }, {
                                name: '41-60%',
                                value: 300
                            }, {
                                name: '61-80%',
                                value: 200
                            }, {
                                name: '81-100%',
                                value: 300
                            }
                        ]
                    }, {
                        name: '活动',
                        value: [
                            {
                                name: '0-20%',
                                value: 30
                            }, {
                                name: '21-40%',
                                value: 80
                            }, {
                                name: '41-60%',
                                value: 20
                            }, {
                                name: '61-80%',
                                value: 400
                            }, {
                                name: '81-100%',
                                value: 500
                            }
                        ]
                    }
                ]
            },
            degreeKey: '',
            degreeConfig: {},
            // 学员风采
            studentDemeanor: [
                {
                    pic: require('../../../static/images/index/persion.png'),
                    name: '白岩松1',
                    position: '主持人/作家'
                }, {
                    pic: require('../../../static/images/index/persion.png'),
                    name: '白岩松2',
                    position: '主持人/作家'
                }, {
                    pic: require('../../../static/images/index/persion.png'),
                    name: '白岩松3',
                    position: '主持人/作家'
                }, {
                    pic: require('../../../static/images/index/persion.png'),
                    name: '白岩松4',
                    position: '主持人/作家'
                }, {
                    pic: require('../../../static/images/index/persion.png'),
                    name: '白岩松5',
                    position: '主持人/作家'
                }, {
                    pic: require('../../../static/images/index/persion.png'),
                    name: '白岩松6',
                    position: '主持人/作家'
                }, {
                    pic: require('../../../static/images/index/persion.png'),
                    name: '白岩松7',
                    position: '主持人/作家'
                }
            ],
            swiperOption: {
                loop: false,
                autoplay: false,
                centeredSlides: false,
                slidesPerView: 4.5
            },
            // 明星班级
            starClass: [
                {
                    name: '2021年秋季班（21人）',
                    content1: '5人博士后',
                    content2: '6人博士',
                    content3: '5人企业家'
                }, {
                    name: '2021年秋季班（22人）',
                    content1: '5人博士后',
                    content2: '6人博士',
                    content3: '5人企业家'
                }, {
                    name: '2021年秋季班（23人）',
                    content1: '5人博士后',
                    content2: '6人博士',
                    content3: '5人企业家'
                }, {
                    name: '2021年秋季班（24人）',
                    content1: '5人博士后',
                    content2: '6人博士',
                    content3: '5人企业家'
                }, {
                    name: '2021年秋季班（25人）',
                    content1: '5人博士后',
                    content2: '6人博士',
                    content3: '5人企业家'
                }
            ],
            classOption: {
                step: 0.35,
                singleHeight: 50
            },
            greatKey: 0
        }
    },

    mounted () {
        this.init()
        this.getAge()
        this.getEdu()
        this.getIndustry()
        this.changeDegree('participate')
    },

    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
        },
        // 行业分布
        getIndustry () {
            this.industryConfig.option = {
                seriesData: [
                    {
                        label: {
                            fontSize: 24,
                            formatter: item => {
                                return utils.dealWithNumber(item.value)
                            }
                        },
                        data: this.industry.map(item => item.value).reverse()
                    }
                ],
                base: {
                    grid: {
                        left: 10,
                        right: 80
                    },
                    yAxis: [{
                        axisLabel: {
                            color: '#6DCDFF',
                            fontSize: 16,
                            padding: [0, 10, 0, 0],
                            fontFamily: 'Microsoft YaHei'
                        },
                        data: this.industry.map(item => item.name).reverse()
                    }]
                }
            }
        },
        // 切换参与度与活跃度
        changeDegree (type) {
            this.degreeKey = type
            const legendData = this.degree[this.degreeKey].map(v => v.name)
            const xData = this.degree[this.degreeKey][0].value.map(v => v.name)
            const y1Data = this.degree[this.degreeKey][0].value.map(v => v.value)
            const y2Data = this.degree[this.degreeKey][1].value.map(v => v.value)
            this.degreeConfig = {
                option: {
                    base: {
                        xAxis: {
                            data: xData
                        },
                        legend: {
                            data: legendData
                        }
                    },
                    seriesData: [
                        {
                            name: this.degree[this.degreeKey][0].name,
                            data: y1Data
                        }, {
                            name: this.degree[this.degreeKey][1].name,
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(0, 222, 125, .85)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            data: y2Data
                        }
                    ]
                }
            }
        },
        // 学员风采
        openStudent (index) {
            console.log(index)
        }
    }
}
</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;
            &.margin20-10 {
                margin: 20px 0 10px;
            }
        }
        .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;
                    }
                }
            }
        }
        .selectTitle {
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 28px;
            font-size: 16px;
            color: #6DCDFF;
            span {
                cursor: pointer;
                &.curr {
                    font-size: 18px;
                    color: #FFFFFF;
                }
            }
            i {
                font-size: 18px;
                color: #FFFFFF;
            }
        }
        .degree {
            margin-top: 10px;
        }
        .great {
            margin-top: 10px;
            .studentDemeanor {
                margin-top: 17px;
                width: 100%;
                height: 150px;
                .swiper-container {
                    .swiper-slide {
                        cursor: pointer;
                        text-align: center;
                        .img {
                            width: 88px;
                            height: 88px;
                        }
                        p {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 20px;
                            margin-top: 10px;
                            &:nth-child(3) {
                                margin-top: 5px;
                            }
                        }
                    }
                }
            }
            .starClass {
                .scrolliframe {
                    width: 100%;
                    height: 150px;
                    overflow: hidden;
                    ul {
                        li {
                            width: 480px;
                            height: 50px;
                            background: url('../../../static/images/index/starClassBg.png') no-repeat left center;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #6DCDFF;
                            line-height: 34px;
                            padding: 8px 0px 8px 40px;
                        }
                    }
                }
            }
        }
    }
</style>