<template>
    <div class="managePlatform-right">
        <title-line :con="'师资/课程/活动'"></title-line>
        <!-- 师资力量 -->
        <div class="faculty">
            <div class="teachernum">
                <div class="minTitle">师资力量</div>
                <pie-chart :option="eduConfig.option" />
            </div>
            <div class="staff">
                <bar-chart :option="staffConfig.option" />
            </div>
        </div>
        <!-- 教学课程 -->
        <div class="course">
            <div class="coursetitle">
                <div class="minTitle">教学课程</div>
                <div class="seemore">查看更多</div>
            </div>
            <p class="percent">
                <span v-for="(item, l) in coursedata" :key="l">
                    {{item.name}}
                    <count-to :endVal="item.value" :suffix="item.unit"/>
                </span>
            </p>
            <div class="line">
                <bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
            </div>
        </div>
        <!-- 学习内容 -->
        <div class="learnContent">
            <div class="minTitle">学习内容</div>
            <bar-chart style="margin-top:13px" :layout="learnConfig.layout" :option="learnConfig.option" />
        </div>
        <!-- 活动开展 -->
        <div class='activ'>
            <div class="activity-one">
                <div class="act">活动开展</div>
                <div class="mor" @click="getMore">查看更多</div>
                 
            </div>
            <div class="activity-two">
                <div class="left">
                    <div class="act-left">
                        <count-roll :count="4166" class="act-style"/><span>次</span>
                    </div>
                    <p class="act-num">活动开展次数</p>
                </div>
                <div class="line"></div>
                <div class="right">
                    <line-bar
                        :layout="activeConfig.layout"
                        :option="activeConfig.option"
                    />
                </div>
            </div>
        </div>
         <popup-frame
            :visible.sync="activeShow"
            @beforeClose="beforeCloses"
        >
            <div class="img">
                <img src="../../../static/images/index/03.png" alt="">
            </div>
        </popup-frame>

        <popup-frame
            :visible.sync="showVisible"
            @beforeClose="beforeCloses"
        >
            <div class="img">
                <img src="../../../static/images/index/supply-demand2.jpg" alt="">
            </div>
        </popup-frame>
        <div class="right-bottom">
            <div class="seemore" @click="topicDialog">查看更多</div>
            <title-line :con="'交流会/专题'"></title-line>
            <div class="topic">
                <div class="left">
                    <p class="sub-title">****交流会</p>
                    <div class="swiper-content">
                        <swiper :options="swiperOption" class="swipers">
                            <swiper-slide
                                v-for="(item, index) in topicList"
                                :key="index"
                                class="swiper-item"
                            >
                                <img :src="item.img" alt="" />
                            </swiper-slide>
                        </swiper>
                        <div class="pagination-items">
                            <div
                                class="swiper-pagination change"
                                slot="pagination"
                            ></div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="num">
                        <span><count-to :endVal="110" /></span>
                        <span><count-to :endVal="120" /></span>
                        <span><count-to :endVal="270" /></span>
                        <span><count-to :endVal="4000" /></span>
                    </div>
                    <div class="text">
                        <span class="item"
                            >对接交流活动 <count-to :endVal="110" />余场</span
                        >
                        <span class="item"
                            >发布大企业创新需求<count-to
                                :endVal="120"
                            />余个</span
                        >
                        <span class="item"
                            >促成项目合作<count-to :endVal="270" />余个</span
                        >
                        <span class="item"
                            >服务创新创业企业<count-to
                                :endVal="4000"
                            />余家次</span
                        >
                    </div>
                </div>
            </div>
            <div class="topic-show">
                <p class="sub-title">专题展示</p>
                <div class="topic-item">
                    <div class="item">
                        <img
                            src="../../../static/images/index/topic-bg4.png"
                            alt=""
                        />
                        <p>连续两届成功“创客中国”上海赛区总决赛</p>
                    </div>
                    <div class="item">
                        <img
                            src="../../../static/images/index/topic-bg4.png"
                            alt=""
                        />
                        <p>连续两届成功“创客中国”上海赛区总决赛</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 活动开展 查看更多的弹出层 -->
       
    </div>
</template>

