<template>
  <el-drawer
    title="正射图"
    :visible.sync="visible"
    direction="rtl"
    size="500px"
    :before-close="handleClose"
  >
    <div class="photo-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.photoName}}</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/user/user";
import inspectApi  from "@/api/file/inspectfile"
import $ from "jquery";

export default {
  name: "photorForm",
  data() {
    return {
      ruleForm: {},
      uploadLoading: false,
      addBtnLoading: false
    };
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {},
  created() {
    this.ruleForm = JSON.parse(JSON.stringify(this.data));
  },
  mounted() {},
  methods: {
    uploadFile() {
      $("#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: "上传成功"
          });
          this.ruleForm.photoUrl = rs.data.url;
          this.ruleForm.photoName = rs.data.fileName;
          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;
          inspectApi.editPhoto(ruleForm)
            .then(res => {
              this.addBtnLoading = false;
              this.$message({
                type: "success",
                message:"操作成功"
              });
             this.$emit('successSubmit')
            })
            .catch(e => {
              this.addBtnLoading = false;
            });
        }
      });
    }
  }
};
</script>
