<template>
    <div class="main-page">
        <div class="collStatis">
            <el-row>
                <el-col :span="12">
                    <div class="padding-right12">
                        <div class="panel">
                            <div class="p-title">
                                <span>当日急救患者</span>
                            </div>
                            <el-row>
                                <el-col :span="12" class="cont-center">
                                    <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>{{dayPatients.chestCount}}</span>个</div>
                                        </div>
                                        <div class="tip type1">
                                            <div>{{ dayPatients.nomalChestTotal }}</div>
                                            <div>{{ dayPatients.basicChestTotal }}</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="cont-center">
                                    <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>{{dayPatients.strokeCount}}</span>个</div>
                                        </div>
                                        <div class="tip type2">
                                            <div>{{ dayPatients.seniorStrokeTotal }}</div>
                                            <div>{{ dayPatients.treatmentStrokeTotal }}</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="cont-center">
                                    <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>{{dayPatients.traumaCount}}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="cont-center">
                                    <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>{{dayPatients.burnCount}}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="padding-left12">
                        <div class="panel">
                            <div class="p-title">
                                <span>累计急救患者</span>
                            </div>
                            <el-row>
                                <el-col :span="12" class="cont-center">
                                    <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>{{cumulativePatients.chestCount}}</span>个</div>
                                        </div>
                                        <div class="tip type1">
                                            <div>{{ cumulativePatients.nomalChestTotal }}</div>
                                            <div>{{ cumulativePatients.basicChestTotal }}</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="cont-center">
                                    <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>{{cumulativePatients.strokeCount}}</span>个</div>
                                        </div>
                                        <div class="tip type2">
                                            <div>{{ cumulativePatients.seniorStrokeTotal }}</div>
                                            <div>{{ cumulativePatients.treatmentStrokeTotal }}</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="cont-center">
                                    <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>{{cumulativePatients.traumaCount}}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="cont-center">
                                    <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>{{cumulativePatients.burnCount}}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="margin-top24">
                <div class="panel">
                    <div class="p-title">
                        <span>区域院前急救统计</span>
                        <div class="right-Box">
                            <el-button type="text" @click="ChangeDateCharts(1)" :class="{sel:activePanel=='v1'}">近三个月</el-button>
                            <div class="vh">|</div>
                            <el-button type="text" @click="ChangeDateCharts(2)" :class="{sel:activePanel=='v2'}">近一年</el-button>
                        </div>
                    </div>
                    <div>
                        <div class="bar-cover-charts" ref="BarEl"></div>
                        <div class="scroll_Box" ref="BarScBox"  @scroll="SCOllBoxFn(`BarData`,`BarEl`,`BarScBox`,`BarScLine`,`persw`)">
                                <div ref="BarScLine"></div>
                        </div>
                    </div>
                </div>
            </div>
            <el-row class="margin-top24">
                <el-col :span="12">
                    <div class="padding-right12">
                        <div class="panel">
                            <div class="p-title">
                                <span>院前急救转运平均时间(分钟)</span>
                            </div>
                            <div>
                                <div class="c50_charts" ref="c50Bar"></div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="padding-left12">
                        <div class="panel">
                            <div class="p-title">
                                <span>病种类别统计</span>
                            </div>
                            <div>
                                <div class="c50_charts" ref="c50Pie"></div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import {businessTeamStatistics} from '@/api/hospital.js';
