<template>
  <div class="full-body">
    <div class="register-wrap">
      <div class="steps-wrap">
        <div style="height: 300px">
          <el-steps direction="vertical" :active="stepActive">
            <el-step title="注册账号" description="请注册登录账号"></el-step>
            <el-step
              title="完善基本信息"
              description="请注册登录账号"
            ></el-step>
            <el-step title="审核" description="等待管理员审核"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="form-wrap">
        <div class="form-title" v-show="stepActive != 3">
          <img
            class="middle-img"
            src="../../static/images/icon-zhuce.png"
            alt=""
          />
          {{ formTtitle }}
        </div>
        <el-form
          ref="form"
          :model="form"
          :inline="false"
          :inline-message="false"
          :rules="rules"
        >
          <div class="form-step" v-show="stepActive == '1'">
            <el-form-item label="法人性质" prop="legalNature">
              <el-select
                style="display: inline-block; width: 584px"
                v-model="form.legalNature"
                placeholder="请选择法人性质"
              >
                <el-option
                  v-for="item in legalNature"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业名称" prop="companyName">
              <div style="display: inline-block; width: 584px">
                <el-input
                  v-model="form.companyName"
                  placeholder="请输入企业名称"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="creditCode">
              <div style="display: inline-block; width: 528px">
                <el-input
                  v-model="form.creditCode"
                  placeholder="请输入统一社会信用代码"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="法人姓名" prop="legalUser">
              <div style="display: inline-block; width: 584px">
                <el-input
                  v-model="form.legalUser"
                  placeholder="请输入法定代表人姓名"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <div style="display: inline-block; width: 584px">
                <el-input
                  v-model="form.idCard"
                  placeholder="请输入法定代表人身份证号"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="身份证有效开始时间" prop="idcardStartDate">
              <div style="display: inline-block">
                <el-date-picker
                  v-model="form.idcardStartDate"
                  type="date"
                  placeholder="请选择身份证有效期开始时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="身份证有效结束时间" prop="idcardEndDate">
              <div style="display: inline-block">
                <el-date-picker
                  v-model="form.idcardEndDate"
                  type="date"
                  placeholder="请选择身份证有效期结束时间"
                >
                </el-date-picker>
                <div class="radios">
                  <el-radio v-model="form.idcardEffectiveTime" label="5"
                    >5年</el-radio
                  >
                  <el-radio v-model="form.idcardEffectiveTime" label="10"
                    >10年</el-radio
                  >
                  <el-radio v-model="form.idcardEffectiveTime" label="20"
                    >20年</el-radio
                  >
                  <el-radio v-model="form.idcardEffectiveTime" label=""
                    >长期有效</el-radio
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <div style="display: inline-block; width: 598px">
                <el-input
                  v-model="form.userName"
                  placeholder="请输入6-20位字母、数字、下划线组合的字符串，以字母开头"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
              <div style="display: inline-block; width: 598px">
                <el-input
                  v-model="form.phonenumber"
                  placeholder="请输入您的手机号"
                  maxlength="11"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="验证码" prop="registerCode">
              <div style="display: inline-block; width: 598px">
                <el-input
                  style="width: 400px; margin-right: 7px"
                  v-model="form.registerCode"
                  placeholder="请输入验证码"
                ></el-input>
                <el-button @click="countDown">{{ content }}</el-button>
              </div>
            </el-form-item>
            <el-form-item label="密  码" prop="password">
              <div style="display: inline-block; width: 608px">
                <el-input
                  v-model="form.password"
                  type="password"
                  placeholder="8-16位字符、大小写字母、数字、特殊字符，任意三种组合"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="确认密码" prop="secPassword">
              <div style="display: inline-block; width: 584px">
                <el-input
                  v-model="form.secPassword"
                  type="password"
                  placeholder="确认密码"
                ></el-input>
              </div>
            </el-form-item>
          </div>
          <!-- 第一步结束 -->
          <div class="form-step form-step2" v-show="stepActive == '2'">
            <el-row :gutter="20">
              <el-col :span="12"
                ><el-form-item label="">
                  <div class="inner-wrap">
                    <el-input
                      v-model="form.email"
                      placeholder="邮箱"
                    ></el-input>
                  </div> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="">
                  <div class="inner-wrap">
                    <el-select
                      style="display: inline-block"
                      v-model="form.trade"
                      placeholder="请选择法人性质"
                    >
                      <el-option
                        v-for="item in trade"
                        :key="item.index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div> </el-form-item
              ></el-col>

              <el-col :span="12"
                ><el-form-item label="">
                  <div class="inner-wrap">
                    <el-select
                      style="display: inline-block"
                      v-model="form.scope"
                      placeholder="规模"
                    >
                      <el-option
                        v-for="item in scope"
                        :key="item.index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="">
                  <div class="inner-wrap">
                    <el-input
                      v-model="form.nickName"
                      placeholder="企业简称"
                    ></el-input>
                  </div> </el-form-item
              ></el-col>
              <el-col :span="24"
                ><el-form-item label="">
                  <div class="inner-wrap">
                    <el-input
                      style="width: 90%"
                      v-model="form.companyAddress"
                      placeholder="	地址"
                    ></el-input>
                    <i class="el-icon-location"></i>
                  </div> </el-form-item
              ></el-col>
              <el-col :span="24"
                ><el-form-item label="">
                  <div class="inner-wrap">
                    <el-input
                      v-model="form.detatil"
                      type="textarea"
                      :rows="5"
                      placeholder="	简介"
                    ></el-input>
                  </div> </el-form-item
              ></el-col>
              <el-col :span="24"
                ><el-form-item label="">
                  <div class="inner-wrap">
                    <el-upload
                      class="uploader logo-uploader"
                      :action="upAction"
                      :show-file-list="false"
                      :on-success="logoUploadSuccess"
                      list-type="picture"
                    >
                      <img
                        v-if="logoTempImg"
                        :src="logoTempImg"
                        class="uploader-img"
                      />
                      <i v-else class="el-icon-plus uploader-icon"></i>
                      <div class="text">上传企业logo</div>
                    </el-upload>
                    <el-upload
                      class="uploader2"
                      :action="upAction"
                      :show-file-list="true"
                      multiple
                      :limit="2"
                      :file-list="licenseFileList"
                      list-type="picture"
                      :on-success="licenseUpSuccess"
                      :on-remove="licenseUpRemove"
                    >
                      <el-button type="primary">上传营业执照</el-button>
                    </el-upload>
                    <el-upload
                      class="uploader2"
                      :action="upAction"
                      :show-file-list="true"
                      multiple
                      :limit="2"
                      :file-list="companyfileList"
                      list-type="picture"
                      :on-success="companyfileUpSuccess"
                      :on-remove="companyfileRemove"
                    >
                      <el-button type="primary">上传公司照片</el-button>
                    </el-upload>
                  </div>
                </el-form-item></el-col
              >
            </el-row>
          </div>
          <div class="btns">
            <el-button v-if="stepActive == '1'" @click="goStep2" type="primary"
              >下一步</el-button
            >
            <el-button
              v-if="stepActive == '2'"
              @click="stepActive = 1"
              type="primary"
              >上一步</el-button
            >
            <el-button v-if="stepActive == '2'" @click="submit" type="primary"
              >提交注册</el-button
            >
          </div>
        </el-form>
        <div class="submit-result" v-if="stepActive == 3">
          <img class="img" src="../../static/images/icon-success.png" alt="" />
          <div class="result">提交成功</div>
          <div class="tip">所提交内容等待审核</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import { projectClassList } from '@/api/project/projectclass';
