<template>
  <div class="drawerr">
    <div style="align-self: center">
      <div style="font-size: 24px;font-weight: bold;color: #ace7ff;display: inline-block;">状态二维码</div>
      <div style="font-size: 12px;font-weight: bold;color: #ace7ff;display: inline-block;">{{ timestampToTime(startTimeTempState) }} <===> {{ timestampToTime(endTimeTempState) }}</div>
      <div>
        <el-image
          :src="urlState"
          :fit="fit"
        />
      </div>
    </div>
    <div style="align-self: center">
      <div style="font-size: 24px;font-weight: bold;color: #ace7ff;display: inline-block;">实际功率二维码</div>
      <div style="font-size: 12px;font-weight: bold;color: #ace7ff;display: inline-block;">{{ timestampToTime(startTimeTempRp) }} <===> {{ timestampToTime(endTimeTempRp) }}</div>
      <div>
        <el-image
          :src="urlReal"
          :fit="fit"
        />
      </div>
    </div>
    <div style="align-self: center">
      <div style="font-size: 24px;font-weight: bold;color: #ace7ff;display: inline-block;">超短期二维码</div>
      <div style="font-size: 12px;font-weight: bold;color: #ace7ff;display: inline-block;">{{ timestampToTime(startTimeTempRp) }} <===> {{ timestampToTime(endTimeTempRp) }}</div>
      <div>
        <el-image
          :src="urlUltrashort"
          :fit="fit"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Drawer',
  props: ['url'],
  data() {
    return {
      fit: 'fill',
      urlState: '',
      urlReal: '',
      urlUltrashort:'',
      startTimeTempRp: new Date(new Date().toLocaleDateString()).getTime() - 1000 * 60 * 60 * 24,
      endTimeTempRp: new Date(new Date().toLocaleDateString()).getTime() - 1,
      startTimeTempState: new Date(new Date().toLocaleDateString()).getTime(),
      endTimeTempState: new Date().getTime(),
    }
  },
  watch: {
    url: function(newUrl, oldUrl) {
      this.urlState = newUrl
      this.urlReal = newUrl
      this.urlUltrashort = newUrl
    }
  },
  created() {
    var href = window.location.href
    this.urlState = 'https://' + href.split('//')[1].split(':')[0] + ':9000/qrCode/runningStatus'
    this.urlReal = 'https://' + href.split('//')[1].split(':')[0] + ':9000/qrCode/realPower'
    this.urlUltrashort = 'https://' + href.split('//')[1].split(':')[0] + ':9000/qrCode/ultraShort'

  },
  mounted() {

  },
  methods: {
    // 时间戳转日期
    timestampToTime(time) {
      const date = new Date(time) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
      const H = date.getHours()
      const MIN = date.getMinutes()
      const S = date.getSeconds()
      return Y + M + D + ' ' + H + ':' + MIN + ':' + S
    }
  }
}
</script>

<style scoped>
.drawerr{
  width: 100%;
  height: 100%;
  background-color: #061f3e;
  display: flex;
  justify-content: space-around;
}
</style>
