<template>
<div class="stytem">
    <el-row :gutter="10">
        <el-col :xs="24" :sm="12">
            <div class="vcss">
                <div class="vcssChild">
                    电压:{{voltage}}
                </div>
                <div class="vcssChild">
                    电导率:{{conductivity}}
                </div>
            </div>
        </el-col>
        <el-col :xs="24" :sm="12" >
            <div class="clearCss" style="">
                <div class="clearBox marginr40">
                    <el-radio v-model="radio" label="filter" style="color:white;">过滤阀体</el-radio>
                </div>
                <div class="clearBox">
                    <el-radio v-model="radio" label="clean" style="color:white;">清洗阀体</el-radio>
                </div>     
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :xs="24">
            <div class="stepTable">
                <el-table
                    :header-cell-style="{color: '#FFF', fontSize: '14px',background:'#1871b8',borderColor:'7F7F7F'}"
                    :data="testStep" height="290"  border style="width: 100%">
                    <el-table-column  prop="solution"  align="center" label="溶液（ml）"> </el-table-column>
                    <el-table-column  prop="table_conductivity" align="center" label="电导率（μs/cm）"> </el-table-column>
                </el-table>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="30">
        <el-col :xs="24" :sm="16" >
            <div class="testProcess">
                <el-row>
                    <el-col :sm="24" :md="12"> 
                        <div class="processTiem" >
                            <div class="" style="color:white;text-indent:10px;">过滤时间: {{times}}</div>
                            <!-- <input class="timeInput" v-model="times" type="text"> -->
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="8" :sm="8" :md="8"> 
                        <div class="statusCss" >
                            <div class="stepName" :style="{background:filterFlag}" >过滤</div>
                            <div style="flex:1;">
                                <img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
                            </div>
                        </div>
                        <!-- <div class="statusCss" >
                            <div class="stepName" :class="{notStart:filter.notStart,doingCss:filter.doing,endCss:filter.end}" >过滤</div>
                            <div style="flex:1;">
                                <img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
                            </div>
                        </div> -->
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="8"> 
                        <div class="statusCss"  >
                            <div  class="stepName" :style="{background:cleanFlag}">清洗</div>
                            <div style="flex:1;">
                                <img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
                            </div>
                        </div>
                    </el-col>
                    <!-- <el-col :xs="12" :sm="12" :md="6"> 
                        <div class="statusCss" >
                            <div  class="stepName" :style="{background:dripFlag}" >滴入溶液</div>
                            <div style="flex:1;">
                                <img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
                            </div>
                        </div>
                    </el-col> -->
                    <el-col :xs="8" :sm="8" :md="8"> 
                        <div class="statusCss" >
                            <div  class="stepName" :style="{background:doneFlag}" >完成</div>
                            <div style="flex:1;">
                                &nbsp;
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
        <el-col :xs="24" :sm="8">
            <div class="processing">
                <div @click="start" class="filterCss">
                    过滤
                </div>
                <!-- <div class="testCss" >
                    清洗
                </div> -->
                <div @click="stop" class="testCss">
                    停止
                </div>
            </div>
        </el-col>
    </el-row>
    <el-dialog title="选择下一步骤" :visible.sync="dialogFormVisible">
        <!-- <div style="margin-bottom:25px;">
            <el-radio v-model="stage" label="clean" style="color:white;">清洗</el-radio>
            <el-radio v-model="stage" label="drip" style="color:white;">滴入溶液</el-radio>
        </div> -->
        <el-form>
            <el-form-item label="滴入溶液(ml)" :label-width="formLabelWidth">
                <el-input v-model="liquid" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">停 止</el-button>
            <el-button type="primary" @click="change">确 定</el-button>
        </div>
        </el-dialog>
</div>

</template>

