<template>
  <div v-loading="loading">
    <el-row>
      <el-col :sm="24" :md="{ span: 12, offset: 6 }">
        <el-form
          :model="form"
          ref="form"
          class="content"
          label-position="right"
          label-width="140px"
          :rules="rules"
        >
          <el-form-item label="法人名称：" prop="masterName">
            <el-input
              placeholder="请输入法人名称"
              v-model.trim="form.masterName"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人身份证号：" prop="masterIdentity">
            <el-input
              placeholder="请输入法人身份证号"
              v-model.trim="form.masterIdentity"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传身份证件：" prop="identityUrl4Id">
            <el-upload
              :action="putFile"
              :show-file-list="false"
              :on-progress="
                () => {
                  uploading.identityUrl4Id = true;
                }
              "
              :on-success="handleAvatarSuccess('identityUrl4Id')"
              :before-upload="beforeAvatarUpload"
              :http-request="httpRequest"
            >
              <div v-loading="uploading.identityUrl4Id">
                <img
                  class="companyInfo-upload-image"
                  :src="form.identityUrl4Id || identityUrl4Id"
                />
              </div>
              <!-- <div class="companyInfo-upload-tip" slot="tip">
                点击上传身份证（头像面）
              </div> -->
            </el-upload>
            <p class="uploadImgP">上传图片大小限制2M以内</p>
          </el-form-item>
          <el-form-item prop="identityUrl5Id">
            <el-upload
              :action="putFile"
              :show-file-list="false"
              :on-progress="
                () => {
                  uploading.identityUrl5Id = true;
                }
              "
              :on-success="handleAvatarSuccess('identityUrl5Id')"
              :before-upload="beforeAvatarUpload"
              :http-request="httpRequest"
            >
              <div v-loading="uploading.identityUrl5Id">
                <img
                  class="companyInfo-upload-image"
                  :src="form.identityUrl5Id || identityUrl5Id"
                />
              </div>
              <!-- <div class="companyInfo-upload-tip" slot="tip">
                点击上传身份证（国徽面）
              </div> -->
            </el-upload>
            <p class="uploadImgP">上传图片大小限制2M以内</p>
          </el-form-item>
          <el-form-item>
            <el-button @click="next" type="primary">提交</el-button>
            <el-button @click="goBack">上一步</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { check18IdCardNo } from "@/util/validate";
import { putFile } from "@/api/resource/oss";
import lodash from "lodash";
import httpRequest from "./httpRequest";

const accept = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"];

export default {
  props: {
    goBack: Function,
    value: Object,
  },
  data() {
    const validateIdNumber = (rule, value, callback) => {
      if (check18IdCardNo(value)) {
        callback();
      } else {
        callback(new Error("身份证格式不正确"));
      }
    };
    return {
      loading: false,
      putFile,
      uploading: { identityUrl4Id: false, identityUrl5Id: false },
      identityUrl4Id: "/img/idcard-h.png",
      identityUrl5Id: "/img/idcard-e.png",
      rules: {
        masterName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        masterIdentity: [
          { required: true, message: "请输入法人身份证号", trigger: "blur" },
          { trigger: "blur", validator: validateIdNumber },
        ],
        identityUrl4Id: [
          {
            required: true,
            message: "请上传身份证（头像面）",
            trigger: "change",
          },
        ],
        identityUrl5Id: [
          {
            required: true,
            message: "请上传身份证（国徽面）",
            trigger: "change",
          },
        ],
      },
      form: lodash.clone(this.value || {}),
    };
  },
  methods: {
    next() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$emit("submit", this.form, () => {
            this.loading = false;
          });
        }
      });
    },
    /**上传图片**/
    handleAvatarSuccess(type) {
      return (res, file) => {
        this[type] = URL.createObjectURL(file.raw);
        this.$set(this.form, type, res.data.link);
        this.$set(this.uploading, type, false);
      };
    },
    beforeAvatarUpload(file) {
      const isJPG = accept.includes(file.type);
      const is2M=file.size/1024/1024<2;
      if (!isJPG) {
        this.$message.error("图片格式不正确!");
      }
      if(!is2M){
        this.$message.error("上传图片大小不能超过2M!");
      }
      return isJPG && is2M;
    },
    /**上传图片*/
    httpRequest,
  },
  watch: {
    value(val) {
      this.form = val;
    },
    form: {
      handler(val) {
        this.$emit("input", val);
      },
      deep: true,
    },
  },
  computed: {},
};
</script>
<style scoped>
.el-form-item__content{
  line-height: normal;
}
.uploadImgP{
  padding: 0;
  margin: 0;
  line-height: 18px;
}
.companyInfo-upload-image {
  height: 100px;
  width: 160px;
}
</style>