<template>
   <div class="main-page">
           <div class="page-overview">
               <div class="divHeight">
                   <div class="w50">
                        <div class="type-lis-cont">
                               <div class="lis clear">
                                   <div class="icon">
                                    <img src="@/assets/icon_img/v1.png" alt="" />
                                   </div>
                                   <div class="txt">
                                       <div class="type-desc">胸痛中心</div>
                                       <div class="num-desc"><span>{{ centerSummary.chestTotal }}</span>个</div>
                                   </div>
                                   <div class="tip type1">
                                        <div>{{ centerSummary.nomalChestTotal }}</div>
                                        <div>{{ centerSummary.basicChestTotal }}</div>
                                   </div>
                               </div>
                               <div class="lis clear">
                                   <div class="icon">
                                        <img src="@/assets/icon_img/v2.png" alt="" />
                                   </div>
                                   <div class="txt">
                                       <div class="type-desc">卒中中心</div>
                                       <div class="num-desc"><span>{{centerSummary.strokeTotal}}</span>个</div>
                                   </div>
                                   <div class="tip type2">
                                        <div>{{ centerSummary.seniorStrokeTotal }}</div>
                                        <div>{{ centerSummary.treatmentStrokeTotal }}</div>
                                   </div>
                               </div>
                               <div class="lis clear">
                                   <div class="icon">
                                        <img src="@/assets/icon_img/v3.png" alt="">
                                   </div>
                                   <div class="txt">
                                       <div class="type-desc">创伤中心</div>
                                       <div class="num-desc"><span>{{centerSummary.traumaTotal}}</span>个</div>
                                   </div>
                               </div>
                               <div class="lis clear">
                                   <div class="icon">
                                        <img src="@/assets/icon_img/v4.png" alt="">
                                   </div>
                                   <div class="txt">
                                       <div class="type-desc">烧伤中心</div>
                                       <div class="num-desc"><span>{{centerSummary.burnTotal}}</span>个</div>
                                   </div>
                               </div>
                        </div>
                        <div class="map-cont">
                            <div class="overview-map" ref="MapChart"></div>
                        </div>  
                   </div>
                   <div class="w50">
                        <div class="div-charts">
                            <div class="charts-title">{{newyear}}年武汉市各中心授牌数量({{p1itemTotal}}) <span :class="{down:addOrReduce!=1}">{{descTxt}}<i :class="[addOrReduce==1?`el-icon-top`:`el-icon-bottom`,`bold`]"></i></span></div>
                            <div class="charts-cont" ref="pie01"></div>    
                        </div>
                        <div class="div-charts">
                            <div class="charts-title">{{oldyear}}年武汉市各中心授牌数量({{p2itemTotal}})</div>
                            <div class="charts-cont" ref="pie02"></div>
                        </div>
                    </div>
               </div>
           </div>
           <div class="page-overview" style="margin-top:20px;">
               <div class="bar-cont">   
                    <div class="charts-title">武汉市各区域胸痛卒中创伤烧伤认证授牌统计</div>
                    <div>
                        <div class="bar-Div" ref="BarEl"></div>
                        <div class="scroll_Box" ref="BarScBox"  @scroll="SCOllBoxFn(`BarData`,`BarEl`,`BarScBox`,`BarScLine`,`persw`)">
                                <div ref="BarScLine"></div>
                        </div>
                    </div>
               </div>
           </div>
   </div>
</template>