<script>
import TitleLine from '@/components/TitleLine'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import LineBar from '@/components/echarts/LineBar'
import CountRoll from '@/components/CountRoll.vue'
// import PopupFrame from './PopupFrame'
export default {
    name: 'Right',
    components: {
        TitleLine,
        BarChart,
        PieChart,
        swiper,
        swiperSlide,
        LineBar,
        CountRoll
        // PopupFrame
    },
    props: {
        rightData: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            activeShow: false,
            showVisible: false,
            // 师资力量
            eduConfig: {},
            edu: [
                { value: 168, name: '教师数' }
            ],
            staffConfig: {},
            staff: [
                {
                    name: '****教授',
                    value: 41
                }, {
                    name: '****名师',
                    value: 53
                }, {
                    name: '*****专家',
                    value: 61
                }, {
                    name: '*******',
                    value: 12
                }
            ],
            // 教学课程
            coursedata: [
                {
                    name: '课程数',
                    value: 120
                },
                {
                    name: '学习总时长',
                    value: 1248
                },
                {
                    name: '出勤率',
                    value: 88,
                    unit: '%'
                }
            ],
            lineConfig: {},
            line: [
                {
                    name: '线下',
                    value: 32
                }, {
                    name: '线上',
                    value: 68
                }
            ],
            // 学习内容
            learnConfig: {},
            learn: [
                {
                    name: '**学习',
                    value: 65
                },
                {
                    name: '**学习',
                    value: 25
                },
                {
                    name: '**学习',
                    value: 85
                },
                {
                    name: '**学习',
                    value: 70
                },
                {
                    name: '**学习',
                    value: 100
                },
                {
                    name: '**学习',
                    value: 40
                },
                {
                    name: '**学习',
                    value: 45
                }
            ],
            swiperOption: {
                mousewheel: true,
                centeredSlides: true,
                centeredSlidesBounds: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false // 手动切换之后继续自动轮播
                },
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    type: 'bullets'
                }
            },
            topicList: [
                {
                    img: '../../../static/images/index/topic-bg1.png'
                },
                {
                    img: '../../../static/images/index/topic-bg1.png'
                },
                {
                    img: '../../../static/images/index/topic-bg1.png'
                }

            ],
            // 活动开展
            activeConfig: {},
            activeList: [
                {name: '*****活动', value: 192},
                {name: '组织活动', value: 1103},
                {name: '*****活动', value: 381}
            ],
            moreConfig: {
                props: {
                    visible: false,
                    title: ''
                }
            }
        }
    },
    mounted () {
        this.getstaff()
        this.getEdu()
        this.getline()
        this.getlearn()
        this.getActive(this.activeList)
    },
    methods: {
        // 师资力量
        getstaff () {
            this.staffConfig = {
                option: {
                    seriesData: [
                        {
                            data: this.staff.map(item => item.value).reverse()
                        }
                    ],
                    base: {
                        yAxis: [{
                            data: this.staff.map(item => item.name).reverse()
                        }]
                    }
                }
            }
        },
        getEdu () {
            this.eduConfig = {
                option: {
                    base: {
                        color: [],
                        legend: {
                            show: false
                        }
                    },
                    seriesData: [
                        {
                            type: 'pie',
                            name: '师资力量',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    shadowBlur: 0,
                                    shadowColor: '#3EB8F7'
                                }
                            },
                            clockWise: false,
                            hoverAnimation: false,
                            center: ['38%', '50%'],
                            radius: ['65%', '78%'],
                            data: [
                                {
                                    value: this.edu[0].value,
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 30,
                                                    fontWeight: '400'
                                                },
                                                b: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontWeight: '400',
                                                    fontSize: 18
                                                }
                                            },
                                            formatter: function (params) {
                                                return '{a|' + params.value + '}\n{b|教师数}'
                                            },
                                            position: 'center',
                                            show: true
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#3EB8F7',
                                            shadowColor: '#2c6cc4',
                                            shadowBlur: 0
                                        }
                                    }
                                }, {
                                    value: this.edu[0].value / 2 + 20,
                                    name: 'invisible',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(0, 12, 27)'
                                        },
                                        emphasis: {
                                            color: '#fff'
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            }
        },
        // 教学课程百分比
        getline () {
            this.lineConfig = {
                layout: {
                    width: '100%',
                    height: '31px'
                },
                option: {
                    base: {
                        grid: {
                            left: 0,
                            right: 0,
                            bottom: 0,
                            top: 0,
                            containLabel: true
                        }
                    },
                    seriesData: [
                        {
                            name: 'A',
                            type: 'bar',
                            stack: 'Tik Tok',
                            barWidth: 25,
                            itemStyle: {
                                color: 'rgba(0, 190, 255, .3)',
                                shadowOffsetY: 0,
                                shadowOffsetX: 0,
                                barBorderRadius: [5, 0, 0, 5]
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    offset: [-40, 2],
                                    formatter: function (params) {
                                        return '{a|' + params.name + '}{b|' + params.value + '%}'
                                    },
                                    rich: {
                                        a: {
                                            color: '#fff',
                                            align: 'center',
                                            fontSize: 14,
                                            fontFamily: 'Microsoft YaHei',
                                            fontWeight: '400'
                                        },
                                        b: {
                                            color: '#fff',
                                            align: 'center',
                                            fontSize: 24,
                                            fontFamily: 'Century Gothic',
                                            fontWeight: '400'
                                        }
                                    }
                                }
                            },
                            data: [this.line[0]]
                        },
                        {
                            name: 'B',
                            type: 'bar',
                            stack: 'Tik Tok',
                            barWidth: 25,
                            itemStyle: {
                                color: 'rgba(0, 222, 125, .3)',
                                shadowOffsetY: 0,
                                shadowOffsetX: 0,
                                barBorderRadius: [0, 5, 5, 0]
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    offset: [-40, 2],
                                    formatter: function (params) {
                                        return '{a|' + params.name + '}{b|' + params.value + '%}'
                                    },
                                    rich: {
                                        a: {
                                            color: '#fff',
                                            align: 'center',
                                            fontSize: 14,
                                            fontFamily: 'Microsoft YaHei',
                                            fontWeight: '400'
                                        },
                                        b: {
                                            color: '#fff',
                                            align: 'center',
                                            fontSize: 24,
                                            fontFamily: 'Century Gothic',
                                            fontWeight: '400'
                                        }
                                    }
                                }
                            },
                            data: [this.line[1]]
                        }
                    ]
                }
            }
        },
        // 学习内容
        getlearn () {
            const xData = this.learn.map(v => v.name)
            const Data = this.learn.map(v => v.value)
            this.learnConfig = {
                layout: {
                    width: '100%',
                    height: '136px'
                },
                option: {
                    base: {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line'
                            },
                            textStyle: {
                                color: '#ffffff'
                            },
                            backgroundColor: 'rgba(55, 128, 246, 0.2)',
                            borderColor: 'rgba(55, 128, 246, 0.2)'
                        },
                        grid: {
                            left: 0,
                            right: 0,
                            bottom: 0,
                            top: 10,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: 'rgba(17, 63, 116, 1)'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                fontSize: 14,
                                color: '#469CCC'
                            },
                            data: xData
                        },
                        yAxis: [{
                            type: 'value',
                            max: 'dataMax',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(17, 63, 116, 1)'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(17, 63, 116, 1)'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                formatter: '{value}%',
                                textStyle: {
                                    fontSize: 14,
                                    fontFamily: 'Century Gothic',
                                    fontWeight: 400,
                                    color: '#469CCC'
                                }
                            },
                            boundaryGap: ['20%', '20%']
                        }]
                    },
                    seriesData: [
                        {
                            type: 'bar',
                            barWidth: 6,
                            itemStyle: {
                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: '#24E8FF'
                                    },
                                    {
                                        offset: 0,
                                        color: '#00BEFf'
                                    }
                                ]),
                                barBorderRadius: [3, 3, 0, 0]
                            },
                            label: {
                                show: false
                            },
                            data: Data
                        }
                    ]
                }
            }
        },
        getActive (data) {
            let yData = data.map(v => v.name).reverse()
            let y2Data = data.map(v => v.value).reverse()
            let max = 4166
            let maxData = new Array(data.length).fill(max)
            let pointData = data.reverse().map((v, i) => {
                return {
                    xAxis: v.value,
                    yAxis: i
                }
            })
            this.activeConfig = {
                layout: {
                    width: '100%',
                    height: '100%'
                },
                option: {
                    base: {
                        xAxis: {
                            max: max
                        },
                        yAxis: [
                            {
                                axisLabel: {
                                    color: '#fff',
                                    align: 'left',
                                    padding: [0, 0, 0, -60]
                                },
                                data: yData
                            }, {
                                data: y2Data.map(v => v)
                            }
                        ]
                    },
                    seriesData: [
                        {
                            name: 'back',
                            barWidth: '5px',
                            data: maxData
                        },
                        {
                            name: 'show',
                            barWidth: '5px',
                            itemStyle: {
                                borderRadius: [0, 0, 0, 0],
                                color: 'rgba(64, 169, 248, .05)'
                            },
                            markPoint: {
                                symbolOffset: [0, 0.5],
                                data: pointData
                            },
                            data: y2Data
                        }
                    ]
                }
            }
        },
        // 查看更多的点击事件
        getMore () {
            console.log(123)
            this.activeShow = true
        },
        // 交流会/专题弹框
        topicDialog () {
            this.showVisible = true
        },
        // 关闭交流会/专题弹框弹框前的回调
        beforeCloses (flag) {
            this.showVisible = flag
            this.activeShow = flag
        }
    }
}
</script>

