<template>
    <div class="managePlatform-right">
        <title-line :con="'师资/课程/活动'"></title-line>
        <!-- 师资力量 -->
        <div class="faculty">
            <div class="teachernum">
                <div class="minTitle">师资力量</div>
                <guage-part style="margin-top: 20px" :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" @click="Seemore">查看更多</div>
            </div>
            <p class="percent">
                <span v-for="(item, l) in coursedata" :key="l">
                    {{item.key}}
                    <count-to :endVal="item.value" :suffix="item.unit"/>
                </span>
            </p>
            <div class="line">
                <bar-stacked :option="lineConfig.option" />
            </div>
        </div>
        <popup-frame :visible.sync="visible" @beforeClose="closePopup">
            <img src="../../../static/images/index/course.jpg" alt="弹框">
        </popup-frame>

        <!-- 学习内容 -->
        <div class="learnContent">
            <div class="minTitle">学习内容</div>
            <bar-pillar-chart style="margin-top:13px" :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="this.rightData.active.total" /><b>次</b>
                    </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"
            class="topic-frame"
        >
            <div class="img">
                <img src="../../../static/images/index/supply-demand1.jpg" alt="" v-show="topicShow">
                <img src="../../../static/images/index/supply-demand2.jpg" alt="" v-show="!topicShow">
                <div class="button" @click="topicChange"></div>
            </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 BarStacked from 'components/echarts/BarStacked.vue'
import BarPillarChart from 'components/echarts/BarPillarChart.vue'
import GuagePart from 'components/echarts/GuagePart.vue'
import LineBar from 'components/echarts/LineBar'

