<template>
  <box
    :title="title"
    @fullscreen="onFullscreen"
  >
    <div
      class="l-flex__fill l-flex--col jcenter c-device-dashboard-sensor"
      :class="{ fullscreen }"
    >
      <div
        class="l-flex__none c-device-dashboard-sensor__tip u-bold u-text-center"
        :style="{ color: tipColor }"
      >
        {{ tip }}
      </div>
      <div class="l-flex__none c-device-dashboard-sensor__current u-text-center">
        <template v-if="fullscreen">
          {{ sensorTime }} {{ sensorName }}
        </template>
        <template v-else>
          <div>{{ sensorTime }}</div>
          <div>{{ sensorName }}</div>
        </template>
      </div>
      <div
        v-if="fullscreen && sorted.length > 1"
        class="l-flex__fill u-relative"
      >
        <div class="l-flex__fill c-device-dashboard-sensor__list">
          <vue-seamless-scroll
            :data="sorted"
            :class-option="classOption"
          >
            <div
              v-for="(item,index) in sorted"
              :key="index"
              class="l-flex--row c-device-dashboard-sensor__item"
            >
              <div class="l-flex__fill u-text-center u-ellipsis"> {{ item.time }}</div>
              <div class="l-flex__fill u-text-center u-ellipsis"> {{ item.name }}</div>
              <div
                :style="{ color: tipColor }"
                class="l-flex__fill u-text-center"
              >
                {{ item.value || '-' }}
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </box>
</template>

<script>
import {
  Type,
  addListener,
  removeListener
} from '../monitor'
import vueSeamlessScroll from './vue-seamless-scroll.min.js'
import Box from './Box'

export default {
  components: {
    Box,
    vueSeamlessScroll
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      fullscreen: false,
      list: [],
      classOption: {
        step: 0.3,
        hoverStop: false
      }
    }
  },
  computed: {
    sensorTime () {
      return this.list.length
        ? this.sorted[0].time
        : null
    },
    sensorName () {
      return this.list.length
        ? `传感器${this.sorted[0].key}`
        : null
    },
    tipColor () {
      return this.list.length ? this.color : ''
    },
    tip () {
      return this.list.length ? this.sorted[0].value : '未知'
    },
    sorted () {
      return this.list.slice().sort((a, b) => b.sensorValue - a.sensorValue)
    }
  },
  created () {
    addListener(this.type, this.onUpdate, { type: Type.CACHE, value: [] })
  },
  beforeDestroy () {
    removeListener(this.type, this.onUpdate)
  },
  methods: {
    onFullscreen (fullscreen) {
      this.fullscreen = fullscreen
    },
    onUpdate (list) {
      this.list = list.map(item => { return { ...item, time: item.time.substring(0, 16) } })
    },
    getSensors () {
      return Promise.resolve({ data: this.list })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-dashboard-sensor {
  color: #ffffff;

  &__tip {
    font-size: 24px;
    line-height: 36px;
  }

  &__current {
    margin-bottom: 10px;
    color: #9ea9cd;
    font-size: 12px;
  }

  &__list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &__item {
    font-size: 20px;
    line-height: 64px;
    border-bottom: 1px solid #9ea9cd;
  }

  &.fullscreen {
    .c-device-dashboard-sensor__tip {
      padding-top: 32px;
      font-size: 64px;
      line-height: 90px;
    }

    .c-device-dashboard-sensor__current {
      margin-bottom: 90px;
      font-size: 16px;
    }
  }
}
</style>
