<template>
  <div id="cmp2">
    <div class="item">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">日常照护</span>
      </div>
        <Echart
          :options="options1"
          id="cmp1"
          style="width: 100%;position: absolute;top: .4rem;"
        ></Echart>
    </div>
    <div class="item">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">出入趋势</span>
      </div>
        <div id="cmpLine" style="width: 100%;height:80%;position: absolute;top: .4rem;" />
    </div>
  </div>
</template>

<script>
  var timeId = null;
  import centerRightChart1 from "../echart/centerRight/centerRightChart";
  import Echart from '../../common/echart'
  export default{
    components:{
      centerRightChart1,
      Echart
    },
    data(){
      return{
        options:{},
        options1:{}
      }
    },
    mounted() {
      this.initLine()
      this.initRadar()
    },
    methods:{
      initRadar(){
        const createSvg = ({width, height, shadowColor, shadowBlur, points}) => {
            const ret = [`M${points[0][0]} ${points[0][1]}`];
            for (let i = 1; i < points.length; i++) {
                ret.push(`L${points[i][0]} ${points[i][1]}`);
            }
            ret.push('Z');
            const rectPath = ret.join(' ');
            return (`
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                    x="0px" y="0px"
                    width="${width}"
                    height="${height}"
                >
                    <style>
                        .st1 {
                            fill: transparent;
                            stroke: ${shadowColor};
                            stroke-width: ${shadowBlur}px;
                            filter: url(#chart-inset-shadow);
                            clip-path: url(#chart-clip);
                        }

                    </style>
                    <defs>

                        <clipPath id="chart-clip">
                            <path d="${rectPath}" />
                        </clipPath>

                        <filter id="chart-inset-shadow" width="200%" height="200%" x="-50%" y="-50%">
                    		<feGaussianBlur in="SourceGraphic" result="gass" stdDeviation="${shadowBlur * 0.75}" />
                    		<feMerge>
                    			<feMergeNode in="gass" />
                    		</feMerge>
                    	</filter>

                    </defs>
                    <g>
                        <path class="st1" d="${rectPath}" />
                    </g>
                </svg>
            `);

        };

        const cretateSvgUrl = (svgOption) => {
            const svgString = createSvg(svgOption);
            const svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

            const DOMURL = window.URL || window.webkitURL || window;
            const insetShadowUrl = DOMURL.createObjectURL(svg);

            return insetShadowUrl;
        };

        const dataSet = [
            ['日常照料', '送餐','助浴', '保洁', '助医'],
            [100, 90, 80, 66, 90],
            [70, 30, 60, 86, 20],
        ];

        const maxValue = [...dataSet[1], ...dataSet[2]].reduce((m, v) => Math.max(m, v), -Infinity);

        const radius = 0.7;
        const theta = Math.PI * 2 / dataSet[2].length;

        const getPoints = (R, ps, max) => ps.map((v, i) => {
            const t = i * theta;
            const d = v / max;
            const x = R - Math.sin(t) * R * d;
            const y = R - Math.cos(t) * R * d;
            return [x, y];
        });

        let option = {
            tooltip: {
                // trigger: 'axis',
                // show: true
            },
            polar: {
                radius: radius * 100 + '%',
                center: ['50%', '50%'],
            },
            angleAxis: {
                type: 'category',
                clockwise: false,
                boundaryGap: false,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false
                }
            },
            radiusAxis: {
                type: 'value',
                max: 100,
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
            radar: {
                indicator: dataSet[0].map((v, i) => ({name: v, max: maxValue})),
                radius: radius * 100 + '%',
                center: ['50%', '50%'],
                shape: 'polygon',
                splitNumber: 5,
                name: {
                    textStyle: {
                      padding: [-10, 0],
                        color: '#ffffff',
                        fontSize: 12
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#113865', // 分隔线颜色
                        width: 1, // 分隔线线宽
                    }
                },

                axisLine: {
                    lineStyle: {
                        color: '#113865'
                    }
                }
            },

            series: [
                {
                    type: 'custom',
                    name: 's1-inset-shadow',
                    silent: true,
                    coordinateSystem : 'polar',
                    data: [0],
                    renderItem: (params,api) => {
                        const R = params.coordSys.r;
                        const cx = params.coordSys.cx;
                        const cy = params.coordSys.cy;

                        const x = cx - R;
                        const y = cy - R;
                        const width = 2 * R;
                        const height = 2 * R;

                        return {
                            type: 'image',
                            style: {
                                image: cretateSvgUrl({
                                    width, height,
                                    shadowColor: 'rgba(0, 253, 255, 1)',
                                    shadowBlur: 20,
                                    points: getPoints(R, dataSet[1], 100)
                                }),
                                x,
                                y,
                                width,
                                height,
                            },
                        };
                    },
                },
                {
                    name: 's1',
                    type: 'radar',
                    tooltip: {
                        trigger: 'item'
                    },
                    data: [
                        { value: dataSet[1] }
                    ],
                    symbol: 'circle',
                    symbolSize: 8,
                    label: {                    // 单个拐点文本的样式设置
                            normal: {
                                show: true,             // 单个拐点文本的样式设置。[ default: false ]
                                position: 'left',        // 标签的位置。[ default: top ]
                                distance: 2,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                                color: 'rgba(184,248,249,1)',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                                fontSize: 12,           // 文字的字体大小
                                fontWeight:600,
                                formatter:function(params) {
                                    return params.value;
                                }
                            }
                        },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255, 255, 255,1)',
                            borderColor: 'rgba(0,253,255,.4)',
                            borderWidth: 4,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(6,13,41,.6)',
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: 'rgba(0,253,255, 1)',
                            width: 1
                        }
                    },

                },


            ]

        };
        this.options1 = option
      },
      initLine(){
        let chartData = [
                {name:'2020.1', value: 1047, value1: 1404, value2: 1047},
                {name:'2020.2', value: 1116, value1: 1729, value2: 1623},
                {name:'2020.3', value: 1886, value1: 1321, value2: 1613},
                {name:'2020.4', value: 1980, value1: 1621, value2: 1886},
                {name:'2020.5', value: 1700, value1: 1851, value2: 1980},
                {name:'2020.6', value: 1623, value1: 1659, value2: 1116},
                {name:'2020.7', value: 1613, value1: 1700, value2: 1700},
                {name:'2020.7', value: 1886, value1: 1700, value2: 1700}
            ];
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            legend: {
              top: 0,
              right:0,
              icon:'roundRect',
              textStyle: {
                color: "#fff"
              }
            },
            grid: {
                left: '0',
                right: 30,
                bottom: '0',
                top: 40,
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: '#0E2A43'
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 9,
                        color: '#b4b4b5'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {     //网格线
                  show: true,
                  lineStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(14,42,67,0)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(14,42,67,1)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                  }
                },
                data: ['08:00', '09:05', '10:10', '11:15', '12:20', '13:25', '14:30', '15:35']
            }, {
                axisPointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#0E2A43'
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                offset: 20
            }],
            yAxis: [{
                splitNumber:4,
                type: 'value',
                name: '',
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: '#0E2A43'
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 9,
                        color: '#b4b4b5'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            }],
            series: [{
                        zlevel:2,
                        name: '进',
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 2,
                        showSymbol: false,
                        animationDelay: 500,
                        animationDuration: 1000,
                        lineStyle: {
                            color: 'rgba(0, 253, 255, 1)'
                        },
                        itemStyle: { //拐点颜色也是原图例颜色
                            color: 'rgba(0, 253, 255, 1)',
                            borderColor: 'rgba(0, 253, 255, 1)',
                            borderWidth: 2
                        },
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0, 253, 255, 0.58)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(22,33,81,0)'
                                    }
                                ]),
                            }
                        },
                        data: [400, 700, 500, 400, 300, 500, 800,1000 ]
                    },
                    {
                        zlevel:2,
                        name: '出',
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 2,
                        showSymbol: false,
                        animationDelay: 500,
                        animationDuration: 1000,
                        lineStyle: {
                            color: '#D4C328'
                        },
                        itemStyle: {
                            color: '#D4C328',
                            borderColor: '#D4C328',
                            borderWidth: 2
                        },
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(183,171,10,0.58)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(10,21,68,0)'
                                    }
                                ]),
                            }
                        },
                        data: [514, 235, 200, 600, 400, 500, 200,100]
                    },
                    // {
                    //     zlevel:2,
                    //     name: '行政处罚',
                    //     type: 'line',
                    //     symbol: 'circle',
                    //     symbolSize: 2,
                    //     showSymbol: false,
                    //     animationDelay: 500,
                    //     animationDuration: 1000,
                    //     lineStyle: {
                    //         color: 'rgba(0, 179, 243, 1)'
                    //     },
                    //     itemStyle: {
                    //         color: '#041344',
                    //         borderColor: 'rgba(0, 179, 243, 0.58)',
                    //         borderWidth: 2
                    //     },
                    //     smooth: true,
                    //     areaStyle: {
                    //         normal: {
                    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //                     offset: 0,
                    //                     color: 'rgba(0, 179, 243, 0.58)'
                    //                 },
                    //                 {
                    //                     offset: 1,
                    //                     color: 'rgba(10,21,68,0)'
                    //                 }
                    //             ]),
                    //         }
                    //     },
                    //     data: [10, 11, 12, 10, 9, 8, 7,5]
                    // },
                ]

        };
        let myChart = this.$echarts.init(document.getElementById("cmpLine"))
        myChart.setOption(option, true)
            var app = {
                    curIndex: -1,
            };
            timeId = setInterval(()=> {
            var dataLen = chartData.length;

            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: app.curIndex
            });

            app.curIndex = (app.curIndex + 1) % dataLen;

            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: app.curIndex,
            });

            // 显示 tooltip
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: app.curIndex
            });

        }, 3000);
      }
    },
    destroyed() {
      if(timeId){
        clearInterval(timeId)
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  #cmp2{
    width: 100%;
    height: 33.33%;
    display: flex;
    .item{
      width: 50%;
      height:100%;
      position: relative;
    }
  }
</style>
