<template>
  <div class="app-container">
    <el-card class="box-carde">
      <div slot="header" class="clearfix">
        <span>实际功率&环境数据二维码扫描回传</span>
      </div>
      <div>
        <div class="block">
          <span class="demonstration">日期选择：</span>
          <el-date-picker
            v-model="startTime"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-button type="primary" size="small" style="round-clip: 10px" @click="getQR">查询</el-button>
        </div>
        <div style="text-align: center">
          <div style="font-size: 24px;font-weight: bold;color: #cf2b2b;display: inline-block;">实际功率&环境数据二维码</div>
          <div style="font-size: 12px;font-weight: bold;color: #cf2b2b;display: inline-block;">{{ timestampToTime(startTime) }} <===> {{ timestampToTime(endTime) }}</div>
          <div>
            <el-image
              :src="urlReal"
              :fit="fit"
              :preview-src-list="srcList"
            />
          </div>
        </div>

      </div>
    </el-card>
  </div>

</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      fit: 'fill',
      urlReal: '',
      startTime: new Date(new Date(new Date().toLocaleDateString()).getTime()),
      endTime: new Date(new Date(new Date().toLocaleDateString()).getTime()+ 86399999),
      srcList:[]
    }
  },
  created() {
    this.getQR()
  },
  methods: {
    getQR() {
      var href = window.location.href
      var time = this.startTime.getTime()+ 86399999
      this.urlReal = 'https://' + href.split('//')[1].split(':')[0] + ':9001/qrCode/realPower/'+this.startTime.getTime()+'/'+time
      this.srcList = ['https://' + href.split('//')[1].split(':')[0] + ':9001/qrCode/realPower/'+this.startTime.getTime()+'/'+time]
    },
    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 lang="scss" scoped>
.app-container {}

.pagination {
  margin: 20px 0;
  text-align: right;
}
</style>
