<template>
  <el-drawer
    title="导入水质数据"
    :visible.sync="visible"
    direction="rtl"
    size="500px"
    :before-close="handleClose"
  >
    <div class="export-form">
      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="100px">
        <el-form-item label="上传" prop="photoUrl">
          <el-button
            :loading="uploadLoading"
            @click="uploadFile()"
            size="small"
            type="primary"
            icon="el-icon-upload2"
          >上传
          </el-button>
          <span>{{ruleForm.fileName}}</span>
        </el-form-item>
      </el-form>
      <el-form v-if="isAdmin||btnRule.some(btn=>btn=='template')" ref="ruleForm" :model="ruleForm" size="small" label-width="100px">
        <el-form-item label="下载导入模板" prop="photoUrl">
          <el-button
            :loading="downLoadLoading"
            @click="downLoadFile"
            size="small"
            type="primary"
            icon="el-icon-download"
          >下载
          </el-button>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
          icon="el-icon-document-add"
          :loading="addBtnLoading"
          type="primary"
          size="medium"
          @click="submitForm('ruleForm')"
        >提交
        </el-button>
        <el-button
          icon="el-icon-back"
          style="margin-left: 15px"
          size="medium"
          @click="handleClose"
        >返回
        </el-button>
      </div>
    </div>
    <input id="upload" type="file" name="file" @change="uploadClick" style="display: none;"/>
  </el-drawer>
</template>

<script>
  import api from "@/api/water/waterData";
  import $ from "jquery";
  import {mapGetters} from "vuex";

  export default {
    name: "export-form",
    data() {
      return {
        downLoadLoading: false,
        ruleForm: {},
        uploadLoading: false,
        addBtnLoading: false
      };
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      }
    },
    computed: {
      ...mapGetters(["btnRule", "isAdmin"])
    },
    components: {},
    created() {
    },
    mounted() {
    },
    methods: {
      uploadFile() {
        $("#upload").click();
      },
      downLoadFile() {
        this.downLoadLoading = true
        api.template({}).then(
          rs => {
            window.open(rs.data)
            this.downLoadLoading = false;
          },
          error => {
            this.downLoadLoading = false;
          }
        );
      },
      uploadClick(event) {
        this.uploadLoading = true
        let file = event.target.files[0];
        let formdata = new window.FormData();
        formdata.append("file", file);
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        ruleForm.formdata = formdata
        ruleForm.fileName = file.name
        this.ruleForm = Object.assign({}, ruleForm)
        this.uploadLoading = false
        event.target.value = "";
      },
      handleClose() {
        this.$emit("handleClose");
      },
      submitForm(formName) {
        if (this.ruleForm.formdata) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.addBtnLoading = true;
              api.import(this.ruleForm.formdata).then(
                rs => {
                  this.$message({
                    type: "success",
                    message: "上传成功"
                  });
                  this.$emit('successSubmit')
                  this.addBtnLoading = false;
                },
                error => {
                  this.addBtnLoading = false;
                }
              );
            }
          });
        } else {
          this.$message({
            type: "error",
            message: "请上传文件"
          });
        }
      }
    }
  };
</script>
