<template>
  <div>
    <el-card>
      <span style="margin-left: 5px">产品名称:</span>
      <el-select v-model="ProductValue" size="medium" style="width:220px;" placeholder="请选择产品">
        <el-option
          v-for="item in Product"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button type="success" plain size="small" style="margin-left: 20px" @click="submitUpload()">确认上传</el-button>
    </el-card>

    <el-card>
      <div style="padding: 10px">
        <el-upload
          ref="upload"
          :action="action"
          :on-success="uploadSuccess"
          :on-error="uploadFailure"
          :before-upload="beforeUpload"
          :on-preview="handlePictureCardPreview"
          :file-list="fileList"
          :auto-upload="false"
          :limit="parseInt(1)"
          multiple
          list-type="picture-card">
          <i class="el-icon-plus"/>
        </el-upload>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { ExecDatabase } from '@/main'
import { mapGetters } from 'vuex'
import { uploadFile } from '@/utils/request'

export default {
  data() {
    return {
      ProductValue: '',
      Product: [],
      action: '', // ↓
      upload: uploadFile,
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      disabled: true // 上传相关↑
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id'
    ])
  },
  created() {
    this.getProduct()
  },
  methods: {
    // 初始化获取产品
    getProduct() {
      this.ProductValue = ''
      this.Product = []
      var param = []
      param[0] = ['企业代码', this.id]
      var Data = this.CreateData('11', '基础数据_产品名称_查询数据', param)
      ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Product.push({
            label: response.data[i].产品名称,
            value: response.data[i].产品代码
          })
        }
      }).then(() => {
        this.ProductValue = this.Product[0].value
      })
    },
    beforeUpload(file) { // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message.error('只能上传图片')
      }
      return isJPG
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    dataURItoBlob(dataURI, type) {
      var binary = atob(dataURI.split(',')[1])
      var array = []
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i))
      }
      return new Blob([new Uint8Array(array)], { type: type })
    },
    // 上传
    uploadSuccess(res, file, fileList) {
      if (res[0].result === '1') {
        const index = fileList.indexOf(file)
        fileList.splice(index, 1)
      } else {
        this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
      }
      if (fileList.length === 0) {
        this.$message.success('提交成功')
      }
    },
    uploadFailure(a, file, fileList) {
      fileList.map(file => {
        this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
      })
    },
    // 提交
    submitUpload() {
      this.action = ''
      this.action = `${uploadFile}?&num=${this.ProductValue}&tableName=标签检测_企业标签上传`
      var param = []
      param[0] = ['企业代码', this.id]
      var Data = this.CreateData('11', '基础数据_产品名称_查询数据', param)
      ExecDatabase(Data).then(response => {
        this.$refs.upload.submit()
      })
    }
  }
}
</script>

<style>
  .el-transfer-panel {
    width:300px;
  }
  .el-transfer-panel__body {
    height: 500px;
    width: 300px;
  }
  .el-transfer-panel__list {
    height: 500px;
    width: 300px;
  }
  .el-transfer-panel__list.is-filterable{
    height: 100%;
  }
  .el-card{
    margin-top: 5px;
  }
</style>
