<template>
<div class="IonicRinseCss">
    <el-row :gutter="30">
        <el-col :xs="24" :sm="16" >
            <div class="charts-margin">
                <div ref ="chart" class="chartCss">

                </div>
            </div>
        </el-col>
        <el-col :xs="24" :sm="8">
            <div class=" charts-margin">
                <div class="numCss">
                    <div class="numText">
                        {{yAxis}}
                    </div>
                    
                </div>
                <div class="process">
                    <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="30">
        <el-col :xs="24" :sm="16" >
            <div class="charts-margin">
                 <el-row>
                    <el-col :xs="8" :sm="8" :md="8"> 
                        <div @click="start" class="status-margin">
                            <div class="statusText">过滤</div>
                            <div style="flex:1;">
                                <img class="statusImg" src="../assets/img/arrow.png" alt="">
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="8"> 
                        <div class="status-margin">
                            <div class="statusText">清洗</div>
                            <div style="flex:1;">
                                <img class="statusImg" src="../assets/img/arrow.png" alt="">
                            </div>
                        </div>
                    </el-col>
                    <!-- <el-col :xs="12" :sm="12" :md="6"> 
                        <div class="status-margin">
                            <div class="statusText">滴入溶液</div>
                            <div style="flex:1;">
                                <img class="statusImg" src="../assets/img/arrow.png" alt="">
                            </div>
                        </div>
                    </el-col> -->
                    <el-col :xs="8" :sm="8" :md="8"> 
                        <div class="status-margin">
                            <div class="statusText">完成</div>
                            <div style="flex:1;">
                                &nbsp;
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
        <el-col :xs="24" :sm="8">
            <div class="stopCss">
                 <div class="stop-margin">
                    <el-row class="stopRow">
                        <el-col :xs="12" :sm="12" :md="6"> 
                            <div @click="ionstop" class="stopBox">
                                <div class="stopText">停止</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-col>
    </el-row>
</div>

</template>

<script>
import echarts from 'echarts'
import { Message } from 'element-ui';
export default {
  name: 'Kanban',
  data() {
    return {
        yAxis:0,
        percentage: 70,
        timeFlag:true,
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        type:localStorage.getItem('testType'),
        timer:'',
        myChart:''
    }
  },
  components: {
    
  },
  computed:{
   
  },
  created(){
    this.$store.dispatch('showAside');
  },
  methods:{
    start(){
        if(!this.timeFlag)return
        Message({
            message: '开始过滤',
            type: 'success',
            duration:2000
        });
        let req={
            "type":this.type
        };
        let config = {
        headers: {
            'Content-Type': 'application/json'
            } 
        }
        this.$axios.post(this.$api.ionstart,req,config).then(res =>{
            console.log("ionstart=="+JSON.stringify(res))
            if(res.status== 200){
                this.timeFlag = false;
               // this.testvalue();
                this.timer = window.setInterval(this.testvalue,1000);
                
            }
        })
    },
    testvalue(){
        this.$axios.post(this.$api.testvalue).then(res =>{
            console.log("ionstart=="+JSON.stringify(res))
            if(res.status== 200){
                this.yAxis = res.data.data.current_value.y;

                this.showChart(res.data.data.history_value);
            }
        })
    },
    ionstop(){
        this.$axios.post(this.$api.ionstop).then(res =>{
            console.log("ionstart=="+JSON.stringify(res))
            if(res.status== 200){
                this.timeFlag = true;
                window.clearInterval(this.timer);
            }
        })
    },
    showChart(data){
        let myChart = echarts.init(this.$refs.chart);
        var option = option = {
                xAxis: {
                    type: 'category',
                    data: data.xlabel,
                    // axisLine:{
                    //     lineStyle:{
                    //         type:'solid',
                    //         color: '#555556',
                    //     }
                    // },
                    axisLine:{
                        lineStyle:{
                            type:'solid',
                            color: '#686868',
                        }
                    },
                },
                yAxis: {
                    axisLine:{
                        lineStyle:{
                            type:'solid',
                            color: '#686868',
                        }
                    },
                     splitLine: {
                        show: true,
                        lineStyle:{
                            type:'solid',
                            color: '#555556',
                        }
                    }
                },
                series: [{
                    data: data.ydata,
                    type: 'line',
                    itemStyle : {  
                        normal : {  
                            color:'#1870b9',  
                            lineStyle:{  
                                color:'#1870b9'  
                            }  
                        }  
                    },  
                }]
            };
        myChart.setOption(option);
        window.onresize = function () {
            console.log('reset')
            myChart.resize();
        }
        window.addEventListener("load", myChart.resize());
        
    }
  },
  mounted() {
    this.$once('hook:beforeDestroy',() =>{
        window.clearInterval(this.timer);
    })
  }
}
</script>

<style scoped lang="less">
@import url('../styles/IonicRinse.less');
.el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>