<template>
    <div class="base-box2">
      <div class="base-list">

        <p class="title">
          水深
        </p>
        <p class="word">
          {{waterList[0]}}
        </p>

        <p class="title">
          PH值
        </p>
        <p class="word">
          {{waterList[1]}}
        </p>

      </div>
      <div class="base-list">

        <p class="title">
          电导率
        </p>
        <p class="word">
          {{waterList[2]}}
        </p>
        <p class="title">
          温度
        </p>
        <p class="word">
          {{waterList[3]}}
        </p>
      </div>

      <div class="base-list">

        <p class="title">
          水浊度
        </p>
        <p class="word">
          {{waterList[4]}}
        </p>
        <p class="title">

        </p>
        <p class="word">

        </p>

      </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
              waterList: [
                '15m',
                '6.89pH',
                '', //电导率
                '2摄氏度',
                '', //水浊度
              ],
              myTimer: null
            }
        },
        created() {
          this.changeData()
        },
        methods: {
          changeData(){
            this.myTimer = setInterval(() => {
              for (let i = 0; i < this.waterList.length; i++) {
                if(i==0){
                  var num1 = this.randomNum(149, 151)/100;
                  console.log(num1)
                  // this.waterList[i] = num1
                  this.$set(this.waterList, [i], num1)
                  console.log(this.waterList)
                }else if(i==1){

                }else if(i==2){

                }else if(i==3){

                }else{

                }
              }

            }, 2000);
          },
          //生成从minNum到maxNum的随机数
          randomNum(minNum,maxNum){
            switch(arguments.length){
              case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
              case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
              default:
                return 0;
                break;
            }
          }
        },
        destroyed:function () {
          console.log('destroy')
          clearInterval(this.myTimer)
        }
    }
</script>

<style scoped lang="less" type="text/less">
  .base-box2{
    border: 1px solid #ccc;
  }
  .base-list{
    display: flex;
    border-bottom: 1px solid #ccc;

  }
  .base-list:nth-child(2n+1){
    background: #efefef;
  }
  .base-list:last-child{
    border-bottom: 0px;

  }
  .base-list p{
    margin: 0px;
    padding: 10px;
  }

  .base-list .title{
    width: 19%;
    font-size: 15px;
    font-weight: bolder;
    color: #222;
    border-right: 1px solid #ccc;
  }
  .base-list .word{
    width: 29%;
    font-size: 15px;
    color: #555;
    border-right: 1px solid #ccc;

  }
  .base-list .word:last-child{
    border-right: 0px

  }
</style>
