<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->


<template>
  <Echart id="leftCenter" :options="data.options" class="left_center_inner" v-if="data.pageflag" ref="charts"></Echart>
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire>
</template>

<script setup>
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { currentPOST } from '/@/api/newDeviceVision/modules'
import { nextTick } from 'process'
import store from '/@/stores/newDeviceVision/modules/setting'


let data = reactive({
  options: {},
  countUserNumData: {
    enable: 0,
    register: 0,
    disable: 0,
    factory: 0,
    totalNum: 0,
  },
  pageflag: true,
  timer: null,
})

onMounted(() => {
  getData()
})

onBeforeUnmount(() => {
  clearData()
})

const clearData = () => {
  if (data.timer) {
    clearInterval(data.timer)
    data.timer = null
  }
}

const getData = () => {
  data.pageflag = true
  // data.pageflag =false
  /* 
    data.countUserNumData = {
  offlineNum: 26,
  lockNum: 4,
  totalNum: 218,
  onlineNum: 188
}
  this.$nextTick(() => {
    this.init()
  }) */

  currentPOST('big1').then((res) => {
    //只打印一次
    if (!data.timer) {
      console.log('设备状态', JSON.stringify(res))

    }
    if (res.success) {
      data.countUserNumData = res.data
      nextTick(() => {
        init()
      })
    } else {
      data.pageflag = false
    }
  })
}

//轮询
const switper = () => {
  if (data.timer) {
    return
  }
  let looper = (a) => {
    getData()
  }
  data.timer = setInterval(looper, store.state.echartsAutoTime)
  const charts = ref()
  let myChart = charts
  myChart.on('mouseover', (params) => {
    clearData()
  })
  myChart.on('mouseout', (params) => {
    data.timer = setInterval(looper, store.state.echartsAutoTime)
  })
}

const init = () => {
  let total = data.countUserNumData.totalNum
  let colors = ['#ECA444', '#33A1DB', '#56B557']
  let piedata = {
    name: '设备状态',
    type: 'pie',
    radius: ['42%', '65%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 4,
      borderColor: 'rgba(0,0,0,0)',
      borderWidth: 2,
    },

    color: colors,
    data: [
      {
        value: data.countUserNumData.enable,
        name: '启用',
        label: {
          shadowColor: colors[0],
        },
      },
      {
        value: data.countUserNumData.register,
        name: '备案',
        label: {
          shadowColor: colors[0],
        },
      },
      {
        value: data.countUserNumData.disable,
        name: '维修',
        label: {
          shadowColor: colors[2],
        },
      },
      {
        value: data.countUserNumData.factory,
        name: '出厂注册',
        label: {
          shadowColor: colors[1],
        },
      },],
  }
  data.options = {
    title: {
      // zlevel: 0,
      text: ['{value|' + total + '}', '{name|总数}'].join('\n'),
      top: 'center',
      left: 'center',
      textStyle: {
        rich: {
          value: {
            color: '#ffffff',
            fontSize: 24,
            fontWeight: 'bold',
            lineHeight: 20,
          },
          name: {
            color: '#ffffff',
            lineHeight: 20,
          },
        },
      },
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,.6)',
      borderColor: 'rgba(147, 235, 248, .8)',
      textStyle: {
        color: '#FFF',
      },
    },
    legend: {
      show: false,
      top: '5%',
      left: 'center',
    },
    series: [
      //展示圆点
      {
        ...piedata,
        tooltip: {
          show: true,
        },
        label: {
          formatter: '   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ',
          //   position: "outside",
          rich: {
            b: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: '#31ABE3',
              fontSize: 14,
            },
            per: {
              color: '#31ABE3',
              fontSize: 14,
            },
          },
        },
        labelLine: {
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          show: true,
        },
        emphasis: {
          show: true,
        },
      },
      {
        ...piedata,
        tooltip: {
          show: true,
        },
        itemStyle: {},
        label: {
          backgroundColor: 'inherit', //圆点颜色，auto：映射的系列色
          height: 0,
          width: 0,
          lineHeight: 0,
          borderRadius: 2.5,
          shadowBlur: 8,
          shadowColor: 'auto',
          padding: [2.5, -2.5, 2.5, -2.5],
        },
        labelLine: {
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          show: false,
        },
      },
    ],
  }
}
</script>
<style lang='scss' scoped></style>