export default{
    data(){
        return{
            /*
                "burnCount": 2,	//烧伤数量
                "chestCount": 21,	//胸痛数量
                "strokeCount": 2,	//卒中数量
                "traumaCount": 1	//创伤数量
            */
            cumulativePatients:{ //累计急救患者
                chestCount:'',
                strokeCount:'',
                traumaCount:'',
                burnCount:''
            },
            dayPatients:{
                chestCount:'',
                strokeCount:'',
                traumaCount:'',
                burnCount:''
            },
            activePanel:'v1',
            BarDatav1:{
                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],
                ]
            },
            BarDatav2:{  Namelis:[],Arr:[] },
            ViewLen:{
                persw:null,
            }

        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.getv1Data();
            this.getv2Data();
        });
    },
    methods:{
        gv(value,dValue){ return (value)?value:dValue },
        getv1Data(){
            var that=this;
            businessTeamStatistics({}).then((res)=>{
                if (res.msg == 201) {
                    that.fillServeData(res.respData);
                } else {
                    that.$message.error(res.content)
                }
            })
        },
        getv2Data(){
            var that=this;
            var d=new Date();var yar=d.getFullYear(),moth=d.getMonth()+1,dey=d.getDate();moth=(moth<10)?('0'+moth):moth;dey=(dey<10)?('0'+dey):dey;
            var params={ startTime:`${yar-1}-${moth}-${dey}`,  endTime:`${yar}-${moth}-${dey}` };
            businessTeamStatistics(params).then((res)=>{
                if (res.msg == 201) {
                   var areaPreTotal=that.gv(res.respData.areaPreTotal,[]);
                   var kys=['chestCount','strokeCount','traumaCount','burnCount'];
                   var result=areaPreTotal.reduce(function(prv,cur,i,arr){
                        prv.Names.push(cur.areaStr);
                        kys.forEach((ky,j)=>{ prv.arr[j].push(cur[ky]||0)  })
                        return prv;
                    },{Names:[],arr:[[],[],[],[]]});
                    that.BarDatav2.Namelis=Object.freeze(result.Names);
                    that.BarDatav2.Arr=Object.freeze(result.arr.map(Object.freeze));
                } else {
                    that.$message.error(res.content)
                }
            })
        },
        fillServeData(respData){
            var that=this;
            var p1=that.gv(respData.cumulativePatients,{});
            var p2=that.gv(respData.dayPatients,{});
            that.cumulativePatients={
                chestCount:that.gv(p1.chestCount,'0'),
                strokeCount:that.gv(p1.strokeCount,'0'),
                traumaCount:that.gv(p1.traumaCount,'0'),
                burnCount:that.gv(p1.burnCount,'0'),
                nomalChestTotal:that.gv(p1.nomalChestTotal,'0'),
                basicChestTotal:that.gv(p1.basicChestTotal,'0'),
                seniorStrokeTotal:that.gv(p1.seniorStrokeTotal,'0'),
                treatmentStrokeTotal:that.gv(p1.treatmentStrokeTotal,'0'),
            }
            that.dayPatients={
                chestCount:that.gv(p2.chestCount,'0'),
                strokeCount:that.gv(p2.strokeCount,'0'),
                traumaCount:that.gv(p2.traumaCount,'0'),
                burnCount:that.gv(p2.burnCount,'0'),
                nomalChestTotal:that.gv(p2.nomalChestTotal,'0'),
                basicChestTotal:that.gv(p2.basicChestTotal,'0'),
                seniorStrokeTotal:that.gv(p2.seniorStrokeTotal,'0'),
                treatmentStrokeTotal:that.gv(p2.treatmentStrokeTotal,'0'),
            };
            var kys=['chestCount','strokeCount','traumaCount','burnCount'];
            var areaPreTotal=that.gv(respData.areaPreTotal,[]);
            var result=areaPreTotal.reduce(function(prv,cur,i,arr){
                prv.Names.push(cur.areaStr);
                kys.forEach((ky,j)=>{ prv.arr[j].push(cur[ky]||0)  })
                return prv;
            },{Names:[],arr:[[],[],[],[]]});
            that.BarDatav1.Namelis=Object.freeze(result.Names);
            that.BarDatav1.Arr=Object.freeze(result.arr.map(Object.freeze));
            that.barChartsInit();
            var preTransferTimeTotal=that.gv(respData.preTransferTimeTotal,{});
            var kys=['chestTransferTime','strokeTransferTime','traumaTransferTime','burnTransferTime'];
            that.drawc50Bar(kys.map(function(ky){  return that.gv(preTransferTimeTotal[ky],0) }))
            var piekys=[`chestCount`,`strokeCount`,`traumaCount`,`burnCount`];
            var Names=[`胸痛`,`卒中`,`创伤`,`烧伤`];
            that.drawc50Pie(piekys.map(function(ky,i){return{value:that.gv(p1[ky],0),name:Names[i]}}));
        },
        barChartsInit(){
            var that=this;
            var Oc={datakey:'BarData',dom:'BarEl',scBox:'BarScBox',scline:'BarScLine',vlen:'persw'};
            var drData=that[(Oc.datakey+that.activePanel)];
            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+that.activePanel];
            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);
            if(NameLis.length===0){ myChart.clear(); };
            var opts ={
                    grid:{
                        left:40, // 默认10%，给24就挺合适的。
                        top:60, // 默认60
                        right:10, // 默认10%
                        bottom:35, // 默认60
                    },
                    legend: {
                        // orient: 'vertical',
                        right: '8',
                        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,
                        barMaxWidth:30,
                        barMinWidth:10,
                        itemStyle:{
                            normal:{
                            color:'#3683B8'
                            }
                        },
                        },
                        {
                        name:"卒中",
                        // data: [80, 200, 150, 80, 70, 110, 130,45],
                        data:arr[1],
                        // stack:'sum',
                        type: 'bar',
                        barGap:0.05,
                        barMaxWidth:30,
                        barMinWidth:10,
                        itemStyle:{
                            normal:{
                            color:'#4294EA'
                            }
                        },

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

                        },
                        {
                            name:"烧伤",
                            // data: [90, 200, 150, 80, 70, 110, 130,45],
                            data:arr[3],
                            // stack:'sum',
                            type: 'bar',
                            barGap:0.05,
                            barMaxWidth:30,
                            barMinWidth:10,
                            itemStyle:{
                                normal:{
                                color:'#E8AC63'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(opts);
        },
        drawc50Bar(data){
            var that=this;
            let myChart = that.getCtx('c50Bar')
            var opts={
                    grid:{
                        left:40, // 默认10%，给24就挺合适的。
                        top:40, // 默认60
                        right:10, // 默认10%
                        bottom:25, // 默认60
                    },
                    xAxis: {
                        data: ['胸痛中心', '卒中中心', '创伤中心', '烧伤中心'],
                        axisTick:{
                            show:false
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        label: {
                            show: true,
                            position: 'top'
                        },
                        barWidth:60,
                        // data: [120, 200, 150, 80],
                        data:data,
                        color:'#4495E6',
                        type: 'bar'
                        }
                    ]
                };
            myChart.setOption(opts);
        },
        drawc50Pie(data){
            var that=this;
            var myChart=that.getCtx('c50Pie')
            // var data=[ 
            //     {value: 100, name: '胸痛'},
            //     {value: 50, name: '卒中'},
            //     {value: 160, name: '创伤'},
            //     {value: 80, name: '烧伤'}
            // ]
            var opts={
                legend: {
                    orient: 'vertical',
                    x: '15',
                    y: 'center',
                    // 设置图例形状
                    itemWidth:12,  // 设置宽度
                    itemHeight:12, // 设置高度
                    itemGap:25,
                    textStyle:{
                        color:"#000",
                        fontSize: 14,
                        paddingLeft:5,
                    },
                },
                series: [
                  {
                    // name: '访问来源',
                    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);
        },
        ChangeDateCharts(num){this.activePanel=`v${num}`;this.barChartsInit();},
        getCtx(refName){ return echarts.init((this.$refs)[refName]); }
    }
}
</script>
<style lang="scss" scoped>
    .collStatis{
        .padding-left12{
            padding-left:12px;
        }
        .padding-right12{
            padding-right:12px;
        };
        .margin-top24{
            margin-top:24px;
        }
        .panel{
            background-color:#FFF;
            padding: 24px 32px;
            .p-title{
                >span{
                    font-size:20px;
                    padding: 0px 10px;
                    color:rgba(0, 0, 0, 0.87);
                }
                .right-Box{
                    float:right;
                    padding-right: 10px;
                    .vh{
                        display: inline-block;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                    button{
                        padding-top:1px;
                        padding-bottom:1px;
                        color:#444444;
                        &.sel{
                            color:#4294EA;
                        }
                    }
                }
            }
            .lis{
                width: 250px;
                margin: 40px auto 0;
                .icon{
                    width:46px;
                    float: left;
                    margin-right: 10px;
                    img{ 
                        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: 14px;
                        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');
                            }
                        }
                    }
                }
            .bar-cover-charts{
                height:350px;
            }
            .scroll_Box{
                width:100%;
                overflow-x:auto;
                overflow-y:hidden;
            }
            .scroll_Box>div{
                width:100%;
                height: 1px;
            }
            .c50_charts{
                height:260px;
            }
        }
    }
</style>
