<template>
    <div class="main">
        <div class="basic">
            <!-- 背景图片 -->
            <img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
            <!-- 个人信息 -->
            <div class="info">
                <!-- 左侧头像 -->
                <div class="info-profile">
                    <img src="../images/profile.jpg" alt="">
                </div>
                <!-- 右侧个人信息 -->
                <ul class="info-detail">
                    <li>
                        <span class="info-detail-name">王小呆</span>
                        <span class="info-detail-others">学习能手</span>
                    </li>
                    <li>
                        <span class="info-detail-others">自2016.3.23起</span>
                        <span class="info-detail-others">您与云鹊医相识已经483天啦</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="detail">
            <div class="tab-header">
                <div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
                    <div class="text">
                        本院
                    </div>
                    <div class="bar">

                    </div>
                </div>
                <div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
                    <div class="text">
                        本省
                    </div>
                    <div class="bar">

                    </div>
                </div>
                <div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
                    <div class="text">
                        全国
                    </div>
                    <div class="bar">

                    </div>
                </div>
            </div>
            <div class="tab">
                <!-- 近七天成长路径 -->
                <div class="sub grow-path">
                    <header class="title">近7天成长路径</header>
                    <!-- 图表 -->
                    <div id="growPath" class="grow-path-chart"> 
                    </div>
                </div>
                <!-- 学习情况 -->
                <div class="sub study-condition">
                    <header class="title">学习情况</header>
                    <!-- 图表 -->
                    <div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">

                    </div>
                    <!-- 对比 -->
                    <div class="study-condition-cmp">
                        <header>
                            <div class="title">我的Top3</div>
                            <div class="title">院内Top3</div>
                        </header>
                        <div class="rank">
                            <div class="rank-sec my-rank">
                                <div class="rank-item">
                                    <div class="rank-num">1</div>
                                    <div class="rank-name">治疗药物检测的临床意义</div>
                                </div>
                                <div class="rank-item">
                                    <div class="rank-num">2</div>
                                    <div class="rank-name">治疗药物检测的临床意义</div>
                                </div>
                                <div class="rank-item">
                                    <div class="rank-num">3</div>
                                    <div class="rank-name">治疗药物检测的临床意义</div>
                                </div>
                            </div>
                            <div class="rank-sec all-rank">
                                <div class="rank-item">
                                    <div class="rank-num">1</div>
                                    <div class="rank-name">聚集糖尿病治疗与管理</div>
                                </div>
                                <div class="rank-item">
                                    <div class="rank-num">2</div>
                                    <div class="rank-name">聚集糖尿病治疗与管理</div>
                                </div>
                                <div class="rank-item">
                                    <div class="rank-num">3</div>
                                    <div class="rank-name">治疗药物检测的临床意义</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 为你推荐 -->
                <div class="recommend-for-you">
                    <recommend-list-test :title="recommendTitle" position="center" :recommends="recommendList"></recommend-list-test>

                </div>
                <!-- 其它为你推荐 -->
                <recommend-list-test 
                    title="你可能需要" 
                    title-position="center"
                    has-more=true
                    has-course-tag=true
                    tag-position="right"
                    :recommends="recommendListTest"></recommend-list-test>

            </div>
        </div>
        
    </div>
</template>

<script>
import RecommendList from './RecommendList.vue'
import RecommendListTest from './RecommendListTest.vue'

