
<style scoped>
.user-panel {
  margin: 10px auto;
}
.panel0{
  width:50%;
  margin-bottom: 50px;
  margin-top: 50px;
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}
.panel1{
  width:30%;
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
<template>
    <div class="user-panel" v-loading="loading">

    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#">企业HR</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/enterpriseCertificationApprove"
          >企业信息维护</a
        >
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div class="panel0">
      <el-steps :active="active" align-center>
        <el-step title="步骤1" description="企业基础信息"></el-step>
        <el-step title="步骤2" description="填写企业认证信息"></el-step>
        <el-step title="步骤3" description="企业资料审核"></el-step>
        <el-step title="步骤4" description="企业认证完成"></el-step>
      </el-steps>
    </div>
    <div class="panel1">

      <div class="formPanel1" v-show="vshow1">
      <el-form
        ref="form"
        :model="formModel"
        :rules="ruleValidate"
        :label-width="'100px'"
      >
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="formModel.companyName"
              placeholder="请输入企业名称"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司LOGO" prop="logo">
            <el-upload
              class="avatar-uploader"
              name="photoFile"
              :action="uploadUrl"
              :show-file-list="false"
              :headers="headers"
              :data="uploadData"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="fileUrl" :src="fileUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="企业规模" prop="scale">
            <el-input
              v-model="formModel.scale"
              placeholder="请输入企业规模"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属行业" prop="industry">
            <el-input
              v-model="formModel.industry"
              placeholder="请输入所属行业"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司地址" prop="address">
            <el-input
              v-model="formModel.address"
              placeholder="请输入公司地址"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item >
            <el-input
              type="textarea"
              :rows="5"
              v-model="formModel.address2"
              placeholder="请输入详细地址"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业电话" prop="tel">
            <el-input
              v-model="formModel.tel"
              placeholder="请输入企业电话"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog" disabled="disabled">上一步</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitting"
              >下一步</el-button
            >
          </span>
        </div>
        <div class="formPanel2" v-show="vshow2">
        <el-form
          ref="form2"
          :model="formModel2"
          :rules="ruleValidate2"
          :label-width="'100px'"
        >
          <el-form-item label="企业名称" prop="companyName" >
            <el-input readonly="readonly"
              v-model="formModel.companyName"
              placeholder="请输入企业名称"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="信用代码" prop="creditCode">
            <el-input
              v-model="formModel2.creditCode"
              placeholder="请输入企业名称"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人代表" prop="legalPerson">
            <el-input
              v-model="formModel2.legalPerson"
              placeholder="请输入企业名称"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照" prop="businessLicenseUrl">
            <el-upload
              class="avatar-uploader"
              name="photoFile"
              :action="uploadUrl"
              :show-file-list="false"
              :headers="headers"
              :data="uploadDataLicenseUrl"
              :on-success="handleAvatarSuccess1"
            >
              <img v-if="businessLicenseUrl" :src="businessLicenseUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">上一步</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitting"
              >提交</el-button
            >
          </span>
        </div>
        <div class="formPanel3" v-show="vshow3">
          <van-empty  description="企业资料审核中..."></van-empty>
        </div>
        <div class="formPanel4" v-show="vshow4">

        </div>
     
      </div>
    </div>

</template>
<script>
import Constant from "@/constant";
import enterpriseCertificationApproveApi from "@/api/base/enterpriseCertificationApprove";
import { getToken } from "@/utils/auth"; // get token from cookie

export default {
  props: ["businessKey", "title"],
  data() {
    return {
      formModel: {},
      formModel2: {},
      ruleValidate: {
        companyName: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
        scale: [{ required: true, message: "企业规模不能为空", trigger: "blur" }],
        industry: [{ required: true, message: "所属行业不能为空", trigger: "blur" }],
        address: [{ required: true, message: "公司地址不能为空", trigger: "blur" }],
        logo: [{ required: true, message: "公司LOGO不能为空", trigger: "blur" }],
        tel: [{ required: true, message: "企业电话不能为空", trigger: "blur" }],
      },
      ruleValidate2: {
        creditCode: [
          { required: true, message: "信用代码不能为空", trigger: "blur" },
        ],
        legalPerson: [
          { required: true, message: "法人代表不能为空", trigger: "blur" },
        ],
        businessLicenseUrl: [{ required: true, message: "营业执照不能为空", trigger: "blur" }],
      },
      showDialog: true,
      loading: false,
      submitting: false,
      active:0,
      vshow1:true,
      vshow2:false,
      vshow3:false,
      vshow4:false,
      fileList:[],
            //上传地址
      uploadUrl: Constant.serverUrl + "/uploadPicture",
      headers: {
        Authorization: getToken()
      },
      uploadData: {
        subFolder: "companyLogo"
      },
      uploadDataLicenseUrl: {
        subFolder: "businessLicenseUrl"
      },
      fileUrl: "",
      businessLicenseUrl:"",
    };
  },
  methods: {
    closeDialog() {
        this.active = 0;
        this.vshow1 = true;
        this.vshow2 = false;
    },
    handleSubmit() {
      var self = this;

      if(self.active==0){
        
        this.$refs["form"].validate((valid) => {
          if (valid) {
            self.active=1;
            self.vshow2 = true;
            self.vshow1 = false;
          }
        });

      }
      else if(self.active==1){
        this.$refs["form2"].validate((valid) => {
          if (valid) {
            (function () {
              var id = self.formModel.id;

              self.formModel.creditCode = self.formModel2.creditCode;
              self.formModel.legalPerson = self.formModel2.legalPerson
              self.formModel.businessLicenseUrl = self.formModel2.businessLicenseUrl

              if (id == null || id.length == 0) {
                return enterpriseCertificationApproveApi.add(self.formModel);
              } else {
                return enterpriseCertificationApproveApi.update(self.formModel);
              }
            })().then(function (response) {
              var jsonData = response.data;

              if (jsonData.result) {
                self.active=2;
                self.vshow2 = false;
                self.vshow3 = true;

              } else {
                self.$message({
                  message: jsonData.message + "",
                  type: "warning",
                });
              }
            });


          }
        });
      }
      else if(self.active==2){
        self.active=3;
      }
    },
    handleAvatarSuccess(res, file) {
      var self = this;
      self.formModel.logo = res.data;
      self.fileUrl =
        res.data + "?x-oss-process=image/resize,m_lfit,h_400,w_400";
    },
    handleAvatarSuccess1(res, file) {
      var self = this;
      self.formModel2.businessLicenseUrl = res.data;
      self.businessLicenseUrl =
        res.data + "?x-oss-process=image/resize,m_lfit,h_400,w_400";
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    }
    
  },
  mounted: function () {
    var self = this;

    (function () {
      
        return enterpriseCertificationApproveApi.create();

    })()
      .then((response) => {
        var jsonData = response.data;
        self.loading = false;

        if (jsonData.result) {
          self.formModel = jsonData.data;
        } else {
          self.$message.error(jsonData.message + "");
        }
      })
      .catch((error) => {
        self.$message.error(error + "");
      });
  },
};
</script>