<template>
  <el-drawer
    title="导入文件"
    :visible.sync="visible"
    direction="rtl"
    size="500px"
    :before-close="handleClose"
  >
    <div class="photo-form">
      <el-form v-loading="uploadLoading" ref="ruleForm" :model="ruleForm" size="small" label-width="100px">
        <el-form-item label="总磷" prop="tpPic">
          <el-button
            v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
            @click="uploadFile('tp')"
            size="small"
            type="primary"
            icon="el-icon-upload2"
          >上传
          </el-button>
          <span>{{ruleForm.tpName}}</span>
        </el-form-item>
        <el-form-item label="总氮" prop="tnPic">
          <el-button
            v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
            @click="uploadFile('tn')"
            size="small"
            type="primary"
            icon="el-icon-upload2"
          >上传
          </el-button>
          <span>{{ruleForm.tnName}}</span>
        </el-form-item>
        <el-form-item label="氨氮" prop="nh3nPic">
          <el-button
            v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
            @click="uploadFile('nh3n')"
            size="small"
            type="primary"
            icon="el-icon-upload2"
          >上传
          </el-button>
          <span>{{ruleForm.nh3nName}}</span>
        </el-form-item>
        <el-form-item label="溶解氧" prop="doPic">
          <el-button
            v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
            @click="uploadFile('do')"
            size="small"
            type="primary"
            icon="el-icon-upload2"
          >上传
          </el-button>
          <span>{{ruleForm.doName}}</span>
        </el-form-item>
        <el-form-item label="化学需氧量" prop="codPic">
          <el-button
            v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
            @click="uploadFile('cod')"
            size="small"
            type="primary"
            icon="el-icon-upload2"
          >上传
          </el-button>
          <span>{{ruleForm.codName}}</span>
        </el-form-item>
        <el-form-item label="浊度" prop="tubPic">
          <el-button
            v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
            @click="uploadFile('tub')"
            size="small"
            type="primary"
            icon="el-icon-upload2"
          >上传
          </el-button>
          <span>{{ruleForm.tubName}}</span>
        </el-form-item>
        <el-form-item label="左下经度" prop="leftLongitude">
          <el-input clearable v-model="ruleForm.leftLongitude" size="small" placeholder="请输入河湖名称"/>
        </el-form-item>

        <el-form-item label="左下纬度" prop="leftLatitude">
          <el-input clearable v-model="ruleForm.leftLatitude" size="small" placeholder="请输入河湖名称"/>
        </el-form-item>
        <el-form-item label="右上经度" prop="rightLongitude">
          <el-input clearable v-model="ruleForm.rightLongitude" size="small" placeholder="请输入河湖名称"/>
        </el-form-item>
        <el-form-item label="右上纬度" prop="rightLatitude">
          <el-input clearable v-model="ruleForm.rightLatitude" size="small" placeholder="请输入河湖名称"/>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
          v-if="!ruleForm.disabled"
          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/spectrum";
  import $ from "jquery";
  import {mapGetters} from "vuex";

  export default {
    name: "photorForm",
    data() {
      return {
        ruleForm: {},
        uploadLoading: false,
        addBtnLoading: false,
        typeName: ''
      };
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      data: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    computed: {
      ...mapGetters(["btnRule", "isAdmin"])
    },
    components: {},
    created() {
      this.ruleForm = JSON.parse(JSON.stringify(this.data));
    },
    mounted() {
    },
    methods: {
      uploadFile(name) {
        this.typeName = name
        $("#upload").click();
      },
      uploadClick(event) {
        let file = event.target.files[0];
        let formdata = new window.FormData();
        formdata.append("file", file);
        this.uploadLoading = true;
        api.upload(formdata).then(
          rs => {
            this.$message({
              type: "success",
              message: "上传成功"
            });
            let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
            ruleForm[this.typeName + 'Pic'] = rs.data.url;
            ruleForm[this.typeName + 'Name'] = rs.data.fileName;
            this.ruleForm = Object.assign({}, ruleForm)
            this.uploadLoading = false;
          },
          error => {
            this.uploadLoading = false;
          }
        );
        event.target.value = "";
      },
      handleClose() {
        this.$emit("handleClose");
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
            this.addBtnLoading = true;
            api.edit(ruleForm)
              .then(res => {
                this.addBtnLoading = false;
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.$emit('successSubmit')
              })
              .catch(e => {
                this.addBtnLoading = false;
              });
          }
        });
      }
    }
  };
</script>