<script>
import * as echarts from 'echarts';
import wuhan from '@/assets/map/wuhan.json';
import {constructionStatistics} from '@/api/hospital';
export default{
  name: 'overviewIndex',
  data() {
    var year=(new Date()).getFullYear(),oldYear=year-1;
    return {
        oldyear:oldYear,
        newyear:year,
        centerSummary: {},
        p1itemTotal:null,
        p2itemTotal:null,
        addOrReduce:'1',
        addPercent:'',
        descTxt:'',
        areaCenters:[
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"蔡甸区","areaCenters":[]},
            {"chestTotal":1,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":1,"areaName":"江岸区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"江夏区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"武昌区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"汉南区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"新洲区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"江汉区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"东西湖区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"洪山区","areaCenters":[]},
            {"chestTotal":1,"strokeTotal":1,"burnTotal":1,"traumaTotal":1,"itemTotal":1,"areaName":"青山区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"汉阳区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"黄陂区","areaCenters":[]},
            {"chestTotal":0,"strokeTotal":0,"burnTotal":0,"traumaTotal":0,"itemTotal":0,"areaName":"硚口区","areaCenters":[]}
        ],

        BarData:{
            Namelis:[
                "a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15","a16","a17","a18","a19","a20","a21","a22","a23","a24","a25","a26","a27","a28","a29","a30","a31","a32","a33","a34","a35","a36","a37","a38","a39","a40","a41","a42","a43","a44","a45","a46","a47","a48","a49","a50","a51","a52","a53","a54","a55","a56","a57","a58","a59","a60","a61","a62","a63","a64","a65","a66","a67","a68","a69","a70","a71","a72","a73","a74","a75","a76","a77","a78","a79","a80","a81","a82","a83","a84","a85","a86","a87","a88","a89","a90","a91","a92","a93","a94","a95","a96","a97","a98","a99"
            ],
            Arr:[
                [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
                [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
                [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97],
                [39,50,46,32,19,24,41,55,1,85,80,14,37,90,37,19,70,29,81,44,34,26,48,9,35,47,41,5,68,88,65,86,7,11,24,89,31,90,13,80,10,67,26,40,53,10,42,51,96,43,72,64,74,85,28,44,65,86,25,27,29,79,65,70,81,98,69,80,31,34,80,50,42,18,57,1,91,36,41,23,83,53,67,40,47,43,36,48,11,51,54,57,25,36,58,89,22,95,97,91],
            ]
        },
        ViewLen:{
            persw:null,
        }

    }
  },
  mounted() {
      var that=this;
      that.$nextTick(()=>{
         echarts.registerMap('wuhan', wuhan)
        //  that.drawChar();
        //  that.drawPie();
        //  that.drawBar();
         that.getServeData();
      });
  },
  methods:{
    getServeData(){
        var that=this;
        constructionStatistics({}).then((res)=>{
            if (res.msg == 201) {
                that.fillServeData(res.respData);
            } else {
                this.$message.error(res.content)
            }
        })
    },
    gv(value,dValue){ return (value)?value:dValue },
    fillServeData(respData){
        var that=this;
        var centerSummary=respData.centerSummary
        this.centerSummary = centerSummary

        that.addOrReduce=respData.addOrReduce;
        that.addPercent=respData.addPercent;
        that.descTxt=`同比${that.addOrReduce==1?'增长':'减少'}${that.addPercent}%`;
        var kys=['chestTotal','strokeTotal','traumaTotal','burnTotal'];
        var Names=['胸痛','卒中','创伤','烧伤'];
        var refNames=['pie01','pie02'];
        var gks=['p1itemTotal','p2itemTotal'];
        // that.drawPie('pie01',[])
        that.gv(respData.twoYearsData,[]).forEach(function(pie,i){
            that[gks[i]]=pie.itemTotal;
            that.drawPie(refNames[i],kys.map(function(ky,j){ return {  value:pie[ky],  name:Names[j] } }))
        });
        var areaCenters=that.gv(centerSummary.areaCenters,[]);
        that.drawChar(areaCenters);
        var result=areaCenters.reduce(function(prv,cur,i,arr){
            prv.Names.push(cur.areaName);
            kys.forEach((ky,j)=>{ prv.arr[j].push(cur[ky])  })
            return prv;
        },{Names:[],arr:[[],[],[],[]]});
        console.log(result);
        that.BarData.Namelis=Object.freeze(result.Names);
        that.BarData.Arr=Object.freeze(result.arr.map(Object.freeze));
        that.drawBar();
    },
    drawChar(areaCenters){
      var that=this;
      var myChart=that.getCtx('MapChart')
      const list = areaCenters.map((item, index) => {
        return Object.assign(item,{name: item.areaName},{value: item.itemTotal});
      });
      let option = {
            tooltip: {
                trigger: 'item',
                formatter:function(p){
                    const params=p.data;
                    const htmlStr=`<style type="text/css">
                        .tip111 .name {
                        padding:2px 5px 15px;
                        font-size:16px;
                        font-weight: bold;
                        color: #000000;
                        width:180px;
                        }
                        .tip111 .b {
                        height:140px;
                        }
                        .tip111 .l,
                        .tip111 .r {
                            float: left;
                            height: 100%;
                        }
                        .tip111 .l {
                        box-sizing: border-box;
                        border-right:1px solid rgba(0, 0, 0, 0.38);
                        padding-top:6px;
                        text-align: center;
                        width:68px;
                        }
                        .tip111 .l .p1 {
                        font-size:14px;
                        color: rgba(0, 0, 0, 0.6);
                        }
                        .tip111 .l .p2 {
                        font-size:30px;
                        color: #000000;
                        margin-top: 16px;
                        }
                        .tip111 .r {
                        width: 60%;
                        }
                        .tip111 .r li {
                        padding:6px 1px 6px;
                        font-size:14px;
                        color: #000000;
                        line-height:1.5;
                        }
                        .tip111 .r li i {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        vertical-align: middle;
                        border: 1px solid #ffffff;
                        margin: auto 4px auto 8px;
                        border-radius: 50%;
                        }
                        .tip111 .r li i.xt {
                        background: #ff3178;
                        }
                        .tip111 .r li i.cz {
                        background: #316aff;
                        }
                        .tip111 .r li i.css {
                        background: #ff8931;
                        }
                        .tip111 .r li i.ss {
                        background: #ff5600;
                        }
                        .tip111 .r li span:nth-child(2) {
                        display: inline-block;
                        width:40px;
                        }
                        .tip111 .r li .num {
                        font-weight: bold;
                        }
                    </style>
                    <div class="tip111">
                        <p class="name">${params.name}</p>
                        <div class="b">
                            <div class="l">
                            <p class="p1">项目总数</p>
                            <p class="p2">${params.itemTotal}</p>
                            </div>
                            <ul class="r">
                            <li>
                                <i class="xt"></i>
                                <span>胸痛</span>
                                <span class="num">${params.chestTotal}</span>
                            </li>
                            <li>
                                <i class="cz"></i>
                                <span>卒中</span>
                                <span class="num">${params.strokeTotal}</span>
                            </li>
                            <li>
                                <i class="css"></i>
                                <span>创伤</span>
                                <span class="num">${params.traumaTotal}</span>
                            </li>
                            <li>
                                <i class="ss"></i>
                                <span>烧伤</span>
                                <span class="num">${params.burnTotal}</span>
                            </li>
                            </ul>
                        </div>
                    </div>`;
                    return htmlStr;
                }
                },
            series: [
              {
                name: '武汉市地图',
                type: 'map',
                selectedMode: 'single',
                mapType: 'wuhan', // 自定义扩展图表类型
                // label: {
                //   show: true
                // },
                zoom:1.2,
                emphasis: {
                  label: {
                    show: false
                  },
                  itemStyle: {
                    areaColor: '#00FFFC',
                    backgroundColor: '#00FFFC',
                  },
                },
                select: {
                  label: {
                    show: false
                  },
                  itemStyle: {
                    areaColor: '#F1B770',
                    backgroundColor: '#00FFFC',
                  },
                },
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#000D4A'
                },
                top:50,
                bottom:50,
                data: list
              }
            ]
      };
      myChart.setOption(option);
    },
    drawPie(refName,data){
        var that=this;
        var myChart=that.getCtx(refName);
        var opts={
                legend: {
                    orient: 'vertical',
                    x: '15',
                    y: 'center',
                    // 设置图例形状
                    itemWidth:12,  // 设置宽度
                    itemHeight:12, // 设置高度
                    itemGap:25,
                    textStyle:{
                        color:"#000",
                        fontSize: 14,
                        paddingLeft:5,
                    },
                },
                series: [
                  {
                    type: 'pie',
                    radius: ['38%', '53%'],
                    center: ["50%", "50%"],
                    avoidLabelOverlap: false,
                    hoverAnimation: true,
                    label:{
                        formatter:function(params){
                            return `${params.name}中心：${params.percent}%  {txt2|${params.value}}`
                        },
                        rich:{
                            txt2:{
                                fontWeight:'bold'
                            }
                        },
                        textStyle:{
                            color:'rgba(68, 68, 68, 0.8)'
                        }
                    },
                    color:['#3683B8', '#4294EA','#8DCA86', '#E8AC63'],
                    emphasis: { /*强调样式*/
                      label: {
                        show: true
                      }
                    },
                    labelLine: {
                      show: true
                    },
                    data:data,
                  }
                ]
              };
        myChart.setOption(opts);
    },
    drawBar(){
        var that=this;
        var Oc={datakey:'BarData',dom:'BarEl',scBox:'BarScBox',scline:'BarScLine',vlen:'persw'};
        var drData=that[(Oc.datakey)];
        var Namelis=drData.Namelis;
        if(Namelis.length=='0'){ return; }
        var Arr=drData.Arr;
        var Wh=(that.$refs[(Oc.scBox)]).offsetWidth;
        var ViLen=Math.ceil((Wh-150)/200);
        var Rlen=(ViLen>=Namelis.length)?(Namelis.length):ViLen;
        // Rlen=(Rlen>=6)?6:Rlen;
        //console.log('当前屏幕尺寸下页面显示柱状图个数：'+Rlen);
        (that.$refs[(Oc.scline)]).style.width=(Namelis.length*100/Rlen)+"%";
        (that.ViewLen)[(Oc.vlen)]=Rlen;
        var Nkli=Namelis.slice(0,Rlen);
        var Dar=Arr.map(function(C){ return C.slice(0,Rlen);});
        that.drawBarEchart(Oc.dom,Nkli,Dar);
    },
    SCOllBoxFn(datakey,dom,scrollBox,scrollLine,vlen){
            // data,dom,scrollBox,scrollLine  /*分别对应，数据，渲染dom元素，滚动盒子，滚动条*/
        var that=this;
        var sclLeft=(that.$refs[scrollBox]).scrollLeft;
        var drData=that[datakey];
        var Namelis=drData.Namelis;
        var ViewLen=(that.ViewLen)[vlen];
        var Arr=drData.Arr;
        var MaxSts=Namelis.length-ViewLen;
        var Wh=(that.$refs[scrollBox]).offsetWidth;
        var Cwh=(that.$refs[scrollLine]).offsetWidth;
        var CBrw=(Cwh-Wh)/(MaxSts);
        var I=Math.floor(sclLeft/CBrw);
        var NeLis=Namelis.slice(I,I+ViewLen);
        var ArLs=Arr.map(function(G){return G.slice(I,I+ViewLen);});
        // //console.log(NeLis,ArLs);
        that.drawBarEchart(dom,NeLis,ArLs);
    },
    drawBarEchart(dom,NameLis,arr){
        var that=this;
        let myChart = that.getCtx(dom)
        var option ={
        grid:{
            left:50, // 默认10%，给24就挺合适的。
            top:60, // 默认60
            right:50, // 默认10%
            bottom:35, // 默认60
        },
        legend: {
            // orient: 'vertical',
            right: '55',
            top: '2',
            // 设置图例形状
            itemWidth:12,  // 设置宽度
            itemHeight:12, // 设置高度
            textStyle:{
                color:"#000",
                fontSize: 14,
            },
        },
        xAxis: {
            type: 'category',
            axisTick: { show:false },/*影藏坐标轴刻度*/
            // data: ['张三丰', '刘天宇', '王自大', '孙乾坤', '李自傲', '周天启', '冯天成','任天雨']
            data:NameLis
        },
        yAxis: {
            type: 'value',
            minInterval:1,
            axisTick: { show:false }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'none',
            show: false
            },
            backgroundColor:'#FFF',
            boxShadow:'0 2px 12px 0 rgba(0,0,0,0.1)',
            textStyle:{
            color:'#444'
            },
            formatter: function(params){
                var st='';var sg=0;var reslt;
                for(let s=0;s<params.length;s++){
                    let itm=params[s];
                    sg+=itm.value;
                    st+=`<div style='line-height:25px;'>
                            <div style='float:left;padding-right:15px;'>
                                <span style='display:inline-block;width:10px;height:10px;margin-right:5px;background-color:${itm.color};'></span>
                                <span>${itm.seriesName}</span>
                            </div>
                            <div style='float:right;color:#000;font-weight:bold;'>${itm.value}</div><br>
                        </div>`;
                }
                reslt=`<div style='line-height:30px;'>
                            <div>${((params[0])["axisValue"])}</div>
                        </div>`;
                reslt+=st;
                return `<div style="padding:0 10px 0 10px;">${reslt}</div>`;
            }
        },
        series: [
            {
            name:"胸痛",
            // data: [100, 200, 150, 80, 70, 110, 130,45],
            data:arr[0],
            // stack:'sum',
            type: 'bar',
            barGap:0.05,
            barWidth:20,
            itemStyle:{
                normal:{
                color:'#3683B8'
                }
            },
            },
            {
            name:"卒中",
            // data: [80, 200, 150, 80, 70, 110, 130,45],
            data:arr[1],
            // stack:'sum',
            type: 'bar',
            barGap:0.05,
            barWidth:20,
            itemStyle:{
                normal:{
                color:'#4294EA'
                }
            },

            },
            {
            name:"创伤",
            // data: [70, 200, 150, 80, 70, 110, 130,45],
            data:arr[2],
            // stack:'sum',
            type: 'bar',
            barGap:0.05,
            barWidth:20,
            itemStyle:{
                normal:{
                color:'#8DCA86'
                }
            },

            },
            {
                name:"烧伤",
                // data: [90, 200, 150, 80, 70, 110, 130,45],
                data:arr[3],
                // stack:'sum',
                type: 'bar',
                barGap:0.4,
                barWidth:20,
                itemStyle:{
                    normal:{
                    color:'#E8AC63'
                    }
                }
            }
        ]
        };
        //console.log(option)
        myChart.setOption(option);
    },
    getCtx(refName){ return echarts.init((this.$refs)[refName]); }
  }
};
</script>
<style lang="scss" scoped>
    .page-overview{
        padding: 24px 32px 24px;
        background-color:#FFF;
        .divHeight{
            height:650px;
            font-size:0;
            .w50{
                position: relative;
                width: 50%;
                height: 100%;
                font-size: 14px;
                display: inline-block;
                vertical-align:middle;
                font-size:14px;
            }
            .type-lis-cont{
                position: absolute;
                top: 0;
                left: 0;
                .lis{
                    margin-bottom: 46px;
                    .icon{
                        width:46px;
                        float: left;
                        margin-right: 10px;
                    img{ 
                        display:block;
                        width:100%; 
                    }
                    }
                    .txt{
                        float: left;
                        width: 60px;
                        font-size: 14px;
                        line-height: 20px;
                        .type-desc{
                            line-height: 20px;
                        }
                        .num-desc{
                            span{
                                font-size:24px;
                                font-weight:bold;
                            }
                        }
                    }
                    .tip{
                        float: left;
                        width: 100px;
                        margin-left: 10px;
                        background: url('../../assets/images/tip_bg.png') no-repeat;
                        div{
                            height: 24px;
                            font-size: 12px;
                            color: #3683B8;
                            padding-left: 30px;
                            line-height: 24px;
                            background-repeat: no-repeat;
                            background-position: 2px;
                            background-size: 20px;
                        }
                        &.type1{
                            div:first-child{
                                background-image: url('../../assets/images/tip1.png');
                            }
                            div:last-child{
                                background-image: url('../../assets/images/tip2.png');
                            }
                        }
                        &.type2{
                            div:first-child{
                                background-image: url('../../assets/images/tip3.png');
                            }
                            div:last-child{
                                background-image: url('../../assets/images/tip4.png');
                            }
                        }
                    }
                }
            }
            .map-cont{
                height:550px;
                padding:15px 1px 15px;
                .overview-map {
                    position: relative;
                    display:block;
                    height:calc( 100% - 30px);
                }
            }
            .div-charts{
                height:50%;
                .charts-title{
                    font-size:20px;
                    padding:0 15px 15px;
                    color:rgba(0,0,0,0.87);
                    font-weight:bold;
                    span{
                        font-size:16px;
                        color:#3CBF2D;
                        &.down{
                            color:red;
                        }
                        .bold{
                            font-weight:bold;
                        }
                    }
                }
                .charts-cont{
                    height: calc( 100% - 45px);
                }
            }
        }
       .bar-cont{
            .charts-title{
                font-size:20px;
                padding:0 15px 15px;
                color:rgba(0,0,0,0.87);
                font-weight:bold;
                span{
                    font-size:16px;
                    color:#3CBF2D;
                }
            }
            .bar-Div{
                height:500px;
            }
            .scroll_Box{
                width:100%;
                overflow-x:auto;
                overflow-y:hidden;
            }
            .scroll_Box>div{
                width:100%;
                height: 1px;
            }
       } 
      
    }
</style>