<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="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
                </div>
                <!-- 右侧个人信息 -->
                <div class="info-detail">
                    <div class="info-detail-name">
                        王小呆
                    </div>
                    <div class="info-detail-others">
                            自<span> 2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦
                        
                    </div>
                </div>
            </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">30天成长路径</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 :title="recommendTitle" title-position="center" :recommends="recommendList"></recommend-list>

                </div>
                <!-- 其它为你推荐 -->
                <recommend-list 
                    title="你可能需要" 
                    title-position="left"
                    has-change=true
                    has-more=true
                    has-course-tag=true
                    tag-position="right"
                    :recommends="recommendListTest"></recommend-list>
                <!-- 课程列表 -->
                <course-list 
                    title="你可能需要" 
                    title-position="left"
                    has-change=true
                    has-more=true
                    has-course-tag=true
                    tag-position="right"
                    :courses="courseList"></course-list>

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

<script>
// import RecommendList from './RecommendList.vue'
// import RecommendListTest from './RecommendListTest.vue'
import RecommendList from 'src/components/common/yqy/RecommendList.vue'
import CourseList from 'src/components/common/yqy/CourseList.vue'

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

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




    },
    methods:{
        handleData:function(){
            this.OptionGrowPath={
                // title:{
                //     show:true,
                // },
                legend:{
                    itemHeight:6,//图例的高度
                    itemGap:10,//图例间距
                    itemWidth:10,//图例的宽度
                    textStyle:{//整体设置文字部分的样式
                                color:'#666',
                                fontSize:12,
                                fontweight:400,
                                height:16.5,
                                lineHeight:16.5,
                                padding:[0,30,0,0],
                                // borderColor:'#ccc',
                                // borderWidth:2,
                                
                            },
                    data:[
                            {
                                name:'我的学习时长',
                                icon:'line',
                            },
                            {
                                name:'我的学习课程',
                            },
                            {
                                name:'平均学习时长',
                                icon:'line',
                            },
                            {
                                name:'平均学习课程',
                            }                           
                        ],

                },
                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'],
                        ['今天','15','20','2','4']
                    ]
                },
                grid:{
                    left:0,
                    right:0,
                    bottom:0
                },
                xAxis:
                    {
                        type:'category',
                        axisLine:{
                            lineStyle:{
                                type:'solid',
                                color:'#EDEEF0',
                                width:'2',
                            },
                        },
                        axisLabel:{
                            show:true,
                            textStyle:{
                                // color:'#aaa', //坐标值具体的颜色
                                // color:'rgb(255,0,0)',
                            },
                            fontSize:'10px',
                        },
                       
                        axisTick:{
                            show:false,
                            // length:10
                        },
                        data:[
                                    {value:'10.6',
                                        textStyle:{fontweight:'bold',color:'#000'}}, 
                                    '10.7', '10.8','10.9', '今天'],
                                    
                    },
                yAxis:[
                    {
                        type:'value',
                        name:'时长',
                        // interval:25,
                        min:0,
                        // max:60,
                        axisLabel:{
                            formatter:`{value}min`
                        },
                        show:false

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


                    
                    }
                    

                ],
                series:[
                    //['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
                    {
                        type:'line',
                        symbol:'none',
                        smooth:true,
                        itemStyle:{'color':'#449284'}
                    },{
                        type:'line',
                        symbol:'none',
                        smooth:true,
                        itemStyle:{'color':'#CAA861'}
                    },{
                        type:'bar',
                        yAxisIndex:1,
                        label:{
                            show:true,
                            position:'top'
                        },
                        barGap:0.1,
                        barCategoryGap:'30px',
                        itemStyle:{'color':'#CAA861'}
                    },{
                        type:'bar',
                        yAxisIndex:1,
                        label:{
                            show:true,
                            position:'top'
                        },
                        barGap:0.1,
                        barCategoryGap:'30px',
                        itemStyle:{'color':'rgba(202,168,97,0.2)'}//透明度以这种方式设置，才会在图例中有效果
                    }
                    
                ]

            };
            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/recommendPic.png'},
                {name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
                {name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
                {name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'}
            ],
            this.recommendListTest=[
                {name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
                {name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'治疗'},
                {name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'随访'},
                {name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
               
            ],
            this.courseList=[
                {name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
                {name:'肖小丹',num:'1.1k',time:'3小时前',saveStatus:false,title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'糖尿病'},
                {name:'肖丹丹',num:'668',time:'3小时前',saveStatus:false,title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'心脏病'},
                {name:'肖丹丹',num:'669',time:'3小时前',saveStatus:true,title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.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 lang="scss" scoped>
    @import '../../style/mixin';
    /*****************************************basic信息******************************************/
    .main{
        background-color:$fc;//整体背景为蓝色
    }
    .basic{
        width:px2rem(375px);
        height:px2rem(150px);
        position:relative;
    }
    .basic .bg{/*图片响应式:内容自动向下排列*/
        width:px2rem(375px);
        height:px2rem(119px);
        // margin-bottom:px2rem(51px)
    }
    .basic .info{
        @include cl;//水平居中
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
        justify-content: center;
        position: absolute;
        top:px2rem(80px);
        width:px2rem(345px);
        height:px2rem(70px);
        border-radius:px2rem(3px);
        box-shadow: 0 px2rem(1px) px2rem(11px) 0 rgba(21,138,123,0.1);
    }
    .basic .info-profile {
        margin-right:px2rem(5px);
        display:flex;
        display:-webkit-flex;
        flex-direction: row;
        align-items:center;
    }
    .basic .info-profile img{
        width:px2rem(40px);
        height:px2rem(40px);
        border-radius:px2rem(20px);
    }
    .basic .info-detail{
        display:flex;
        display:-webkit-flex;
        flex-direction:column;
        justify-content: center;

    }
    .basic .info-detail .info-detail-name{
        font-size:px2rem(15px);
        font-weight:500;
        margin-bottom:px2rem(3px);
        text-align:left;
    }
    .basic .info-detail .info-detail-others{
        height:px2rem(20px);
        line-height:px2rem(20px);
        font-size:px2rem(13px);
        font-weight:400;
        color:rgb(102,102,102)
    }
    /****************************************具体信息*****************************************/
    .detail{
        display:flex;
        flex-direction: column;
        /* justify-content:center; */
        width:100%;
        padding-top:px2rem(20px);
        padding-right:px2rem(15px);
        padding-left:px2rem(15px);
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .tab-header{
        display:flex;
        justify-content:center;
        width:100%;
        height:px2rem(34.5px);
        box-shadow: 0 px2rem(2px) px2rem(4px) 0 rgba(0,0,0,0.04)
    }

    .tab-header .tab-header-name{
        width:px2rem(30px);
        height:px2rem(17px);
        line-height:px2rem(17px);
        font-size:px2rem(15px);
        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:px2rem(67.5px);

    }

    .tab-header .tab-header-name .text{
        height:px2rem(17px);
        line-height:px2rem(17px);

    }
    .tab-header .tab-header-name.active .bar{
        width:px2rem(10px);
        height:px2rem(3px);
        margin-top:px2rem(9.5px);
        margin-left:px2rem(10px);
        background:#449284;
        border-radius:px2rem(1.5px);
    }

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

    .tab{
        width:100%;
    }
   
    .sub.grow-path,.sub.study-condition{
        padding:0 px2rem(5px);
    }

    .sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
        margin-top:px2rem(25px);
        margin-bottom:px2rem(11px);
        height:px2rem(25px);
        line-height:px2rem(25px);
        font-size:px2rem(18px);
        font-weight:400;
        color:#333;
        text-align:center;
    }
    .sub.grow-path>.title{
        margin-top:px2rem(25px);
    }
    .sub.study-condition>.title{
        margin-top:px2rem(20px);
    }

    /*成长情况*/
    .grow-path-chart{
        width:100%;
        height:px2rem(282px);/*(33+532)/2*/
    }
    /*学习情况*/
    .study-condition-cmp{
        width:100%;
        height:px2rem(239px);
        background-color:rgb(234,241,255);

    }
    .study-condition-cmp>header{
        display:flex;
        display: -webkit-flex;
        flex-direction:row;
        height:px2rem(37.5px);
        line-height:px2rem(37.5px);
        font-size:px2rem(12px);
        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:px2rem(14px);
    }
    .study-condition-cmp .rank .rank-sec.all-rank{
        margin-left:px2rem(14px);
    }
    .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: px2rem(1.5px);
        height:px2rem(52px);/*?*/
    }
    /*控制rank-item的具体margin状况*/
    .study-condition-cmp .rank .rank-sec.my-rank .rank-item{
        margin:px2rem(7px) px2rem(7.5px) px2rem(10px) 0;
    }
    .study-condition-cmp .rank .rank-sec.all-rank .rank-item{
        margin:px2rem(7px) 0 px2rem(10px) px2rem(7.5px);
    }
    .study-condition-cmp .rank .rank-sec .rank-item:nth-last-child(1){
        margin-bottom:px2rem(7px);
    }
    .study-condition-cmp .rank .rank-sec .rank-item .rank-num{
        width:px2rem(13px);
        height:px2rem(13px);
        text-align:center;
        line-height:px2rem(13px);
        background-color: #709CFE;
        color:#fff;
        font-weight:400;
        font-size:px2rem(12px);
        border-radius: px2rem(6.5px);
        margin-left:px2rem(10px);
        margin-right:px2rem(7px);
        /* margin:0 0.5rem; */

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