export default {
    name: 'Right',
    components: {
        TitleLine,
        BarChart,
        BarPillarChart,
        BarStacked,
        GuagePart,
        swiper,
        swiperSlide,
        LineBar
    },
    props: {
        rightData: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            visible: false,
            activeShow: false,
            showVisible: false,
            // 师资力量
            eduConfig: {},
            edu: [],
            staffConfig: {},
            staff: [],
            // 教学课程
            coursedata: [],
            lineConfig: {},
            line: [],
            // 学习内容
            learnConfig: {},
            learn: [],
            swiperOption: {
                mousewheel: true,
                centeredSlides: true,
                centeredSlidesBounds: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false // 手动切换之后继续自动轮播
                },
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    type: 'bullets'
                }
            },
            topicList: [
                {
                    img: require('../../../static/images/index/topic-bg1.png')
                },
                {
                    img: require('../../../static/images/index/topic-bg1.png')
                },
                {
                    img: require('../../../static/images/index/topic-bg1.png')
                }

            ],
            topicShow: true,
            // 活动开展
            active: [],
            activeConfig: {},
            activeList: []
        }
    },
    mounted () {
        this.init()
        this.getActiveList()
        this.getActive()
    },
    methods: {
        init () {
            const {
                staff,
                coursedata,
                line,
                learn
            } = this.rightData
            this.getstaff(staff)
            this.getEdudata()
            this.getcoursedata(coursedata)
            this.getlinedata(line)
            this.getlearn(learn)
        },
        // 师资力量
        getstaff (Data) {
            this.staffConfig = {
                option: {
                    seriesData: [
                        {
                            data: Data.list.map(item => item.value).reverse()
                        }
                    ],
                    base: {
                        yAxis: [{
                            data: Data.list.map(item => item.key).reverse()
                        }]
                    }
                }
            }
        },
        getEdudata (staff) {
            const edus = this.rightData.staff.list || []
            const num = edus.map(item => {
                return item.value
            })
            function sum (arr) {
                var s = 0
                arr.forEach(val => {
                    s += val
                })
                return s
            }
            const max = sum(num)
            this.edu = [
                {
                    value: max,
                    name: '教师数'
                }
            ]
            this.getEdu()
        },
        getEdu () {
            this.eduConfig = {
                option: {
                    seriesData: [
                        {
                            seriesName: 'main',
                            data: this.edu
                        }
                    ]
                }
            }
        },
        getcoursedata (data) {
            this.coursedata = data.list || []
        },
        getlinedata (data) {
            this.line = this.rightData.line.list.map(item => {
                return {
                    name: item.key,
                    value: item.value,
                    unit: item.unit
                }
            }) || []
            this.getline()
        },
        // 教学课程百分比
        getline () {
            this.lineConfig = {
                option: {
                    seriesData: [
                        {
                            itemStyle: {
                                color: 'rgba(0, 190, 255, .3)',
                                borderRadius: [5, 0, 0, 5]
                            },
                            data: [this.line[0]]
                        },
                        {
                            itemStyle: {
                                color: 'rgba(0, 222, 125, .3)',
                                barBorderRadius: [0, 5, 5, 0]
                            },
                            data: [this.line[1]]
                        }
                    ]
                }
            }
        },
        // 教学课程更多
        Seemore () {
            this.visible = true
        },
        // 教学课程更多关闭
        closePopup (flag) {
            this.visible = flag
        },
        // 学习内容
        getlearn (data) {
            const learn = data.data.list || []
            const xData = learn.map(v => v.key)
            const Data = learn.map(v => v.value)
            const max = Math.max.apply(null, Data)
            const maxdata = learn.map(v => {
                return ((v.value / max) * 100).toFixed(2)
            })
            this.learnConfig = {
                option: {
                    base: {
                        tooltip: {
                            textStyle: {
                                color: '#ffffff'
                            },
                            formatter: function (params) {
                                let str
                                learn.forEach((item, l) => {
                                    if (item.key === params[0].name) {
                                        str = '<span style="display:inline-block;width: 6px;height: 6px;background: linear-gradient(0deg, #1B5BAC 0%, #3680F6 0%, #4BBCF9 100%);border-radius: 50%;" /></span>' +
                                        '<span style="padding-left:5px;font-size: 13px;font-family: Century Gothic;font-weight: 400;color: #FFFFFF">' +
                                        item.value + item.unit +
                                        '</span><br/><span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #B8E6FF;">' +
                                        params[0].name + '</span>'
                                    }
                                })
                                return str
                            },
                            backgroundColor: 'rgba(55, 128, 246, 0.2)',
                            borderColor: 'rgba(55, 128, 246, 0.2)'
                        },
                        xAxis: {
                            data: xData
                        }
                    },
                    seriesData: [
                        {
                            data: maxdata
                        }
                    ]
                }
            }
        },
        // 活动展开
        getActiveList () {
            this.activeList = this.rightData.active.list.map(item => {
                return {
                    key: item.key,
                    value: item.value
                }
            })
        },
        getActive () {
            let yData = this.activeList.map(v => v.key).reverse() // y轴左侧的数据
            let y2Data = this.activeList.map(v => v.value).reverse() // y轴右侧的数据
            let max = this.rightData.active.total
            let maxData = new Array(this.activeList.length).fill(max)// x轴的最大值
            let pointData = this.activeList.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
                            }
                        ]
                    },
                    seriesData: [
                        {
                            name: 'back',
                            barWidth: '5px',
                            data: maxData
                        },
                        {
                            name: 'show',
                            barWidth: '5px',
                            itemStyle: {
                                borderRadius: [0, 0, 0, 0],
                                color: 'rgba(64, 169, 248, 0.3)'
                            },
                            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
        },
        topicChange () {
            this.topicShow = !this.topicShow
        }

    }
}
</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: 35%;
                    .act-left{
                        display: flex;
                        b{
                            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: 5%;
                    height: 76px;
                    margin: 10px 0 0 20px;
                    background:url('../../../static/images/index/3.png') no-repeat center;
                }
                .right{
                    width: 60%;
                    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;
                    }
                }
            }
        }
    }
    .topic-frame{
        width: 100%;
        height: 100%;
        .img{
            position: relative;
            width: 100%;
            height: 100%;
            .button{
              width: 50px;
              height: 100px;
              position: absolute;
              top: 40%;
              right: 10px;
              cursor: pointer;
            }
        } 
    }
}
</style>