<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>课程数<count-to :endVal="120" /></span>
                <span>学习总时长<count-to :endVal="1248" /></span>
                <span>出勤率<count-to :endVal="88" suffix="%"/></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'>
          <active />
        </div>
        <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 active from './active'
export default {
    name: 'Right',
    components: {
        TitleLine,
        BarChart,
        PieChart,
        swiper,
        swiperSlide,
        active
    },
    data () {
        return {
            showVisible: false,
            // 师资力量
            eduConfig: {},
            edu: [
                { value: 168, name: '教师数' }
            ],
            staffConfig: {},
            staff: [
                {
                    name: '****教授',
                    value: 41
                }, {
                    name: '****名师',
                    value: 53
                }, {
                    name: '*****专家',
                    value: 61
                }, {
                    name: '*******',
                    value: 12
                }
            ],
            // 教学课程
            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'
                }

            ]
        }
    },
    mounted () {
        this.getstaff()
        this.getEdu()
        this.getline()
        this.getlearn()
    },
    methods: {
        // 学习内容
        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' // 默认为直线，可选为：'line' | 'shadow'
                            },
                            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'
                                    }
                                ]),
                                shadowOffsetY: 0,
                                shadowOffsetX: 0,
                                barBorderRadius: [3, 3, 0, 0]
                            },
                            label: {
                                show: false
                            },
                            data: Data
                        }
                    ]
                }
            }
        },
        // 教学课程百分比
        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]]
                        }
                    ]
                }
            }
        },
        getEdu () {
            this.eduConfig = {
                option: {
                    base: {
                        legend: {
                            show: false
                        }
                    },
                    seriesData: [
                        {
                            type: 'pie',
                            name: '师资力量',
                            itemStyle: {
                                normal: {
                                    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\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'
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            }
        },
        // 师资力量
        getstaff () {
            this.staffConfig = {
                option: {
                    seriesData: [
                        {
                            data: this.staff.map(item => item.value).reverse()
                        }
                    ],
                    base: {
                        yAxis: [{
                            data: this.staff.map(item => item.name).reverse()
                        }]
                    }
                }
            }
        },
        // 交流会/专题弹框
        topicDialog () {
            this.showVisible = true
        },
        // 关闭交流会/专题弹框弹框前的回调
        beforeCloses (flag) {
            this.showVisible = 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: 150px;
    }
    .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>