<template >
  <div class="net-state-panel">
    <!-- 在线设备 -->
    <div>
      <div id="onlineDevice"></div>
      <div  class="label">在线设备</div>
    </div>
    <!-- 离线设备 -->
    <div>
      <div id="offlineDevice"></div>
      <div class="label">离线设备</div>
    </div>
  </div>
</template>

<script>
import { Liquid } from '@antv/g2plot';



export default {
  name: 'NetStatePanel',
  props: {
    online: {
      type: Number,
      default: 0
    },
    offline: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      onlineDevicePlot: null,
      offlineDevicePlot: null
    }
  },
  mounted() {
    this.onlineDevicePlot = new Liquid('onlineDevice', this.onlineConfig());
    this.onlineDevicePlot.render();
    this.offlineDevicePlot = new Liquid('offlineDevice', this.offlineConfig());
    this.offlineDevicePlot.render();
  },
  methods: {
    watchProps: function (props) {
      if(this.offlineDevicePlot) {
        this.offlineDevicePlot.update({
          percent: props.offline
        })
      }
      if(this.onlineDevicePlot) {
        this.onlineDevicePlot.update({
          percent: props.online
        })
      }
    },
    onlineConfig() {
      return {
      percent: this.$dyn_props.online,
      outline: {
        border: 2,
        distance: 2,
      },
      wave: {
        length: 128,
      },
      statistic: {
        content: {
          style: {
            fill: '#fff',
            fontSize: '2vh',
          }
        }
      }
    }
    },
    offlineConfig() {
      return {
        percent: this.$dyn_props.offline,
        liquidStyle: {
          fill: '#F56C6C',
          stroke: '#F56C6C',
          lineWidth: 0
        },
        outline: {
          border: 2,
          distance: 2,
        },
        wave: {
          length: 128,
        },
        statistic: {
          content: {
            style: {
              fill: '#fff',
              fontSize: '2vh',
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped lang='less'>
.net-state-panel {
  width: 300px;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  div {
    
    #onlineDevice,#offlineDevice {
      width: 150px;
      height: 150px;
    }

    .label {
      text-align: center;
    }
  }
}
</style>
