<template>
  <Frame v-if="!loading">
    <Header class="header" />
    <div class="DeviceInfo">
      <DeviceInfo
        :device="device"
        :online="isOnline"
      />
    </div>
    <div class="modules">
      <div class="left">
        <div class="line row1">
          <div class="LinkState">
            <LinkState :device="device" />
          </div>
          <div class="Sensors">
            <div class="Sensor">
              <Sensor
                type="temperature"
                title="温度"
                color="#ff0000"
                :device="device"
              />
            </div>
            <div class="Sensor">
              <Sensor
                type="smoke"
                title="烟雾"
                color="#8400ff"
                :device="device"
              />
            </div>
            <div class="Sensor">
              <Sensor
                type="flooding"
                title="水浸"
                color="#00D494"
                :device="device"
              />
            </div>
            <div class="Sensor">
              <Sensor
                type="light"
                title="光照"
                color="#ffa200"
                :device="device"
              />
            </div>
          </div>
        </div>
        <div class="line">
          <div class="DeviceAlarm"><DeviceAlarm :device="device" /></div>
        </div>
        <div class="line">
          <div class="Map"><Map :device="device" /></div>
        </div>
      </div>
      <div class="right">
        <div class="line">
          <div
            class="LEDCamera"
          ><LEDCamera
            ref="LEDCamera"
            :device="device"
          /></div>
        </div>
        <div class="line">
          <div class="Timeline"><Timeline :device="device" /></div>
          <div class="TrafficCamera"><TrafficCamera :device="device" /></div>
        </div>
      </div>
    </div>
    <fullDialog ref="fullDialog">
      <component
        :is="fullComponent"
        :device="device"
        :full="true"
        v-bind="bus"
      />
    </fullDialog>
  </Frame>
</template>

<script>
import {
  start, stop, addListener
} from '../../monitor'
import {
  startSensor, stopSensor
} from '@/views/device/detail/monitor'
import Bus from './bus'
import { getDevice } from '@/api/device'
import Frame from './Frame'
import Timeline from './Timeline'
import LinkState from './LinkState'
import Sensor from './Sensor'
import Map from './Map'
import DeviceAlarm from './DeviceAlarm'
import TrafficCamera from './TrafficCamera'
import LEDCamera from './LEDCamera'
import DeviceInfo from './DeviceInfo'
import fullDialog from './fullDialog'
import Header from './Header'
export default {
  components: {
    Header,
    Sensor,
    Frame,
    Timeline,
    LinkState,
    DeviceAlarm,
    Map,
    TrafficCamera,
    LEDCamera,
    DeviceInfo,
    fullDialog
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: true,
      device: {},
      fullComponent: null,
      bus: {},
      isActivated: false,
      isOnline: false
    }
  },

  created () {
    this.getDevice()
    Bus.$on('click', (v, bus) => {
      const map = {
        Sensor,
        Timeline,
        LinkState,
        DeviceAlarm,
        Map,
        TrafficCamera,
        LEDCamera
      }
      this.fullComponent = map[v]
      this.bus = bus
      this.$refs.fullDialog.show(v)
      if (v === 'LEDCamera') {
        this.$refs.LEDCamera.pause()
      }
    })
  },
  destroyed () {
    stopSensor()
  },
  beforeDestroy () {
    stop()
  },
  methods: {
    getDevice () {
      this.loading = true
      const id = this.id
      getDevice(id)
        .then(({ data }) => {
          if (data) {
            this.device = data
            this.isActivated = data.activate === 2
            this.isOnline = this.isActivated && data.onlineStatus === 1
            start(this.device)
            addListener('online', this.onUpdate)
            startSensor()
          } else {
            this.$message({
              type: 'warning',
              message: '设备不存在'
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    onUpdate (online) {
      this.isActivated = true
      this.isOnline = online
    }
  }
}
</script>

<style lang="scss" scoped>
// .Timeline {
//   padding: 30px;
//   width: 264px;
//   height: 230px;
// }
.header {
  padding: 20px 20px;
}
.DeviceInfo {
  padding: 20px;
}
.modules {
  --margin-r: 5px;
  --margin-c: 10px;
  width: 100%;
  display: flex;
  .line {
    display: flex;
  }
  .left {
    flex: 1;
    margin: var(--margin-c) var(--margin-r);
    display: flex;
    flex-direction: column;
    .line:nth-child(1) {
      flex: 2;
      .LinkState {
        flex: 1;
        margin-right: var(--margin-r);
      }
      .Sensors {
        flex: 1;
        margin-left: var(--margin-r);
        display: flex;
        flex-wrap: wrap;
        .Sensor {
          width: 50%;
          flex: 1;
          margin: 0 var(--margin-r) var(--margin-r) 0;
          width: calc((100% - var(--margin-r)) / 2);
          max-width: calc((100% - var(--margin-r)) / 2);
          min-width: calc((100% - var(--margin-r)) / 2);
          &:nth-child(2n) {
            margin-right: 0;
          }
        }
      }
    }
    .line:nth-child(2) {
      flex: 1;
      .DeviceAlarm {
        width: 100%;
      }
    }
    .line:nth-child(3) {
      flex: 1;
      .Map {
        width: 100%;
      }
    }
    .line:nth-child(n + 1) {
      margin-top: var(--margin-c);
    }
  }
  .right {
    flex: 1;
    margin: var(--margin-c) var(--margin-r);
    .line:nth-child(1) {
      flex: 3;
      .LEDCamera {
        width: 100%;
      }
    }
    .line:nth-child(2) {
      flex: 2;
      .Timeline {
        flex: 1;
        margin-right: var(--margin-r);
      }
      .TrafficCamera {
        flex: 1;
        margin-left: var(--margin-r);
      }
    }
    .line:nth-child(n + 1) {
      margin-top: var(--margin-c);
    }
  }
}
</style>
