export default {
  props: ['message']
}

export default {
  props: {
    message: {
      type: String, // 指定 prop 類(lèi)型
      required: true, // 標(biāo)記 prop 為必填
      default: 'default message', // 設(shè)置默認(rèn)值
      validator(value) { // 自定義驗(yàn)證函數(shù)
        return value.length <= 10;
      }
    }
  }
}

<template>
    <div>
      <Test :num ="num"></Test>
    <Form class="form"  :num ="num"></Form>
    </div>
</template>
<script>
export default {
// ------
  mounted(){
        // websocket 更新
    this.setupWebSocket();
  },
  methods: {
    setupWebSocket() {
      this.ws = new WebSocket(`ws://localhost:8081/example/ws/${999}`);
      console.log(this.ws);
      this.ws.addEventListener('open', this.openHandle);
      this.ws.addEventListener('message', this.messageHandle);
      this.ws.addEventListener('close', this.closeHandle);
      this.ws.addEventListener('error', this.errorHandle);
    },
    openHandle() {
      console.log('WebSocket連接成功?。。?！');
    },
    closeHandle() {
      console.log('WebSocket關(guān)閉?。。?！');
      if (!this.isHandle) {
        this.restart();
      }
      this.isHandle = false;
    },
    // 收到消息更新數(shù)據(jù)
    messageHandle(data) {
      console.log('前端接收到消息?。。?！',data);
      // 使組件重新加載
      // this.$forceUpdate()
      this.num =this.num + 1  // 數(shù)據(jù)更新的信號(hào)
    },
    errorHandle() {
      console.log('WebSocket出錯(cuò)了！?。。?);
      console.log('error');
    },
    sendMessage() {
      console.log('我發(fā)送了消息');
      // this.ws.send('請(qǐng)傳數(shù)據(jù)給我！'+input);
    },
    closeWs() {
      this.ws.close();
    },
    restart() {
      console.log('客戶(hù)端與服務(wù)器連接失敗，準(zhǔn)備重連');
      this.timer = setInterval(() => {
        console.log('重連中...');
        this.ws = new WebSocket(`ws://localhost:8081/example/ws/${999}`);
        if (this.ws.readyState === 1) {
          clearInterval(this.timer);
          this.timer = null;
          this.ws.addEventListener('open', this.openHandle);
          this.ws.addEventListener('close', this.closeHandle);
          this.ws.addEventListener('message', this.messageHandle);
          this.ws.addEventListener('error', this.errorHandle);
          console.log('重連成功');
        }
      }, 1000);
    },
  }
// ------
}
</script>

<script>
export default {
// ------
     props:{
    //更新信號(hào)
    num:{
      type: Number,
      default:0,
    },
  },
    // 監(jiān)聽(tīng)num
     watch:{
    num(newVal,oldVal) {
      console.log('newValpf :',newVal,'oldValpf :',oldVal)
      this.getInfo();  // 重新發(fā)送請(qǐng)求
    },
  },
    // get請(qǐng)求
     methods: {
    getInfo() {
       axios({
          url:'/api/outstanding-kid/kid/getAllUsers',
          method:'get'
        }).then((data)=>{
          // console.log(data.data.data);
          const electric = data.data.data.map(item => item.electric)
          const id = data.data.data.map(item => item.id)
          this.ChartView(electric,id)
        }).catch((error)=>{
          console.dir(error);
        })
    },
//------
}
</script>