<style lang="less">
.managePlatform-right {
    height: 500px;
    .minTitle {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
    }
    .faculty {
        margin-top: 7px;
        height: 156px;
        display: flex;
        .teachernum {
            width: 134px;
            height: 100%;
        }
        .staff {
            margin-top: 47px;
            width: 340px;
        }
    }

    .course {
        height: 110px;
        .coursetitle {
            display: flex;
            justify-content: space-between;
            .seemore {
                width: 94px;
                cursor: pointer;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #18d1c6;
                background: url('./../../../static/images/index/more.png')
                    no-repeat right;
            }
        }
        .percent {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            span {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #6dcdff;
                span{
                    font-size: 26px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #fff;
                }
            }
        }
        .line {
            height: 31px;
            margin-top: 12px;
        }
    }
    .learnContent{
        height: 178px;
    }
    // 活动开展
    .activ{
            width: 100%;
            height: 140px;
            .activity-one{
                height: 20px;
                display: flex;
                justify-content: space-between;
                .act{
                    width: 72px;
                    height: 20px;
                    margin-top: -5px;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 28px;
                }
                .mor{
                    width: 94px;
                    height: 20px;
                    cursor: pointer;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #18d1c6;
                    background:url('../../../static/images/index/more.png') no-repeat right;
                }
            }
            .activity-two{
                margin-top: 12px;
                display: flex;
                justify-content: space-between;
                .left{
                    margin-top:10px;
                    width: 150px;
                    .act-left{
                        display: flex;
                        .act-style{
                            width: 150px;
                        }
                        span{
                            width: 16px;
                            height: 17px;
                            margin-top: 22px;
                            margin-left: 12px;
                            font-size: 16px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 35px;
                        }
                    }
                    .act-num{
                        width: 108px;
                        height: 18px;
                        margin-top: 20px;
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #6DCDFF;
                        line-height: 17px;
                    }
                }
                .line{
                    width: 3px;
                    height: 76px;
                    margin: 10px 0 0 20px;
                    background:url('../../../static/images/index/3.png');
                }
                .right{
                    width: 270px;
                    height: 100%;
                }
            }
        }
    .right-bottom {
        position: relative;
        .seemore {
                position: absolute;
                top: 0;
                right: 0;
                width: 94px;
                cursor: pointer;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #18d1c6;
                background: url('./../../../static/images/index/more.png')
                    no-repeat right;
            }
        .topic {
            margin-top: 19px;
            width: 482px;
            height: 158px;
            display: flex;
            background: url('../../../static/images/index/comm-bg.png')
                no-repeat center;
            .left {
                margin-left: 11px;
                margin-right: 21px;
                .sub-title {
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 28px;
                }
                .swiper-content {
                    width: 190px;
                    height: 107px;
                    .swipers {
                        width: 100%;
                        height: 100%;
                        .swiper-item {
                            width: 100%;
                            height: 100%;
                            img {
                                width: 190px;
                                height: 107px;
                            }
                        }
                    }
                    .pagination-items {
                        width: 60px;
                        margin: 0 auto;
                        .change.swiper-pagination.swiper-pagination-clickable {
                            width: 60px;
                            height: 6px;
                            border-radius: 50%;
                            margin-top: 5px;
                            display: flex;
                            justify-content: space-between;
                        }
                        .swiper-pagination-bullet {
                            width: 6px;
                            height: 6px;
                            background: rgba(62, 157, 247, 0.4);
                        }
                        .swiper-pagination-bullet-active {
                            background: #3e9df7;
                        }
                    }
                }
            }
            .right {
                display: flex;
                .num {
                    position: relative;
                    margin-top: 14px;
                    width: 54px;
                    height: 138px;
                    background: url('../../../static/images/index/topic-bg2.png')
                        no-repeat center 0;
                    span {
                        position: absolute;
                        font-size: 16px;
                        font-family: Century Gothic;
                        font-weight: 400;
                        color: #ffffff;
                        left: 3px;
                        top: 6px;
                    }
                    span:nth-child(2) {
                        left: 20px;
                        top: 40px;
                    }
                    span:nth-child(3) {
                        left: 3px;
                        top: 70px;
                    }
                    span:nth-child(4) {
                        left: 16px;
                        top: 105px;
                    }
                }
                .text {
                    position: relative;
                    margin-top: 14px;
                    width: 197px;
                    display: flex;
                    align-items: center;
                    height: 138px;
                    .item {
                        position: absolute;
                        height: auto;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #ffffff;
                        left: 0;
                        top: 9px;
                    }
                    .item:nth-child(2) {
                        left: 10px;
                        top: 45px;
                    }
                    .item:nth-child(3) {
                        left: 0;
                        top: 78px;
                    }
                    .item:nth-child(4) {
                        left: 10px;
                        top: 108px;
                    }
                }
            }
        }
        .topic-show {
            .sub-title {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
                line-height: 28px;
                margin: 15px 0;
            }
            .topic-item {
                display: flex;
                justify-content: space-between;
                .item {
                    width: 230px;
                    height: 105px;
                    background: url('../../../static/images/index/topic-bg3.png')
                        no-repeat;
                    img {
                        display: block;
                        width: 153px;
                        height: 56px;
                        margin: 0 auto;
                        margin-top: 17px;
                        margin-bottom: 8px;
                    }
                    p {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #6dcdff;
                    }
                }
            }
        }
    }
}
</style>