<template>
  <el-dialog class="client-data-dialog" title="客户上传" :visible.sync="visible" :before-close="handleClose">

    <div class="input">
      <el-form :model="dataModel" ref="clientBatchForm" :label-width="'100px'">

        <el-form-item label="特征项" prop="originDesc">
          <el-input type="textarea" v-model="originDesc"></el-input>
        </el-form-item>

        <el-form-item label="文件上传" prop="originDesc">


          <el-upload
            ref="upload"
            accept=".xlsx,xls"
            drag
            :multiple="false"
            :data="system"
            :action="url"
            :auto-upload="false"
            :on-success="handleSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em> (文件大小<10M)</div>
          </el-upload>

          <br>
          <el-button class="btn" type="primary" size="large" @click="submitUpload">开始上传</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitClick" :loading="ui.submitLoading">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">


  export default {
    name: 'ClientUploadDialog',
    props: {
      dialogVisible: {
        type: Boolean,
        required: true
      },

    },
    data() {
      return {
        url: '',
        fileName: '',
        filePath: '',
        system: {},
        originDesc: '',
        ui: {
          submitLoading: false
        },
        visible: this.$props.dialogVisible,
        dataModel: {}
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.createUrl();
      })
    },
    methods: {
      /** 根据当前url生成上传文件的url*/
      createUrl() {
        let http = window.location.protocol;
        let host = window.location.host;
        this.url = `${http}//${host}/api/upload/clientData`
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      /** 上传成功处理*/
      handleSuccess(res, file, fileList) {
        if (res.code < 1)
          this.$notify.error({title: '错误', message: res.msg});
        else {
          this.fileName = file.name
          this.filePath = res.data
          this.$notify({title: '成功', message: res.data.data, type: 'success'});
        }
      },
      /** 提交点击 */
      async submitClick() {
        this.$$post('/originIndex', {fileName: this.fileName, filePath: this.filePath, originDesc: this.originDesc})
          .then(res => {
            if (res.data.code < 1) {
              this.$message.error(res.data.msg);
              return
            }
            this.$message({message: '回退成功', type: 'success'});
            this.handleClose();
            window.location.reload();
          })
          .catch(err => {
            this.showErrorAlert(err)
          })
      },
      /** 关闭处理 */
      handleClose() {
        this.visible = false;
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 300);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .client-data-dialog {
    .input {
      width 60%
      margin auto
    }
  }
</style>