import {
  getLegalNature,
  getTrade,
  getScope,
  register,
  getSmsCode,
} from "@/utils/api.js";
export default {
  name: "",
  components: {},
  data() {
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      upAction:
        "https://wx.hw.hongweisoft.com/veterans/file/upload/single/minio",
      logoUrl: "",
      licenseFileList: [],
      companyfileList: [],
      stepActive: 1,
      formTtitle: "",
      legalNature: [],
      trade: [],
      scope: [],
      content: "获取验证码",
      totalTime: 60,
      canClick: true,
      form: {
        secPassword: "",
        companyName: "",
        legalNature: "",
        creditCode: "",
        legalUser: "",
        idCard: "",
        idcardStartDate: "",
        idcardEndDate: "",
        idcardEffectiveTime: "10",
        userName: "",
        phonenumber: "",
        password: "",
        email: "",
        trade: "",
        scope: "",
        nickName: "",
        companyAddress: "",
        linkUser: "",
        linkPhone: "",
        detatil: "",
        logoFileList: [],
        licenseFileList: [],
        companyfileList: [],
        fileList: [],
      },
      rules: {
        legalNature: [
          { required: true, message: "请选择法人性质", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        creditCode: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        legalUser: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        idCard: [
          {
            required: true,
            pattern:
              /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: "请输入法人身份证号码",
            trigger: "blur",
          },
        ],
        idcardStartDate: [
          {
            required: true,
            message: "请输入身份证有效期开始时间",
            trigger: "blur",
          },
        ],
        idcardEndDate: [
          {
            required: true,
            message: "请输入身份证有效期结束时间",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            pattern: /^[a-zA-Z][0-9a-zA-Z]{6,20}$/,
            message: "请输入规则的用户名",
            trigger: "blur",
          },
        ],
        phonenumber: [
          {
            required: true,
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: "请输入正确手机号",
            trigger: "blur",
          },
        ],
        registerCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            pattern:
              /((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z\W]{8,16}$))/,
            message:
              "请输入8-16位字符、大小写字母、数字、特殊字符，任意三种组合密码",
            trigger: "blur",
          },
        ],
        secPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    stepActive: {
      handler(newVal) {
        if (newVal == 1) {
          this.formTtitle = "注册";
        } else if (newVal == 2) {
          this.formTtitle = "完善基本信息";
        }
      },
      immediate: true,
    },
  },
  computed: {
    logoTempImg() {
      // console.log("this.form.logoFileList", this.form.logoFileList);
      if (this.form.logoFileList.length >= 1) {
        return this.form.logoFileList[0].filesUrl;
      } else {
        return false;
      }
    },
  },
  created() {
    this.handelGetLegalNature();
    this.handelGetTrade();
    this.handelGetScope();
  },
  methods: {
    goStep2() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.stepActive = 2;
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    logoUploadSuccess(res, file) {
      console.log("file", file);
      this.form.logoFileList.push({
        filesUrl: res.data.url,
        filesType: 1,
        filesOrder: "",
      });
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt5M = file.size / 1024 / 1024 < 5;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isJPG && isLt5M;
    },
    licenseUpSuccess(response, file, fileList) {
      let that = this;
      //   console.log("response", response);
      //   console.log("file", file);
      //   console.log("fileList", fileList);
      this.form.licenseFileList = [];
      for (let index = 0; index < fileList.length; index++) {
        const element = fileList[index].response.data;
        that.form.licenseFileList.push({
          filesUrl: element.url,
          filesType: 2,
          filesOrder: "",
        });
        // console.log("element", element);
      }
    },
    licenseUpRemove(file, fileList) {
      let that = this;
      //   console.log("file", file);
      //   console.log("fileList", fileList);
      this.form.licenseFileList = [];
      for (let index = 0; index < fileList.length; index++) {
        const element = fileList[index].response.data;
        that.form.licenseFileList.push({
          filesUrl: element.url,
          filesType: 2,
          filesOrder: "",
        });
        // console.log("element", element);
      }
    },
    companyfileUpSuccess(response, file, fileList) {
      let that = this;
      this.form.companyfileList = [];
      for (let index = 0; index < fileList.length; index++) {
        const element = fileList[index].response.data;
        that.form.companyfileList.push({
          filesUrl: element.url,
          filesType: 3,
          filesOrder: "",
        });
      }
    },
    companyfileRemove(file, fileList) {
      let that = this;
      this.form.companyfileList = [];
      for (let index = 0; index < fileList.length; index++) {
        const element = fileList[index].response.data;
        that.form.companyfileList.push({
          filesUrl: element.url,
          filesType: 3,
          filesOrder: "",
        });
      }
    },
    handelGetLegalNature() {
      let that = this;
      getLegalNature()
        .then((res) => {
          console.log("getLegalNature", res);
          if (res.code == 200) {
            res.data.map(function (currentValue) {
              that.legalNature.push({
                value: currentValue.dictValue,
                label: currentValue.dictLabel,
              });
            });
          }
        })
        .catch((err) => {
          console.log("getLegalNature err", err);
        });
    },
    handelGetTrade() {
      let that = this;
      getTrade()
        .then((res) => {
          console.log("getTrade", res);
          if (res.code == 200) {
            res.data.map(function (currentValue) {
              that.trade.push({
                value: currentValue.dictValue,
                label: currentValue.dictLabel,
              });
            });
          }
        })
        .catch((err) => {
          console.log("getTrade err", err);
        });
    },
    handelGetScope() {
      let that = this;
      getScope()
        .then((res) => {
          console.log("getScope", res);
          if (res.code == 200) {
            res.data.map(function (currentValue) {
              that.scope.push({
                value: currentValue.dictValue,
                label: currentValue.dictLabel,
              });
            });
          }
        })
        .catch((err) => {
          console.log("getScope err", err);
        });
    },
    handelGetSmsCode(data) {
      getSmsCode(data)
        .then((res) => {
          console.log("getSmsCode", res);
        })
        .catch((err) => {
          console.log("getSmsCode err", err);
        });
    },
    countDown() {
      //获取验证码
      if (!this.canClick) return;
      if (!this.form.phonenumber) {
        this.$message.error("请输入手机号");
        return false;
      }
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.form.phonenumber)) {
        this.$message.error("请输入正确的手机号");
        return false;
      }

      getSmsCode({ phonenumber: this.form.phonenumber })
        .then((res) => {
          if (res.code == 200) {
            this.canClick = false;
            this.content = this.totalTime + "s后重新发送";
            let timer = window.setInterval(() => {
              this.totalTime--;
              this.content = this.totalTime + "s后重新发送";
              if (this.totalTime < 0) {
                window.clearInterval(timer);
                this.content = "重新发送验证码";
                this.totalTime = 60;
                this.canClick = true; //这里重新开启
              }
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log("getSmsCode err", err);
        });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          register(this.form)
            .then((res) => {
              console.log("fetchList", res);
              if (res.code == 200) {
                this.stepActive = 3;
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
              // console.log("register err", err);
            });
        } else {
          this.$message.error("请填写必填项!");
          return false;
        }
      });
      console.log("this.form", this.form);
    },
  },
};
</script>

