<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="app-container">
    <el-card class="box-carde">
      <div slot="header" class="clearfix">
        <span>上传上报文件</span>
        <!--<el-button style="float: right;padding:3px 10px 3px 3px;" type="text" :loading="btnLonding"
                   @click="exportDataEvent">导出数据
        </el-button>-->
      </div>
      <vxe-table
        v-show="showTable"
        ref="xTable"
        align="center"
        :loading="loading"
        auto-resize
        border
        resizable
        highlight-current-row
        show-overflow
        :data="tableData"
        :expand-config="{labelField: 'channelNo', expandAll: false}"
      >
        <vxe-table-column title="上报对象信息">
          <vxe-table-column field="uploadObjectName" title="上报对象名称"/>
          <vxe-table-column field="objectNo" title="上报对象编号"/>
          <vxe-table-column field="uploadFileType" title="上报文件类型"/>
          <vxe-table-column field="uploadFileCharSetEnum" title="上报文件字符集"/>
          <vxe-table-column field="uploadProtocolEnum" title="上报协议" />
          <vxe-table-column field="uploadD5000" title="上报嘉越D5000" :formatter="formateuploadD5000"/>
          <vxe-table-column field="uploadObjectRemarks" title="上报对象备注"/>
          <vxe-table-column width="80px" align="center" title="操作">
            <template v-slot="{ row }">
              <el-button
                style="padding: 3px 4px 3px 4px;margin: 2px;border-color: #76a97e;color: white;background-color: #99a9bf"
                size="mini"
                icon="el-icon-upload2"
                @click="upload(row)"
              >上传
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table-column>
      </vxe-table>
    </el-card>
    <div>
      <el-dialog title="上报文件上传" :visible.sync="addVisible" :close-on-click-modal="false" :before-close="closeDialogAddUpload" width="30%">
        <div align="center">
          <span>请先选择文件类型:</span>
          <el-select v-model="uploadFileType" size="small" style="align-content: center" @change="changeShow">
            <el-option
              v-for="item in uploadFileTypeListRow"
              :key="item.key"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div style="height: 20px" />
        <el-upload
          ref="upload"
          v-show="showUpload"
          name="file"
          :http-request="dataUpload"
          align="center"
          class="upload-demo"
          drag
          :action="url"
          :before-upload="beforeUpload"
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        </el-upload>
        <div style="height: 40px" />
      </el-dialog>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      uploadObject: {},
      url: '',
      uploadFileTypeListRow: [],
      uploadFileType: '',
      tableLoading: false,
      addVisible: false,
      loading: true,
      showTable: true,
      tableData: [],
      uploadFileTypeList: [],
      uploadProtocolEnumList: [],
      uploadFileCharSetEnumList: [],
      uploadD5000List: [{ value: '0', label: '否' }, { value: '1', label: '是' }],
      showUpload: false
    }
  },
  created() {
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    var href = window.location.href
    this.url = 'http://' + href.split('//')[1].split(':')[0] + ':9002/uploadFileLog/uploadFile'
    this.get()
  },
  methods: {
    get() {
      Promise.all([this.getUploadProtocolEnum(), this.getUploadFileCharSetEnum(), this.getFileType()]).then((results) => {
        this.disabledBtn = false
        this.loading = true
        this.uploadProtocolEnumList = results[0]
        this.uploadFileCharSetEnumList = results[1]
        this.uploadFileTypeList = results[2]
        this.getAll()
      })
    },
    getAll() {
      this.$axios.get('/uploadObject/').then(res => {
        this.tableData = res.data
        // console.log(this.tableData)
        this.loading = false
        for (let i = 0; i < this.tableData.length; i++) {
          // 添加编辑标识
          this.$set(this.tableData, 'edit', false)
          // 添加省调枚举标识转换
          for (let j = 0; j < this.uploadProtocolEnumList.length; j++) {
            if (this.tableData[i].uploadProtocolEnum == this.uploadProtocolEnumList[j]['value']) {
              this.tableData[i].uploadProtocolEnum = this.uploadProtocolEnumList[j]['label']
            }
          }
          for (let j = 0; j < this.uploadFileCharSetEnumList.length; j++) {
            if (this.tableData[i].uploadFileCharSetEnum == this.uploadFileCharSetEnumList[j]['value']) {
              this.tableData[i].uploadFileCharSetEnum = this.uploadFileCharSetEnumList[j]['label']
            }
          }
          const data = this.tableData[i].uploadFileType.split(',')
          let data1 = ''
          for (let n = 0; n < data.length; n++) {
            for (let j = 0; j < this.uploadFileTypeList.length; j++) {
              if (data[n] == this.uploadFileTypeList[j]['value']) {
                data1 = data1 + this.uploadFileTypeList[j]['label'] + ','
              }
            }
          }
          data1 = data1.substr(0, data1.length - 1)
          this.tableData[i].uploadFileType = data1
        }
      }).catch(error => {
        this.$message.error('获取通道对象信息出错' + error)
      })
    },
    getUploadProtocolEnum() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/uploadFileChannel/getUploadProtocolEnum').then(res => {
          resolve(res.data)
          // console.log("获取上报协议枚举类型成功")
        }).catch((error) => {
          this.$message.error('获取上报协议枚举类型出错' + error)
        })
      })
    },
    getUploadFileCharSetEnum() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/uploadFileChannel/getUploadFileCharSetEnum').then(res => {
          resolve(res.data)
          // console.log("获取上报文件字符集类型成功")
        }).catch((error) => {
          this.$message.error('获取上报文件字符集类型出错' + error)
        })
      })
    },
    getFileType() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/uploadObject/getFileTypeByProvince').then(res => {
          resolve(res.data)
          // console.log("获取上报文件类型成功")
        }).catch((error) => {
          this.$message.error('获取上报文件类型出错' + error)
        })
      })
    },
    // 转上报D5000
    formateuploadD5000({ cellValue }) {
      const item = this.uploadD5000List.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    closeDialogAddUpload() {
      this.uploadFileType = ''
      this.addVisible = false
      this.showUpload = false
      this.clearFiles()
    },
    upload(row) {
      this.uploadObject = row
      const data = row.uploadFileType.split(',')
      this.uploadFileTypeListRow = []
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < this.uploadFileTypeList.length; j++) {
          if (data[i] == this.uploadFileTypeList[j].label) {
            this.uploadFileTypeListRow.push(this.uploadFileTypeList[j])
          }
        }
      }

      this.addVisible = true
    },
    changeShow() {
      if (this.uploadFileType != '') {
        this.showUpload = true
      }
    },
    dataUpload(item) {
      this.fullscreenLoading = true
      const formData = new FormData()
      formData.append('file', item.file)
      console.log(this.uploadObject)
      formData.append('uploadObject', this.uploadObject.id)
      formData.append('FileTypeEnum', this.uploadFileType)

      console.log('上传文件', item.file)

      this.$axios.post('uploadFileLog/uploadFile', formData).then((response) => {
        this.fullscreenLoading = false
        this.$message.success("上传文件成功")
      }).catch((error) => {
        this.$message.error("上传文件失败" + error)
      })
    },
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      // const extension = testmsg === 'xls'
      // const extension2 = testmsg === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 10 // 这里做文件大小限制
      // if (!extension && !extension2) {
      //   this.$message({
      //     message: '上传文件只能是 xls、xlsx格式!',
      //     type: 'warning'
      //   });
      // }
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          type: 'warning'
        })
      }
      return isLt2M
    },
    clearFiles () {
      this.$refs.upload.clearFiles();
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  /*left: 0;*/
  /*width: 100%;*/
  /*min-height: 100%;*/
  /*height: auto;*/
  /*background-image: linear-gradient(25deg, #05362d, #145d44, #24875d, #35b477)*/
}

.pagination {
  margin: 20px 0;
  text-align: right;
}

td {
  width: 33%;
  height: 30px;
}
</style>
