<template>
  <div class="chart-container">
    <div class="filter">
      <div class="startTime">
        <span class="timeText">起始时间</span>
        <el-date-picker
          v-model="startTime"
          format="yyyy-MM-dd"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime">
        <span class="timeText">截止时间</span>
        <el-date-picker
          v-model="endTime"
          format="yyyy-MM-dd"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="timeQuery">
        <el-button size="small" :loading="loading"  @click="dateQuery">查询</el-button>
      </div>
    </div>

    <div class="content">
      <el-tabs type="card" v-model="activeName">
        <el-tab-pane label="图表" name="first">
          <div class="tableContent" ref="bannerHeight"  @load="imgLoad">

              <el-carousel :interval="5000" type="card" :height="bannerHeight + 'px'">
                <el-carousel-item v-for="item in rpImages" :key="item">

                  <div style="height: 100%;width: 100%;display: flex;justify-content:center;align-items:center ">
                    <div class="qrCodeText"><div class="animated rotateInDownLeft">{{item}}</div></div>
                    <div id="qrCode" ref="qrCodeDiv" name="qrCodeDiv" :style="{width:(bannerHeight-25) + 'px',height:(bannerHeight-25) + 'px'}"></div>
                    <div class="qrCodeText"><div class="animated rotateInDownLeft">实际功率</div></div>
                    </div>

                </el-carousel-item>

              </el-carousel>


          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2';
  export default {
    name: 'nwp',
    data() {
      return {
        chart: null,
        queryStartTime: '',
        queryEndTime: '',
        startTime: new Date(new Date().toLocaleDateString()).getTime(),
        endTime: new Date(new Date().toLocaleDateString()).getTime()+1000*60*60*24-1000,
        loading: true,
        qrCodeContents: [],
        bannerHeight:'',
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        rpImages:1,
        activeName: 'first',
        timeSteps:[{key:'5分钟',value:5},{key:'15分钟',value:15}],
        timeStep:15
      }
    },
    created() {
      this.dateQuery()
    },
    mounted() {
      window.addEventListener('resize', () => {
        this.imgLoad()
      }, false)

    },
    methods: {
      dateQuery(){
        var between  = this.endTime - this.startTime
        if(between<2678400000 && between>0){
          this.loading = true
          this.$axios.get('/qrCode/realPower/'+this.startTime+'/'+this.endTime).then((res) => {
            this.qrCodeContents = res.data
            this.rpImages = this.qrCodeContents.length
            this.loading = false
            this.imgLoad()
          }).catch((error) => {
            this.loading = false
            this.$message.error('查询二维码内容出错' + error)
          })
        }else{
          this.$message.warning('时间过长或不规范')
          return
        }

      },

      // 下面的 imgLoad 是页面渲染完成的加载方法，确保屏幕中的图片的高度第一次渲染到页面。
      imgLoad () {
        this.$nextTick(() => {
          var height = this.$refs.bannerHeight.offsetHeight-70
          this.bannerHeight = height
          var divs = document.getElementsByName('qrCodeDiv')
          for(var j = 0;j<divs.length;j++){
            divs[j].innerHTML = ""
          }
          for(var i = 0;i<this.$refs.qrCodeDiv.length;i++){
              new QRCode(this.$refs.qrCodeDiv[i], {
              text: this.qrCodeContents[i],
              width: this.bannerHeight-25,
              height: this.bannerHeight-25,
              colorDark: "#333333", //二维码颜色
              colorLight: "#ffffff", //二维码背景色
              correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
            })
          }

        })
      }
    },
  }
</script>

<style scoped>
  /*.chart-container {*/
    /*position: relative;*/
    /*width: 100%;*/
    /*height: calc(100vh - 50px);*/
  /*}*/

  /*.filter {*/
    /*position: relative;*/
    /*display: flex;*/
    /*padding: 20px 0 10px 15px;*/
    /*font-size: 12px;*/
    /*line-height: 11px;*/
    /*color: white;*/
  /*}*/

  /*input {*/
    /*background: transparent;*/
    /*border: none;*/
    /*color: white;*/
  /*}*/

  /*.timeText {*/
    /*opacity: 0.69;*/
    /*padding-right: 7px;*/
    /*font-size: 14px;*/
  /*}*/

  /*.startTime {*/
    /*display: inline-block;*/
  /*}*/

  /*.endTime {*/
    /*display: inline-block;*/
    /*padding-left: 42px;*/
  /*}*/


  /*.timeQuery {*/
    /*background: transparent;*/
  /*}*/

  /*.el-button {*/
    /*background: transparent;*/
    /*color: white;*/
  /*}*/

  /*.filter {*/
    /*width: 100%;*/
    /*background-color: transparent;*/
    /*height: 10%*/
  /*}*/

  /*.filter >>> input {*/
    /*background: transparent;*/
    /*border: none;*/
    /*color: white;*/
  /*}*/

  /*.content {*/
    /*width: 100%;*/
    /*background-color: transparent;*/
    /*height: 90%;*/
    /*padding-left: 5px;*/
    /*padding-right: 5px;*/
  /*}*/

  /*.content >>> .el-tabs__item {*/
    /*color: white;*/
  /*}*/

  /*.content >>> .el-tabs__item.is-active {*/
    /*color: #409EFF;*/
  /*}*/


  .tableContent {
    /*width: 100%;*/
    /*height: calc(80vh - 50px);*/
    padding-top:20px ;
    padding-left: 5px;
    padding-right: 5px;
  }

  /*.tableContent >>> td {*/
    /*border: 1px solid #ffffff;*/
  /*}*/
  .tableContent >>>.el-card__body {
    padding: 10px;
  }
  .box-card {
    width: 100%;
    height: calc(40vh - 50px);
  }
  /*.el-carousel__item h3 {*/
    /*color: #475669;*/
    /*font-size: 18px;*/
    /*opacity: 0.75;*/
    /*line-height: 300px;*/
    /*margin: 0;*/
  /*}*/

  /*.el-carousel__item:nth-child(2n) {*/
    /*background-color: #000000;*/
  /*}*/

  /*.el-carousel__item:nth-child(2n+1) {*/
    /*background-color: #000000;*/
  /*}*/

</style>

