<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="180px">
        <el-form-item label="正射图" prop="photoUrl">
          <uploadImage
            :isCompress="false"
            ref="uploadImage"
            v-model="ruleForm.photoUrl"
            :img="ruleForm.photoUrl"
            v-on:addImage="addImage"
            :limit="1"
            v-on:removeImage="removeImage"
          ></uploadImage>
        </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"
          v-if="ruleForm.id"
          style="margin-left: 15px"
          size="medium"
          @click="handleClose"
        >返回</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import driverApi from "@/api/basicData/driver";
import uploadImage from "@/components/uploadImage";

export default {
  name: "photorForm",
  data() {
    var patrn = /^\d+(\.\d+)?$/;
    var lengthP = /^(\d+)(.\d{0,4})?$/;
    var validateNum = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        if (rule.field == "length") {
          if (!lengthP.test(value)) {
            callback(new Error("小数点最多4位"));
          } else if (parseInt(value) > 9999) {
            callback(new Error("最大10000"));
          } else {
            callback();
          }
        } else {
          if (!patrn.test(value)) {
            callback(new Error("请输入数字"));
          } else {
            callback();
          }
        }
      }
    };
    return {
      ruleForm: {},
      validateNum: validateNum,
      addBtnLoading: false,
      categoryList: [
        { id: "categoryOne", name: "Ⅰ类" },
        { id: "categoryTwo", name: "Ⅱ类" },
        { id: "categoryThree", name: "Ⅲ类" },
        { id: "categoryFour", name: "Ⅳ类" },
        { id: "categoryFive", name: "Ⅴ类" }
      ]
    };
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        false;
      }
    },
    userList: {
      type: Array,
      default() {
        return [];
      }
    },
    typeList: {
      type: Object,
      default() {
        return {};
      }
    },
    levelList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {uploadImage },
  created() {},
  mounted() {},
  methods: {
    handleClose(){
      this.$emit('handleClose')
    },
    removeImage() {
      this.ruleForm.photoUrl = "";
    },
    addImage(...data) {
      this.ruleForm.photoUrl = data[0];
    },
    clearValidate() {
      this.$refs.ruleForm.clearValidate("driverArea");
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let method = "addDriver";
          if (this.ruleForm.id) {
            method = "editDriver";
          }
          let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
          this.addBtnLoading = true;
          driverApi[method](ruleForm)
            .then(res => {
              this.addBtnLoading = false;
              this.$refs[formName].resetFields();
              this.$message({
                type: "success",
                message: this.ruleForm.id ? "修改成功" : "添加成功"
              });
              if (this.ruleForm.id) {
                this.$emit("submit", 2);
                this.$emit("onBack");
              } else {
                this.$emit("submit", 1);
              }
            })
            .catch(e => {
              this.addBtnLoading = false;
            });
        }
      });
    },
    onBack() {
      this.$refs["ruleForm"].resetFields();
      this.$emit("onBack");
    }
  }
};
</script>