<style lang='scss' scoped>
//@import url()
.full-body {
  overflow: hidden;
  background: url(http://down.momen.vip/2021/11/04/4aa913fb8f6cb.jpg) no-repeat;
  background-size: cover;
}
.register-wrap {
  overflow: hidden;
  margin: 50px auto 0;
  padding-bottom: 30px;
  box-sizing: border-box;
  width: 1050px;
  //   height: 855px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
}
.steps-wrap {
  float: left;
  box-sizing: border-box;
  width: 300px;
  height: 100%;
  padding-left: 57px;
  padding-top: 175px;
  background: rgba(248, 248, 248, 0.91);
}
.form-wrap {
  padding-left: 48px;
  padding-right: 40px;
  overflow: hidden;
  .form-title {
    font-size: 26px;
    font-weight: 500;
    color: #474747;
    line-height: 37px;
    letter-spacing: 1px;
    border-bottom: 1px solid #c7c7c7;
    padding-bottom: 16px;
    padding-top: 27px;
    margin-bottom: 25px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-date-editor {
    .el-input__inner {
      width: 515px;
    }
  }
  .btns {
    text-align: center;
    margin-top: 45px;
    button {
      min-width: 195px;
    }
  }
  .form-step2 {
    .inner-wrap {
      .el-select {
        width: 100%;
      }
      .el-icon-location {
        font-size: 30px;
        vertical-align: middle;
        margin-left: 14px;
      }
    }
  }
  /deep/ .el-form-item__error {
    z-index: 99;
    background: #fff;
  }
}
.logo-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  //   float: left;
  & + .uploader {
    margin-left: 20px;
  }
  .text {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .uploader-img {
    width: 100px;
    height: 100px;
    display: block;
  }
}
.uploader2 {
  border: 1px dashed #ddd;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.submit-result {
  width: 370px;
  height: 373px;
  margin: 156px auto 206px;
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  text-align: center;
  padding-top: 56px;
  box-sizing: border-box;
  .img {
    width: 103px;
  }
  .result {
    font-size: 26px;
    font-weight: 500;
    color: #4d4d4d;
    line-height: 37px;
    letter-spacing: 1px;
    margin: 24px auto 63px;
  }
  .tip {
    font-size: 14px;
    color: #8b8b8b;
    line-height: 20px;
  }
}
</style>