<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.malePer}}</span>
                    <span>{{genderPercent.femalePer}}</span>
                </p>
                <div class="line">
                    <span class="male" :style={width:genderPercent.malePer}></span>
                    <span class="female" :style={width:genderPercent.femalePer}></span>
                </div>
                <p class="num">
                    <span>{{genderPercent.male | dealWithNumber}}</span>
                    <span>{{genderPercent.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.key}}</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.iconUrl" alt="照片"  @click="openStudent(index)">
                        <p>{{item.name}}</p>
                        <p>{{item.desc}}</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 v-for="(con, i) in item" :key="i + 'key'">{{con}}</span>
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>
        </div>
        <!-- 弹框 -->
        <popup-frame :visible="visible" :layout="{width: '960px', height: '540px'}" @beforeClose="closePopup">
            <img src="../../../static/images/index/studentDemeanor.jpg" alt="弹框">
        </popup-frame>
    </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)
        }
    },

    props: {
        leftData: {
            type: Object,
            default () {
                return {}
            }
        }
    },

    data () {
        return {
            // 男女学员比例
            genderPercent: {
                male: 0,
                female: 0,
                malePer: '0%',
                femalePer: '0%'
            },
            // 平均年龄
            ageAverage: 0,
            // 年龄结构配置
            ageConfig: {},
            // 学历情况配置
            eduConfig: {},
            // 分布
            distribution: {
                // 党派
                party: [],
                // 民族
                ethnic: []
            },
            // 分布当前展示数据标识
            distShowKey: 'party',
            // 行业分布
            industryConfig: {
                layout: {
                    height: '143px'
                }
            },
            // 参与度活跃度
            degree: {},
            degreeKey: '',
            degreeConfig: {},
            // 学员风采
            studentDemeanor: [],
            swiperOption: {
                loop: false,
                autoplay: false,
                centeredSlides: false,
                slidesPerView: 4.5
            },
            // 明星班级
            starClass: [],
            classOption: {
                step: 0.35,
                singleHeight: 50
            },
            greatKey: 0,
            // 弹框是否显示
            visible: false
        }
    },

    mounted () {
        this.init()
    },

    methods: {
        init () {
            const {
                gender,
                age,
                edu,
                party,
                ethnic,
                industry,
                participate,
                active,
                studentDemeanor,
                starClass
            } = this.leftData
            this.dealGender(gender)
            this.getAge(age)
            this.getEdu(edu)
            this.getDist(party, ethnic)
            this.getIndustry(industry)
            this.getDegree(participate, active)
            this.getStudent(studentDemeanor)
            this.getClass(starClass)
        },
        // 求性别百分比
        dealGender (data) {
            // total为1防止NAN
            const total = data.total || 1
            const maleItem = data.list && data.list.find(item => item.key === '男')
            const male = maleItem.value || 0
            const femaleItem = data.list && data.list.find(item => item.key === '女')
            const female = femaleItem.value || 0
            this.genderPercent = {
                male,
                female,
                malePer: (male * 100 / total).toFixed(1) + '%',
                femalePer: (female * 100 / total).toFixed(1) + '%'
            }
        },
        // 年龄结构
        getAge (data) {
            this.ageAverage = data.subTitleValue || 0
            const age = data.list || []
            this.ageConfig = {
                option: {
                    seriesData: [
                        {
                            data: age.map(item => item.value).reverse()
                        }
                    ],
                    base: {
                        yAxis: [{
                            data: age.map(item => item.key).reverse()
                        }]
                    }
                }
            }
        },
        // 学历情况
        getEdu (data) {
            const edu = this.formatArr(data.list || [])
            this.eduConfig = {
                option: {
                    seriesData: [
                        {
                            data: edu
                        }
                    ]
                }
            }
        },
        // 党派/民族分布
        getDist (data1, data2) {
            this.distribution.party = data1.list || []
            this.distribution.ethnic = data2.list || []
        },
        // 切换党派/民族
        changeDist (type) {
            this.distShowKey = type
        },
        // 行业分布
        getIndustry (data) {
            const industry = data.list || []
            this.industryConfig.option = {
                seriesData: [
                    {
                        label: {
                            fontSize: 24,
                            formatter: item => {
                                return utils.dealWithNumber(item.value)
                            }
                        },
                        data: 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: industry.map(item => item.key).reverse()
                    }]
                }
            }
        },
        // 获取参与度与活跃度数据
        getDegree (data1, data2) {
            // 参与度
            const oldParticipate = data1.list || []
            const participate = []
            oldParticipate.forEach(item => {
                participate.push({
                    name: item.title,
                    value: this.formatArr(item.list || [])
                })
            })
            // 活跃度
            const oldActive = data2.list || []
            const active = []
            oldActive.forEach(item => {
                active.push({
                    name: item.title,
                    value: this.formatArr(item.list || [])
                })
            })
            this.degree = {
                participate,
                active
            }
            this.changeDegree('participate')
        },
        // 切换参与度与活跃度
        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
                        }
                    ]
                }
            }
        },
        // 学员风采
        getStudent (data) {
            this.studentDemeanor = data.list || []
        },
        // 明星班级
        getClass (data) {
            this.starClass = data.valueList || []
        },
        // 打开学员风采弹框
        openStudent (index) {
            console.log(index)
            this.visible = true
        },
        // 关闭弹框
        closePopup (data) {
            this.visible = data
        },
        // 把数组中的key转成name
        formatArr (arr) {
            const newArr = []
            if (this.utils.isArray(arr) && arr.length) {
                arr.forEach(item => {
                    newArr.push({
                        name: item.key,
                        value: item.value
                    })
                })
            }
            return newArr
        }
    }
}
</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 1000ms;
                        &.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;
                            border-radius: 50%;
                        }
                        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;
                            font-size: 16px;
                            padding: 8px 10px 8px 40px;
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }
            }
        }
    }
</style>