<template>
    <div class="managePlatform-right">
        <title-line :con="'师资/课程/活动'"></title-line>
        <div class="faculty">
            <div class="teachernum">
                <div class="teacherTitle">师资力量</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="left">教学课程</div>
                <div class="seemore">查看更多</div>
            </div>
            <p class="percent">
                <span>课程数</span>
                <span>学习总时长</span>
                <span>出勤率</span>
            </p>
            <div class="line">
                <bar-chart :option="lineConfig.option" />
            </div>
        </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'
export default {
    name: 'Right',
    components: {
        TitleLine,
        BarChart,
        PieChart,
        swiper,
        swiperSlide
    },
    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
                }
            ],
            genderPercent: {
                male: '32%',
                female: '68%'
            },
            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()
    },
    methods: {
        getline () {
            this.lineConfig = {
                option: {
                    seriesData: [
                        {
                            name: 'A',
                            type: 'bar',
                            stack: 'Tik Tok',
                            barWidth: 25,
                            itemStyle: {
                                shadowOffsetY: 0,
                                shadowOffsetX: 0,
                                barBorderRadius: [2, 0, 0, 2]
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    offset: [-20, 0],
                                    formatter: '{c}%',
                                    textStyle: {
                                        align: 'center',
                                        baseline: 'middle',
                                        fontSize: 14,
                                        fontWeight: '400',
                                        color: '#fff',
                                        textShadowColor: '#000',
                                        textShadowBlur: '0',
                                        textShadowOffsetX: 1,
                                        textShadowOffsetY: 1
                                    }
                                }
                            },
                            data: [32]
                        },
                        {
                            name: 'B',
                            type: 'bar',
                            stack: 'Tik Tok',
                            barWidth: 25,
                            itemStyle: {
                                shadowOffsetY: 0,
                                shadowOffsetX: 0
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    offset: [-20, 0],
                                    formatter: '{c}%',
                                    textStyle: {
                                        align: 'center',
                                        baseline: 'middle',
                                        fontSize: 14,
                                        fontWeight: '400',
                                        color: '#fff',
                                        textShadowColor: '#000',
                                        textShadowBlur: '0',
                                        textShadowOffsetX: 1,
                                        textShadowOffsetY: 1
                                    }
                                }
                            },
                            data: [68]
                        }
                    ]
                }
            }
        },
        getEdu () {
            this.eduConfig = {
                option: {
                    base: {
                        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\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;
    .faculty {
        margin-top: 7px;
        height: 156px;
        display: flex;
        .teachernum {
            width: 134px;
            height: 100%;
            .teacherTitle {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
            }
        }
        .staff {
            margin-top: 47px;
            width: 340px;
        }
    }

    .course {
        height: 110px;
        .coursetitle {
            display: flex;
            justify-content: space-between;
            .left {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
            }
            .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;
            }
        }
        .line {
            margin-top: 12px;
            display: flex;
            margin-top: 5px;
            margin-bottom: 4px;
            span {
                width: 0%;
                height: 31px;
                transition: width linear 300ms;
                &.male {
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                    background-color: #00beff;
                    opacity: 0.5;
                }
                &.female {
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                    background-color: #00de7d;
                    opacity: 0.5;
                }
            }
        }
    }
    .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>