<template>
  <el-dialog title="深化点表导入" :visible.sync="dialogFormVisible" class="dialogFormVisible" @close="messageKey = ''">
    <h5 class="title">深化点表中必须包含四列，表头分别是$唯一识别码$、￥动态信息点名称￥、表号、功能号，每列可以在表中任意位置，不受前后排序的影响。$唯一识别码$使用的设备信息点，由项目的实际需求决定。</h5>
    <p class="time">
      <el-button type="text" :disabled="!messageKey" @click="download">下载导入结果</el-button>
    </p>
    <el-upload
      class="upload-demo"
      v-loading='loading'
      drag
      action="/api/datacenter/graphic/import/point"
      :show-file-list='false'
      :headers="headers"
      name="file"
      multiple
      :on-progress="progress"
      :on-success="success"
      :on-error="error">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传Excel文件</em></div>
      <div class="el-upload__tip tips" slot="tip">上传的Excel数据将完全覆盖当前设备信息点（原有数据不会保留）</div>
    </el-upload>

  </el-dialog>
</template>

<script>
import storage from '@/framework/utils/storage'
import {mapGetters} from 'vuex'

export default {
  name: "excelDialog",
  data() {
    return {
      dialogFormVisible: false,
      messageKey: '',
      loading: false
    }
  },
  computed: {
    ...mapGetters('layout', ['projectId']),
    headers() {
      return {
        'ProjectId': this.projectId,
        'Comming': 'adm',
        'Account': storage.get("user_name")
      }
    },
  },
  methods: {
    openDialog() {
      this.dialogFormVisible = true
    },
    progress(event, file, fileList) {
      this.loading = true
    },
    success(event, file, fileList) {
      if (event.result == 'success') {
        this.loading = false
        this.messageKey = event.message
        this.$message.success('上传成功')
      } else {
        this.loading = false
        this.messageKey =''
        this.$message.error('目前只支持.xlsx格式，请重新上传')
      }
    },
    error(event, file, fileList) {
    },
    download() {
      const url = '/api/datacenter/graphic/downloads/point?key=' + this.messageKey
      let a = document.createElement("a");
      a.href = url;
      a.download = `${this.messageKey}.xlsx`;
      a.click();
    }
  }
}
</script>

<style scoped lang="less">
.dialogFormVisible {
  .time {
    margin: 10px 0;
    font-size: 15px;

    .text {
      margin-right: 10px;
      font-size: 14px;
    }
  }

  .tips {
    color: red;
    font-size: 14px;
    font-weight: bold;
  }

  /deep/ .el-upload {
    width: 100%;
  }

  /deep/ .el-upload-dragger {
    margin: 0 auto;
    width: 100%;
  }
}
</style>
