import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/gauge';
import axios from 'axios';

class Table extends Component {
    constructor(props){
        super(props);
        let dom = React.createRef();
        let options = {
            title: {
                text: '销售详情'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        this.state = {
            options,
            dom
        }
    }

    componentDidMount(){
        let echart = echarts.init(this.state.dom.current);
        echart.setOption(this.state.options);
    }

    render(){
        let style = {
            width: '800px',
            height: '600px'
        };
        return (
            <div ref={this.state.dom} style={style}></div>
        );
    }

}

class HealthSleep extends Component {
    constructor(props){
        super(props);

        let option = {
            color: ['blueviolet','red'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: this.props.data.map(v=>v.name)
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [{type:'value',name:'睡眠时间(min)'}],
            series : this.props.data
        };
        this.state = {
            option,
            dom: React.createRef()
        }
    }

    componentDidMount(){
        let echart = echarts.init(this.state.dom.current);
        echart.setOption(this.state.option);        
    }

    render(){
        let style = {
            height: 400,
            width: 600
        };
        return (
            <div ref={this.state.dom} style={style} />
        );
    }
}

class Gauge extends Component {
    constructor(props){
        super(props);
        this.state = {
            dom: React.createRef(),
        };
    }

    componentDidMount(){
        let option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '内存消耗',
                    type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 50, name: '使用率'}]
            }
        ]
    };
        
    let echart = echarts.init(this.state.dom.current);
        setInterval(()=>{
            axios.get('https://api.ourfor.top/blog/state').then(res=>{
                let value = 1 - res.data.usage/res.data.total;
                option.series[0].data[0].value = (value.toFixed(4) * 100).toFixed(2);

                echart.setOption(option, true); 
            });
            
        },200);
    }

    render(){
        let style = {
            width: 400,
            height: 400,
        };
        return <div ref={this.state.dom} style={style}></div>
    }
}

export {Table,Gauge,HealthSleep};