<template>
  <div class="sendLog">
    <div>
      <el-date-picker
        v-model="dataTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <!--<vxe-select v-model="elId" placeholder="请选择场站" >-->
        <!--<vxe-option v-for="(item,index) in elData"  :value="item.stationCode" :label="item.name" />-->
      <!--</vxe-select>-->
      <vxe-select v-model="tunnelId" placeholder="请选择通道" clearable>
        <vxe-option v-for="item in tunnelList" :key="item.id" :value="item.id" :label="item.tunnelName" />
      </vxe-select>

      <div style="display: inline-block">
        <vxe-toolbar>
          <template v-slot:buttons>
            <vxe-button status="primary" @click="getSendLog()">查询</vxe-button>
            <!--<vxe-button status="primary" @click="creatQrCode()">生成二维码</vxe-button>-->
          </template>
        </vxe-toolbar>
      </div>

      <vxe-table
        ref="xTable"
        border
        stripe
        resizable
        show-overflow
        keep-source
        max-height="800"
        align="center"
        :loading="loading"
        :data="tableData"
      >
        <vxe-table-column type="checkbox" width="60"/>
        <!--<vxe-table-column field="stationCode" title="场站名称" :formatter="formatStationCode"/>-->
        <vxe-table-column field="tunnelName" title="通道名称" />
        <vxe-table-column field="sendLog" title="回传内容" />
        <vxe-table-column field="status" title="回传状态" />
        <vxe-table-column field="createTime" title="回传时间" :formatter="dateFormat" />
        <vxe-table-column title="操作" width="150">
          <template v-slot="{ row }">
            <template>
              <vxe-button status="primary" size="mini" @click="showInfo(row)">详细回传内容</vxe-button>
            </template>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        perfect
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="totalResult"
        @page-change="handlePageChange"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      />
      <vxe-modal v-model="butShowInfo" title="回传内容" show-zoom resize width="800px" >
        <template #default>
          <vxe-textarea v-html="message" style="height: 500px;font-size: 16px" />
        </template>
      </vxe-modal>
      <!--<div class="qrcode">-->
        <!--<vxe-modal v-model="qrcode" title="二维码" show-zoom resize width="450px" height="500px" >-->
          <!--<template #default>-->
            <!--<div style="width: 100%">-->
              <!--<div id="qrcode" ref="qrCodeUrl" style="margin: 0 auto"/>-->
            <!--</div>-->

          <!--</template>-->
        <!--</vxe-modal>-->
      <!--</div>-->

    </div>
  </div>
</template>

<script>
  // import QRCode from 'qrcodejs2'
    export default {
        data(){
          return{
            loading: false,
            butShowInfo: false,
            qrcode:false,
            dataTime:[new Date().setHours(0, 0, 0, 0), new Date().setHours(0, 0, 0, 0) + 86400000],
            elData: [],
            tableData:[],
            tunnelList: [],
            elId: '',
            tunnelId: '',
            message: '',
            currentPage: 1,
            pageSize:10,
            totalResult:0
          }
        },
      mounted() {
        this.init()
      },
      methods:{
        init() {
          Promise.all([this.getEl(), this.getTunnel()]).then((res) => {
            this.elData.push({ id: res[0].stationCode, name: res[0].name })
            this.elId = this.elData.stationCode
            this.tunnelList = res[1]
            this.getAll()
          })
        },
        getAll(){
          var startTime = new Date(this.dataTime[0]).getTime()
          var endTime = new Date(this.dataTime[1]).getTime()
          this.loading = true
          this.$axios.get('/sendLog/'+this.currentPage+'/'+this.pageSize+'/'+startTime+'/'+endTime).then(res=>{
            //console.log(res.data)
            this.loading = false
            this.tableData = res.data.content
            this.totalResult = res.data.totalElements
          }).catch((error) => {
            this.loading = false
            this.$XModal.message({status: 'error', message: '查询错误！'})
          })
        },
        getSendLog(){
          if(this.tunnelId != '' && this.tunnelId != null){
            var startTime = new Date(this.dataTime[0]).getTime()
            var endTime = new Date(this.dataTime[1]).getTime()
            this.loading = true
            this.$axios.get('/sendLog/'+this.currentPage+'/'+this.pageSize+'/'+startTime+'/'+endTime+'/'+this.tunnelId).then(res=>{
              //console.log(res.data)
              this.loading = false
              this.tableData = res.data.content
              this.totalResult = res.data.totalElements
            }).catch((error) => {
              this.loading = false
              this.$XModal.message({status: 'error', message: '查询错误！'})
            })
          }else{
            this.getAll()
          }
        },
        showInfo(row){
          //console.log(row)
          this.message = ''
          var info = ''
          var name = ''
          var time = new Date(row.createTime).getTime()
          this.$axios.get('/sendLog/'+time+'/'+row.tunnelId).then(res=>{
            var data = res.data
            //console.log(res.data)
            for(var i = 0; i<data.length; i++){
              name = '<div style="color: #409EFF">'+'设备名: &nbsp;'+data[i].name+'</div>'
              info = info+name+'回传内容: <br/>'+data[i].info+'<br/>'
            }

            this.message = info
            this.butShowInfo = true
          })

        },
        // 生成选中的二维码
        // creatQrCode() {
        //   var text = ''
        //   var selectRecords = this.$refs.xTable.getCheckboxRecords()
        //   if (selectRecords.length == 0) {
        //     this.$XModal.message({status: 'error', message: '请选择要生成二维码的数据！'})
        //   } else {
        //     for(var i = 0; i<selectRecords.length; i++){
        //       text = text + selectRecords[i].sendLog +' '
        //     }
        //     //console.log(text)
        //     this.qrcode = true
        //     this.$nextTick(function () {
        //       document.getElementById('qrcode').innerText = ''
        //       //console.log(this.$refs.qrCodeUrl)
        //       new QRCode(this.$refs.qrCodeUrl, {
        //         text: text, // 需要转换为二维码的内容
        //         width: 420,
        //         height: 420,
        //         colorDark: '#000000',
        //         colorLight: '#ffffff',
        //         correctLevel: QRCode.CorrectLevel.H
        //       })
        //     })
        //
        //   }
        // },
        // 场站
        getEl() {
          const axios = this.$axios
          return new Promise(function(resolve, reject) {
            axios.get('/electricField/').then(res => {
              resolve(res.data)
            })
          })
        },
        // 获取通道
        getTunnel() {
          const axios = this.$axios
          return new Promise(function(resolve, reject) {
            axios.get('/TunnelInfo/getTunnel/Slave').then(res => {
              resolve(res.data)
            })
          })
        },
        handlePageChange({currentPage, pageSize}) {
          this.currentPage = currentPage
          this.pageSize = pageSize
          this.getSendLog()
        },
        formatStationCode({ cellValue, row }){
          const item = this.elData.find(item => item.id === cellValue)
          return item ? item.name : ''
        },
        // 时间转换
        dateFormat({ cellValue, row, column }) {
          if (cellValue !== null) {
            const date = new Date(cellValue) // 时间戳为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() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
            const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
            const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return Y + M + D + h + m + s
          }
        }
      }
    }
</script>

<style scoped>
  .sendLog{
    padding-left: 30px
  }

</style>
