<template>
  <div class="app-container" :style="{ 'backgroundColor': loading ? '' : 'rgba(240, 242, 245, 1)' }">
    <div class="first">
      <div class="item">
        <h1>{{ data.info.currentDeviceTotalNum }}</h1>
        <span>当前设备总数量（台）</span>
      </div>
      <div class="item">
        <h1>{{ data.info.currentStoreTotalNum }}</h1>
        <span>当前门店总数量（家）</span>
      </div>
      <div class="item">
        <h1>{{ data.info.currentDayStoreTotalNum }}</h1>
        <span>当日新增门店数量（家）</span>
      </div>
      <div class="item">
        <h1>{{ data.info.lastWeekStoreTotalNum }}</h1>
        <span>上周新增门店数量（家）</span>
      </div>
      <div class="item">
        <h1>{{ data.info.lastMonthStoreTotalNum }}</h1>
        <span>上月新增门店数量（家）</span>
      </div>
    </div>
    <div class="second">
      <div class="left">
        <span>当前设备在线情况</span>
        <div id="circle" style="width: 100%; height: calc(100% - 20px)" />
      </div>
      <div class="right">
        <div class="header">
          <span>门店新增趋势</span>
          <el-button-group size="small">
            <el-button v-for="item in data.buttonGroup" :key="item.value"
              :type="getDisabled(item.value) ? 'primary' : ''" :plain="getDisabled(item.value)"
              :disabled="getDisabled(item.value)" @click="handleChangeButton(item.value)">{{ item.label }}</el-button>
          </el-button-group>
        </div>
        <div id="store" style="width: 100%; height: calc(100% - 20px)" />
      </div>
    </div>
    <div class="third">
      <span>设备运行统计</span>
      <div id="dev" style="width: 100%; height: calc(100% - 20px)" />
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { devData, storeLine } from '@/api/index'
const { proxy } = getCurrentInstance()

// 遮罩层
const loading = ref(false)

const data = reactive({
  info: {},
  buttonGroup: [{
    value: 0,
    label: '最近一周'
  }, {
    value: 1,
    label: '最近30天'
  }, {
    value: 2,
    label: '最近半年'
  }, {
    value: 3,
    label: '最近1年'
  }],
  xAxisOptions: [],
  yAxisOptions: []
})

// 最近一周
const getTime = (e) => {
  data.xAxisOptions = []
  let today = new Date()
  for (let i = 0; i < e; i++) {
    let date = new Date(today)
    date.setDate(today.getDate() - i)
    data.xAxisOptions.unshift(proxy.parseTime(date, '{y}-{m}-{d}'))
  }
}
getTime(7)

// 设备信息
const getDevData = async () => {
  loading.value = true
  await devData({}).then(res => {
    if (res.code === 0) {
      data.info = res.data
      loading.value = false
    }
  })
}

// 门店新增趋势
const getStoreLine = async (e) => {
  data.yAxisOptions = []
  await storeLine({ type: e }).then(res => {
    if (res.code === 0) {
      data.xAxisOptions.forEach((i, index) => {
        data.yAxisOptions[index] = 0
        res.data.forEach(j => {
          if (j.day === i) {
            data.yAxisOptions[index] = j.totalNum
          }
        })
      })
    }
  })
}

// 设备在线情况
const circleChart = () => {
  let circle = echarts.init(document.getElementById('circle'))
  circle.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '0%',
      right: '0%'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['30%', '50%'],
      itemStyle: {
        borderRadius: 4,
        borderColor: '#fff',
        borderWidth: 2
      },
      color: ['#5470c6', '#ef6665'],
      label: false,
      data: [{
        value: data.info.currentDeviceOnlineNum, name: `在线`
      }, {
        value: data.info.currentDeviceOfflineNum, name: `离线`
      }]
    }]
  })
}

// 门店新增趋势
const lineChart = () => {
  let store = echarts.init(document.getElementById('store'))
  store.setOption({
    color: '#f55b4f',
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.xAxisOptions
    },
    yAxis: {
      type: 'value',
      minInterval: 1
    },
    grid: {
      width: '93%',
      height: '75%',
      bottom: 30,
      left: 40,
    },
    series: [{
      type: 'line',
      stack: 'Total',
      lineStyle: {
        color: '#f55b4f'
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#f55b4f'
        },
        {
          offset: 1,
          color: '#FFF'
        }])
      },
      emphasis: {
        focus: 'series'
      },
      data: data.yAxisOptions
    }]
  })
}

// 设备运行统计
const devChart = () => {
  let xAxisData = []
  let onlineNum = []
  let offlineNum = []
  data.info.deviceRunList.map(i => {
    xAxisData.push(i.day)
    onlineNum.push(i.onlineNum)
    offlineNum.push(i.offlineNum)
  })
  let dev = echarts.init(document.getElementById('dev'))
  dev.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      top: '0%',
      right: '0%',
      data: ['设备在线数', '设备离线数']
    },
    grid: {
      width: '95%',
      bottom: 30,
      left: 40,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      minInterval: 1
    },
    series: [{
      name: '设备在线数',
      type: 'line',
      data: onlineNum
    }, {
      name: '设备离线数',
      type: 'line',
      data: offlineNum
    }]
  })
}

const activeButton = ref(0)
const getDisabled = (e) => {
  return activeButton.value === e
}
// 切换日期
const handleChangeButton = async (e) => {
  activeButton.value = e
  if (e === 0) {
    getTime(7)
  } else if (e === 1) {
    getTime(30)
  } else if (e === 2) {
    getTime(182)
  } else {
    getTime(365)
  }
  await getStoreLine(e)

  lineChart()
}

onMounted(async () => {
  await getDevData()
  await getStoreLine(0)
  nextTick(() => {
    circleChart()
    lineChart()
    devChart()
  })
})
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
  background-color: rgba(240, 242, 245, 1);

  .first {
    height: 150px;
    display: flex;
    margin-bottom: 20px;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #FFF;
      width: 20%;
      margin-right: 20px;
    }

    .item:last-child {
      margin-right: 0;
    }
  }

  .second {
    height: 240px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .left,
    .right {
      background-color: #FFF;
      padding: 15px;
    }

    .left {
      min-width: calc(100% / 3);
      margin-right: 20px;
    }

    .right {
      min-width: calc(100% - 100% / 3 - 20px);

      .header {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .third {
    height: calc(100% - 240px - 150px - 40px);
    background-color: #FFF;
    padding: 20px;
  }
}
</style>
