<template>
  <div class="modal-message">
      <p>下载<Icon type="md-close" class='close-btn' @click="closeMask"/></p>
      <div class="mod-content" v-if="flag">
          <i-Table stripe ref="selection" :columns="columns1" :data="objArr" size="large" :no-data-text="noData"></i-Table>
          <button class="my-btn" @click="exportData">下载</button>
      </div>
       <div class="mod-content" v-else>
            <img v-if="isQR" :src="`/data-platform-3/image-service/common/file_get?systemId=dataPlatform&key=${isQR}`" alt="">
            <button class="my-btn" @click="downQR">下载</button>
     </div>
  </div>
</template>

<script>
import { download } from '../../tools/download.js'
export default {
  components: {

  },

  mixins: [],

  props: ['isQR', 'objArr'],

  data () {
    return {
      noData:
        '<div style="padding-top:204px;height:868px;"><i class="iconfont icon-kongzhuangtaiicon" style="font-size:98px;"></i>' +
        '<p style="font-size: 16px;color: #6D747C;">当前状态良好，没有未恢复的报警</p> <p style="font-size:16px;color:#6D747C">您可前往<button style="width:101px;height:30px;margin-left:10px;border: 1px solid #728DEE;border-radius: 2px;color:#728DEE;background: #fff;">查找历史报警</button></p></div>',
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '文件名称',
          key: 'name'
        },
        {
          title: '文件编号',
          key: 'key'
        },
        {
          title: '上传时间',
          key: 'time',
          sortable: true
        }
      ]

    }
  },

  computed: {
    flag () {
      if (this.isQR === 2) {
        return true
      } else {
        return false
      }
    }
  },

  mounted () {

  },

  methods: {
    closeMask () {
      this.$emit('close')
    },
    downQR () {
      const url = `/data-platform-3/image-service/common/file_get?systemId=dataPlatform&key=${this.isQR}`
      download(url, 'qr.png')
    },
    exportData () {
      this.$refs.table.exportCsv({
        filename: '下载表格'
      })
    }
  }

}
</script>

<style scoped lang="less" >
.modal-message {
    p {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
        background: #728DEE;
        color:#fff;
        font-size: 16px;
        .close-btn{
            float: right;
            padding-top: 20px;
            padding-right:20px;
        }
    }
    .mod-content{
        padding:20px;
        text-align: center;
        >img{
            width: 200px;
            height: 200px;
        }
       .my-btn{
            width:180px;
            height: 34px;
            line-height: 34px;
            color: #fff;
            font-size: 14px;
            background: #728DEE;
            border-radius: 2px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-bottom: 30px;
            margin-left: -90px;
        }
    }
}
</style>
<style lang="less">
.modal-message {
    .ivu-table-wrapper {
    border: none;
  }
  .ivu-table td,
  .ivu-table th {
    border: none;
  }
  .ivu-table:before{
      height: 0;
  }
  .ivu-table:after{
      width:0;
  }
  .ivu-table-row .description-td>.ivu-table-cell>span{
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        max-height: 100px;
        display: inline-block;
    }
}

</style>
