<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    class="c-device-dashboard"
  >
    <div
      v-if="device"
      class="c-device-dashboard__main"
      :style="style"
    >
      <Header class="c-sibling-item--v" />
      <DeviceInfo
        class="c-sibling-item--v has-padding--h"
        :device="device"
      />
      <div class="l-flex c-sibling-item--v far has-padding--h">
        <div class="l-flex__none l-flex--col c-sibling-item">
          <div class="l-flex__none l-flex c-sibling-item--v">
            <div
              class="c-sibling-item"
              style="width: 296px; height: 284px;"
            >
              <LinkState :device="device" />
            </div>
            <div class="c-sibling-item far c-sensors">
              <div>
                <Sensor
                  type="temperature"
                  title="温度"
                  color="#ff0000"
                  :device="device"
                />
              </div>
              <div>
                <Sensor
                  type="smoke"
                  title="烟雾"
                  color="#8400ff"
                  :device="device"
                />
              </div>
              <div>
                <Sensor
                  type="flooding"
                  title="水浸"
                  color="#00D494"
                  :device="device"
                />
              </div>
              <div>
                <Sensor
                  type="light"
                  title="光照"
                  color="#ffa200"
                  :device="device"
                />
              </div>
            </div>
          </div>
          <div class="l-flex__none l-flex c-sibling-item--v far">
            <div
              class="l-flex__none c-sibling-item far"
              style="width: 160px; height: 292px;"
            >
              <Map />
            </div>
            <div
              class="l-flex__none c-sibling-item far"
              style="width: 472px; height: 292px;"
            >
              <DeviceAlarm :device="device" />
            </div>
          </div>
        </div>
        <div class="l-flex__none l-flex--col c-sibling-item far">
          <div
            class="l-flex__none c-sibling-item--v"
            style="width: 584px; height: 346px;"
          >
            <TrafficCamera :device="device" />
          </div>
          <div class="l-flex__none l-flex c-sibling-item--v far">
            <div
              class="l-flex__none c-sibling-item"
              style="width: 264px; height: 230px;"
            >
              <Timeline :device="device" />
            </div>
            <div
              class="l-flex__none c-sibling-item far"
              style="width: 304px; height: 230px;"
            >
              <TrafficStatistics :device="device" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDevice } from '@/api/device'
import {
  start,
  stop,
  startSensor
} from '../monitor'
import Header from './Header'
import DeviceInfo from './DeviceInfo'
import LinkState from './LinkState'
import Sensor from './Sensor'
import DeviceAlarm from './DeviceAlarm'
import Map from './Map'
import TrafficCamera from './TrafficCamera'
import Timeline from './Timeline'
import TrafficStatistics from './TrafficStatistics'

export default {
  name: 'DeviceDashboard',
  components: {
    Header,
    DeviceInfo,
    LinkState,
    Sensor,
    DeviceAlarm,
    Map,
    TrafficCamera,
    Timeline,
    TrafficStatistics
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: true,
      device: null,
      style: null
    }
  },
  created () {
    this.getDevice()
  },
  beforeDestroy () {
    stop()
    window.removeEventListener('resize', this.checkScale)
  },
  methods: {
    checkScale () {
      this.style = { transform: `scale(${window.innerWidth / 1280}, ${window.innerHeight / 720})` }
    },
    getDevice () {
      this.loading = true
      const id = this.id
      getDevice(id)
        .then(
          ({ data }) => {
            if (data) {
              start(data)
              startSensor()
              this.device = data
              this.checkScale()
              window.addEventListener('resize', this.checkScale)
            } else {
              this.$message({
                type: 'warning',
                message: '设备不存在'
              })
              this.$router.replace({
                name: 'device-list'
              })
            }
          },
          () => {
            this.$router.replace({
              name: 'device-detail'
            })
          }
        )
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-dashboard {
  min-height: 100%;
  background-color: #1d2033;
  overflow: hidden;

  &__main {
    width: 1280px;
    height: 720px;
    transform-origin: left top;
  }
}

.c-sensors {
  display: grid;
  grid-template-rows: 134px 134px;
  grid-template-columns: 160px 160px;
  grid-row-gap: $spacing;
  grid-column-gap: $spacing;
}
</style>