var echarts=require('echarts');
export default {
    name:'gpranking',
    components:{
        RecommendList,
        RecommendListTest
    },
    data(){
        return{
            currentTab:0,
            //编辑的数据
            basicInfo:{"name":"王小呆","level":"学习小能手","date":"2016.3.23","days":555,"imgLink":""},
            //图表数据
            OptionStudyCondition:{},
            OptionGrowPath:{},
            //为你推荐数据：
            recommendTitle:"为你推荐",
            recommendList:[],
            recommendListTest:[]

        }
    },
    mounted(){
        this.getData();
        // this.generateExample();
        this.generateStudyConditionChart();
        this.generateGrowPathChart();
        //为你推荐
        this.getRecommendList();
      




    },
    methods:{
        getData:function(){
            this.OptionGrowPath={
                title:{
                    show:true,
                },
                legend:{
                    data:[
                        {
                            name:'我的学习时长',
                            icon:'line',
                            textStyle:{
                                // color:'blue'
                            }
                        },
                        {
                            name:'我的学习课程',
                        },
                        {
                            name:'平均学习时长',
                            icon:'line',
                        },
                        {
                            name:'平均学习课程',
                        }                           
                        ],
                    top:0,
                    padding:10,
                    // show:false

                },
                dataset: {
                    //提供一份数据
                    source: [
                        ['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
                        ['10.6','15','22','2','4'],
                        ['10.7','15','24','2','4'],
                        ['10.8','17','28','2','4'],
                        ['10.9','15','18','2','4'],
                        ['10.10','17','19','2','4'],
                        ['今天','15','20','2','4']
                    ]
                },
                grid:{
                    left:0,
                    right:0,
                    bottom:0
                },
                xAxis:[
                    {
                        type:'category',
                        axisLine:{
                            lineStyle:{
                                type:'solid',
                                color:'#aaa',
                                width:'4',
                            },
                        },
                        axisLabel:{
                            show:true,
                            textStyle:{
                                // color:'#aaa', //坐标值具体的颜色
                                // color:'rgb(255,0,0)',
                            },
                            fontSize:'10px',
                        },
                        axisTick:{
                            show:false,
                            // length:10
                        },
                    }
                ],
                yAxis:[
                    {
                        type:'value',
                        name:'时长',
                        // interval:25,
                        min:0,
                        max:40,
                        axisLabel:{
                            formatter:`{value}min`
                        },
                        show:false
                        // show:true

                    },
                    {
                        type:'value',
                        name:'课程',
                        min:0,
                        max:10,
                        axisLabel:{
                            formatter:`{value}`
                        },
                        show:false


                    
                    }
                    

                ],
                series:[
                    //['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
                    {
                        type:'line',
                        symbol:'none',
                        itemStyle:{'color':'#FFCE67'}
                    },{
                        type:'line',
                        symbol:'none',
                        itemStyle:{'color':'#FFCE67','opacity':0.4}//折线上的效果不好
                    },{
                        type:'bar',
                        yAxisIndex:1,
                        label:{
                            show:true,
                            position:'top'
                        },
                        barGap:0.1,
                        barCategoryGap:'30px',
                        itemStyle:{'color':'#FFCE67'}
                    },{
                        type:'bar',
                        yAxisIndex:1,
                        label:{
                            show:true,
                            position:'top'
                        },
                        barGap:0.1,
                        barCategoryGap:'30px',
                        itemStyle:{'color':'#FFCE67','opacity':0.4}
                    }
                    
                ]

            };
            this.OptionStudyCondition={
                // color:{},
                legend: {},
                tooltip: {},
                dataset: {
                    //提供一份数据
                    source: [
                        ['content', '我的', '本院平均'],
                        ['在学课程', 12, 10],
                        ['完成课程', 56,62],
                        ['完成考试', 23,45],
                        ['获得证书', 8,20],
                        ['参与项目', 4,6]
                    ]
                },
                grid:{
                    show:false,
                    left:0,
                    right:0,
                    // bottom:0
                },
                textStyle:{
                    color:'#444'
                },
                xAxis: {
                    type: 'category',
                    // name:'xxxx',
                    axisLine:{
                        lineStyle:{
                            type:'solid',
                            color:'#aaa',
                            width:'4',
                        },
                    },
                    triggerEvent:true,
                    axisLabel:{
                        show:true,
                        textStyle:{
                            // color:'#aaa', //坐标值具体的颜色
                            // color:'rgb(255,0,0)',
                        },
                        fontSize:'10px',
                        clickable:true
                    },
                    axisTick:{
                        show:false,
                        // length:10
                    },
                    
                    data:[
                        {value:'在学课程',
                        textStyle:{fontweight:'bold',color:'#000'}}, 
                    '完成课程', '完成考试','获得证书', '参与项目'],
                   
                        
                        

                },
                yAxis: {
                    show:false,
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barGap:0,
                        barCategoryGap:'30px',
                        label:{
                            show:true,
                            position:'top'
                        },
                        itemStyle:{
                            'color':'#5489FD',
                            'opacity':0.84
                        }
                    },
                    {
                        type: 'bar',
                        barGap:0.1,
                        barCategoryGap:'30px',
                        label:{
                            show:true,
                            position:'top'
                        },
                        itemStyle:{
                            'color':'#5489FD',
                            'opacity':0.34
                        }
                    }
                ]
            };
           
        },
        getRecommendList(){
            this.recommendList=[
                {name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
                {name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
                {name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
                {name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'}
            ],
            this.recommendListTest=[
                {name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'诊断'},
                {name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'治疗'},
                {name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
                {name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'检查'},
                {name:'肖丹丹',num:'670',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
                {name:'肖丹丹',num:'670',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
                {name:'肖丹丹',num:'670',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
                {name:'肖丹丹',num:'670',title:'患者心理学入门',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'}
            ]
        },
        toggleTab:function(tab){
            this.currentTab=tab;

        },
        generateGrowPathChart:function(){
            let growPathChart=echarts.init(document.getElementById('growPath'));
            growPathChart.setOption(this.OptionGrowPath);
            growPathChart.on('click',function(params){
                if(params.value){
                    alert("单击了"+params.name+"柱状图");
                }else{
                    alert("单击了"+params.name+"x轴标签");
                }
                // console.log(params)
            });
            // s

        },
        generateStudyConditionChart:function(){
            let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
            studyConditionChart.setOption(this.OptionStudyCondition);
            // studyConditionChart.on('axisareaselected',function(){
            //     console.log('xxx')
            // })
            studyConditionChart.on('click',function(params){
                if(params.value){
                    alert("单击了"+params.name+"柱状图");
                }else{
                    alert("单击了"+params.name+"x轴标签");
                }
                // console.log(params)
                if(params.componentType=='xAxis'){
                    // console.log(params.value)
                }
            });
           
        }
    }
}
</script>
<style scoped>
    /*****************************************basic信息******************************************/
    .basic{
        width:100%;
        /* min-height:358px; */
        position:relative;
    }
    .basic .bg{/*图片响应式:内容自动向下排列*/
        width:100%;
        /* height:380px; */
    }
    .basic .info{
        /*实现多个元素水平方向上居中*/
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
        justify-content: center;
        position: absolute;
        top:7.8rem;/*整体距离顶部的位置*/
        width:100%;
    }
    .basic .info-profile {
        margin-right:1rem;
    }
    .basic .info-profile img{
        width:4.5rem;
        height:4.5rem;
        border-radius:2.25rem;
    }
    .basic .info-detail{
        display:flex;
        flex-direction:column;
    }
    .basic .info-detail li{
        margin-bottom:0.3rem;
        text-align:left;
        color:#fff;
    }
    .basic .info-detail .info-detail-name{
        margin-right:0.6rem;
        height:2.25rem;
        line-height:2.25rem;
        font-size:1.6rem;
        font-weight:500;
    }
    .basic .info-detail .info-detail-others{
        margin-right:0.6rem;
        height:2rem;
        line-height:2rem;
        font-size:1.3rem;
        font-weight:400;
    }
    /****************************************具体信息*****************************************/
    .detail{
        display:flex;
        flex-direction: column;
        /* justify-content:center; */
        width:100%;
        padding:0 1.5rem;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .tab-header{
        display:flex;
        justify-content:center;
        width:100%;
        height:3.45rem;
    }

    .tab-header .tab-header-name{
        width:3rem;
        font-size:1.5rem;
        font-weight:400;
        color:rgb(153,153,153)
        /* padding:1rem; */
        /* margin:0 2rem; */

    }
    .tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
        margin-right:6.75rem;

    }

    .tab-header .tab-header-name .text{
        height:1.7rem;
        line-height:1.7rem;

    }
    .tab-header .tab-header-name.active .bar{
        width:1rem;
        height:0.3rem;
        margin-top:0.95rem;
        margin-left:1rem;/*(3-1)/2*/
        background:rgba(84,137,253,1);
        border-radius:0.15rem;
        
    }

    .tab-header .tab-header-name.active{
        font-weight:500;
        color:rgba(51,51,51)
    }

    .tab{
        width:100%;
    }
   
    .sub.grow-path,.sub.study-condition{
        /* margin-left:2rem;
        margin-right:2rem; */
        padding:0 0.5rem;
    }
    /* .sub.recommend-for-you{
        margin-left:1.5rem;
        margin-right:1.5rem;
    } */

    .sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
        margin-top:2.5rem;
        margin-bottom:1.1rem;
        height:2.5rem;
        line-height:2.5rem;
        font-size:1.8rem;
        color:#333;
        text-align:center;
    }
    /*成长情况*/
    .grow-path-chart{
        width:100%;
        min-height:27rem;/*(33+1125-543)/20*/
    }
    /*学习情况*/
    .study-condition-cmp{
        width:100%;
        height:23.9rem;
        background-color:rgb(234,241,255);

    }
    .study-condition-cmp>header{
        display:flex;
        display: -webkit-flex;
        flex-direction:row;
        height:3.75rem;
        line-height:3.75rem;
        font-size:1.2rem;
        font-weight: 400;
    }
    .study-condition-cmp>header>.title{
        width:50%;
        text-align:center;
    }
    .study-condition-cmp .rank{
        display:flex;
        display: -webkit-flex;
        flex-direction:row;
    }
    .study-condition-cmp .rank .rank-sec{
        background-color: #fff;
        width:50%;
    }
    .study-condition-cmp .rank .rank-sec.my-rank{
        margin-right:1.4rem;
        /* border-top-right-radius: 0.5rem; */
        /* border-bottom-right-radius: 0.5rem; */
    }
    .study-condition-cmp .rank .rank-sec.all-rank{
        margin-left:1.4rem;
        /* border-top-left-radius: 0.5rem; */
        /* border-bottom-left-radius: 0.5rem; */
    }
    .study-condition-cmp .rank .rank-sec .rank-item{
        display:flex;
        display:-webkit-flex;
        flex-flow:row;
        -ms-flex-flow: row;
        align-items: center;
        background-color:rgb(234,241,255);
        color:#666;
        border-radius: 0.15rem;
        height:5.2rem;/*?*/
    }
    /*控制rank-item的具体margin状况*/
    .study-condition-cmp .rank .rank-sec.my-rank .rank-item{
        margin:0.7rem 0.75rem 1rem 0;
    }
    .study-condition-cmp .rank .rank-sec.all-rank .rank-item{
        margin:0.7rem 0 1rem 0.75rem;
    }
    .study-condition-cmp .rank .rank-sec .rank-item:nth-last-child(1){
        margin-bottom:0.7rem;
    }
    .study-condition-cmp .rank .rank-sec .rank-item .rank-num{
        width:1.3rem;
        height:1.3rem;
        text-align:center;
        line-height:1.3rem;
        background-color: #709CFE;
        color:#fff;
        font-weight:400;
        font-size:1.2rem;
        border-radius: 0.65rem;
        margin-left:1rem;
        margin-right:0.7rem;
        /* margin:0 0.5rem; */

    }
    .study-condition-cmp .rank .rank-sec .rank-item .rank-name{
        font-size:1.3rem;
        font-weight:400;
        margin-right:0.95rem;
        color:rgb(102,102,102);
        height:3.7rem;
        line-height:1.85rem;
    }
    /*为你推荐*/
   .recommend-for-you{
       padding-top:0.5rem;/*补充推荐list组件里不足的顶部间距*/
   }
</style>