<script>
import { Message } from 'element-ui';
export default {
  name: 'Kanban',
  data() {
    return {
        frist:0,
        stage:'clean',
        liquid:'',
        radio: '',
        flag:true,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        
        formLabelWidth: '120px',
        testStep: [
        //     {
        //   solution: '20',
        //   table_conductivity: '王小虎',
        // }
        ],
        filterFlag:'#555',
        cleanFlag:'#555',
        dripFlag:'#555',
        doneFlag:'#555',
        voltage:'',
        conductivity:'',
        times:'',
        timer:'',
        timeFlag:true
    }
  },
  components: {
    

  },
  computed:{
   
  },
  created(){
    this.$store.dispatch('showAside');
  },
  methods:{

    start(){
        if(!this.timeFlag) return
        Message({
            message: '开始过滤',
            type: 'success',
            duration:2000
        });
        this.$axios.post(this.$api.calibrationstart).then(res =>{
            console.log("start=="+res)
            if(res.status== 200){
                this.timeFlag = false;
                this.testStep = [];
                this.timer = window.setInterval(this.underway,1000);
             // this.underway();
            }
            
        })
    },
    underway(){
        this.$axios.post(this.$api.calibrationvalue).then(res =>{
         //   console.log("underway=="+res)
            if(res.status== 200){
                let value =res.data.data.stage;
                let stage_change = res.data.data.stage_change;
                if(stage_change){
                    this.open();
                    
                    // let info ={};
                    // info.solution = res.data.data.solution;
                    // info.table_conductivity = res.data.data.table_conductivity;
                    // this.testStep.push(info);
                    // let  obj = {};
                    // this.testStep = this.testStep.reduce(function (item, next) {
                    // obj[next.solution] ? '' : obj[next.solution] = true && item.push(next);
                    // return item;
                    // }, []);
                }
                this.radio = value;
                this.voltage = res.data.data.voltage;
                this.conductivity = res.data.data.conductivity;
                this.times = res.data.data.times;
                if(value == 'filter'){
                    this.filterFlag = '#1871B9';
                    this.cleanFlag='#555';
                    this.dripFlag='#555';
                    this.doneFlag='#555';
                }
                if(value == "clean"){
                    this.filterFlag = '#2b2c2c';
                    this.cleanFlag='#1871B9';
                    this.dripFlag='#555';
                    this.doneFlag='#555'; 
                }
                if(value == "drip"){
                    this.filterFlag = '#2b2c2c';
                    this.cleanFlag='#2b2c2c';
                    this.dripFlag='#1871B9';
                    this.doneFlag='#555'; 
                }
                if(value == "done"){
                    this.filterFlag = '#2b2c2c';
                    this.cleanFlag='#2b2c2c';
                    this.dripFlag='#2b2c2c';
                    this.doneFlag='#1871B9'; 
                }
            }
            
        })
    },
    stop(){
        Message({
            message: '停止过滤',
            type: 'success',
            duration:2000
        });
        this.$axios.post(this.$api.calibrationstop).then(res =>{
            console.log("stop=="+res)
            if(res.status== 200){
                this.timeFlag = true;
               console.log(this.timer)
               window.clearInterval(this.timer);
               this.getrecord();
            }
            
        })
    },
    getrecord(){
        this.$axios.post(this.$api.getrecord).then(res =>{
            console.log("getrecord=="+JSON.stringify(res))
            if(res.status== 200){
                if(res.data.data.cols.length !=0){
                    this.flag = false;
                    this.testStep = res.data.data.cols;
                }
            }
            
        })
    },
    open(){
        this.dialogFormVisible = true;
        this.getrecord();
    },
    cancel(){
        this.dialogFormVisible = false;
        this.stop();
    },
    change(){
        // if(!this.stage){
        //     alert("请选择下一步操作");
        //     return
        // }
        if(!this.liquid){
            alert("请滴入溶液");
            return
        }
        let req={
            "stage":this.stage,
            "solution":this.liquid
        };
         let config = {
        headers: {
            'Content-Type': 'application/json'
            } 
        }
        this.$axios.post(this.$api.calibrationchange,req,config).then(res =>{
            console.log("stop=="+res)
            if(res.status== 200){
            //    this.stage ="";
               this.liquid ="";
               this.dialogFormVisible = false;
            }
            
        })
    },
    calibrationstatus(){
        this.$axios.post(this.$api.calibrationstatus).then(res =>{
            if(res.status== 200){
                if(res.data.data.calibration_status){
                    this.timeFlag = false;
                    this.timer = window.setInterval(this.underway,1000);
                    this.getrecord();
                }
            //    console.log(this.timer)
            //    window.clearInterval(this.timer);
            //    this.getrecord();
            }
            
        })
    },

  },
  mounted() {
    this.calibrationstatus();
    this.$once('hook:beforeDestroy', () => {
        window.clearInterval(this.timer)
    })
    //  this.start();
  }
}
</script>

<style scoped lang="less">
@import url('../styles/IonicSystem.less');
 .el-table tr {
    background-color: red;
}

/deep/ .el-table td, /deep/ .el-table th {
    padding: 6px 0;
    background:#4d4d4d;
    color: white;
}
/deep/ .el-table__body-wrapper {
    background:#2b2c2c;
}
/deep/.el-table td,/deep/ .el-table th.is-leaf,/deep/.el-table--border,/deep/ .el-table--group{
  border-color: #797979; 
}
/deep/.el-table--border::after,/deep/ .el-table--group::after,/deep/ .el-table::before{
  background-color: #797979;
}
.notStart{
   background:#555;
}

.doingCss{
   background:#1871B9;
}
.endCss{
    background:#2b2c2c;
}
/deep/.el-dialog {
  background:#232423;  
}
/deep/ .el-dialog__title{
    color: white;
}
/deep/ .el-form-item__label {
    color: white;
}

/deep/ .el-input__inner {
    border: 0;
    border-radius: 0; 
    background:#2b2c2c ;
}
/deep/ .el-button--default {
    color: #FFF;
    background-color: #555;
    border-color: #555;
}
/deep/ .el-button {
    border-radius: 0;
}

</style>