<template>
  <div class="form flex-colunm">
    <el-steps :active="active" finish-status="success" style="width: 4.8rem;">
      <el-step title="注册账户"></el-step>
      <el-step title="完善信息"></el-step>
      <el-step title="审核"></el-step>
    </el-steps>
    <!-- 注册 -->
    <div class="register" v-if="active==0">
      <div class="company">
        <h4>单位信息</h4>
        <el-form ref="form" :model="form" label-width="1.4rem" :rules="rules">
          <el-form-item label="单位名称" prop="companyName" class="item">
            <el-input v-model="form.companyName" placeholder="请输入单位名称" style="width:2.4rem" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="区域选择" prop="local" class="item">
            <citySelect @sendprovinceId="getprovinceId" @sendcityId="getcityId" @senddistrictId="getdistrictId"></citySelect>
          </el-form-item>
          <el-form-item label="注册角色" prop="type" class="item">
            <el-select v-model="form.type" placeholder="请输入选择">
              <el-option label="采购商" value="1"></el-option>
              <el-option label="供应商" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <h4>管理员信息</h4>
        <el-form ref="adminform" :model="adminform" label-width="1.4rem" :rules="rules">
          <el-form-item label="管理员姓名" prop="name" class="item">
            <el-input v-model="adminform.name" placeholder="请输入" style="width:2.4rem" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="idNumber" class="item">
            <el-input v-model="adminform.idNumber" placeholder="请输入" style="width:2.4rem" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="item">
            <el-input v-model="adminform.password" placeholder="8-16位数字字母组合" style="width:2.4rem" maxlength="30"></el-input>
            <!-- <div class="password-tips">密码需由8-16位数字字母组合</div> -->
          </el-form-item>
          <el-form-item label="确认密码" prop="isPassword" class="item">
            <el-input v-model="adminform.isPassword" placeholder="请输入" style="width:2.4rem" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email" class="item">
            <el-input v-model="adminform.email" placeholder="请输入" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phonenumber" class="item">
            <el-input v-model="adminform.phonenumber" placeholder="请输入" maxlength="30"></el-input>
          </el-form-item>
          <div class="getcode">
            <el-form-item label="验证码" prop="code" class="item">
              <el-input v-model="adminform.code" placeholder="请输入验证码" style="width:1.55rem" maxlength="30"></el-input>
            </el-form-item>
            <div class="code" @click="refreshCode">
              <!--   ：fresh：父组件向子组件传送刷新验证码的信号；
                @makedCode：子组件向父组件传送验证码的值-->
              <Identify :fresh="flag" @makedCode="getMakedCode"></Identify>
            </div>
          </div>
          <div class="getphonecode">
            <el-form-item label="短信验证码" prop="phonecode" class="item">
              <el-input v-model="adminform.phonecode" placeholder="请输入短信验证码" style="width:2.4rem" maxlength="30"></el-input>
            </el-form-item>
            <div class="phonecode" @click="getMessagecode">获取短信验证码</div>
          </div>
        </el-form>
      </div>
      <el-checkbox v-model="checked" class="t1">同意《注册协议》</el-checkbox>
    </div>
    <!-- 完善 -->
    <div class="perfect content" v-if="active==1">
      <div class="flex-between perfect-head">
        <div class="t2 flex">
          <div>单位名称：</div>
          <div>腾讯</div>
        </div>
        <div class="t2 flex">
          <div>注册角色：</div>
          <div>供应商</div>
        </div>
        <div class="t2 flex">
          <div>行政区域：</div>
          <div>浙江省 杭州市 滨江区</div>
        </div>

      </div>
      <el-form ref="perfectForm" :model="perfectForm" label-width="1.8rem" :rules="rules">
        <div class="flex-between">
          <el-form-item label="法人姓名" prop="legalPersonName" class="item">
            <el-input v-model="perfectForm.legalPersonName" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
          <el-form-item label="法人电话" prop="legalPersonPhone" class="item">
            <el-input v-model="perfectForm.legalPersonPhone" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="socialCode" class="item">
            <el-input v-model="perfectForm.socialCode" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
        </div>
        <div class="flex-between">
          <el-form-item label="单位性质" prop="companyNature" class="item">
            <el-select v-model="perfectForm.companyNature" placeholder="请选择">
              <el-option v-for="item in companyNatures" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位所在地" prop="location" class="item">
            <el-input v-model="perfectForm.location" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
          <el-form-item label="行业类型" prop="industryType" class="item">
            <el-select v-model="perfectForm.industryType" placeholder="请选择">
              <el-option v-for="item in belongTypes" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-between">
          <el-form-item label="开户银行名称" prop="bankName" class="item">
            <el-input v-model="perfectForm.bankName" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
          <el-form-item label="结算账号" prop="bankAccount" class="item">
            <el-input v-model="perfectForm.bankAccount" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
          <el-form-item label="结算账号名" prop="bankAccountName" class="item">
            <el-input v-model="perfectForm.bankAccountName" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
        </div>
        <div class="flex-between" style="width: 60%;">
          <el-form-item label="注册资本(万元)" prop="registeredCapital" class="item">
            <el-input v-model="perfectForm.registeredCapital" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
          <el-form-item label="联系地址" prop="contactAddress" class="item">
            <el-input v-model="perfectForm.contactAddress" placeholder="请输入" style="width:2.4rem"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="经营范围" prop="businessScope" class="item">
          <el-input type="textarea" :rows="2" v-model="perfectForm.businessScope" placeholder="请输入" style="width:2.4rem"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证正反面" prop="identity" class="item">
          <imgUpload :limit="1" @input="getJustimg" tip=""></imgUpload>
          <imgUpload :limit="1" @input="getBackimg" tip=""></imgUpload>
        </el-form-item>
        <el-form-item label="三证合一扫描件" prop="cardimg" class="item">
          <imgUpload :limit="3" :max="10" @input="getCardimg" tip="只可上传三张图片，大小不能超过10MB，此项为必填项"></imgUpload>
        </el-form-item>
        <el-form-item prop="file" class="item" margin-left="-1.8rem">
          <div class="else">
            <div>其他资料 <span class="red">用于上传其他证明性材料如法人变更证明，报名资料请勿在此上传，单个附件建议不超过2M。</span> </div>
          </div>
          <Upload :max="2" @input="getfile" tip="支持扩展名：.rar .zip .doc .docx .pdf .jpg..."></Upload>
        </el-form-item>
      </el-form>
    </div>
    <!-- 审核结果 -->
    <div class="result flex-center" v-if="active==2">
      <div v-show="result==0">
        <h4>您的注册申请已提交，请耐心等待平台管理员审核</h4>
        <h5>
          温馨提示 <br>
          1.审核后，您注册填写的手机号讲收到短信提醒 <br>
          2.您可以登录系统查看审核进度 <br>
          3.若超过一天未审核，请致电400-400-400咨询 <br>
        </h5>
      </div>
      <div v-show="result==1">
        <h4>您已通过平台审核！</h4>
      </div>
      <div v-show="result==2">
        <h4 style="color:red">对不起，您没有通过审核！</h4>
        <h5 style="color:#000000">拒绝原因：身份证信息作假</h5>
      </div>
    </div>
    <button @click="next" class="t2 nextButton" v-if="active==0||active==1">下一步</button>
    <button @click="back" class="t2 nextButton" v-if="active==2">回到首页</button>

  </div>
</template>

<script>
  import {
    industryList,
    getVerify,
    sendSms,
    verifyPhone,
    companyNatureList,
    checkAccount
  } from '~/api/common/list';
 import {
   register
 } from '~/api/bid/login'
  import Upload from '~/components/Upload/Upload';
  import imgUpload from '~/components/Upload/imgUpload';
  import Identify from '~/components/identify';
  import citySelect from '~/components/citySelect';
  export default {
    components: {
      Identify,
      citySelect,
      Upload,
      imgUpload
    },
    data() {

      // 测试省份
      let islocal = (rule, value, callback) => {
        console.log("1")
        if (!this.form.provinceId) {
          callback(new Error('请选择省份'));
        } else if (!this.form.cityId) {
          callback(new Error('请选择市'));
        } else if (!this.form.districtId) {
          callback(new Error('请选择区'));
        } else {
          callback();
        }
      }
      // 测试正反图片是否上传
      let checkidentity = (rule, value, callback) => {
        if (this.justimg.length === 0) {
          callback(new Error('请上传正面照片'));
        } else if (this.backimg.length === 0) {
          callback(new Error('请上传反面照片'));
        } else {
          callback();
        }
      };
      // 测试三证合一是否上传
      let checkcardimg = (rule, value, callback) => {
        if (this.cardimg.length === 0) {
          callback(new Error('请上传三证合一'));
        } else {
          callback();
        }
      };
      // 修改密码验证二次是否输入相同
      let validate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.adminform.isPassword !== '') {
            this.$refs.adminform.validateField('isPassword');
          }
          callback();
        }
      };
      let validate2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.adminform.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      let checkPhone = async (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            const {
                    code
                   } =  await checkAccount(value)
                   if (code === 200) {
                      callback();
                   }else{
                     return callback(new Error('手机号重复'));
             }
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };

      //验证码验证
      // let checkCode = (rule, value, callback) => {
      //   if (!value) {
      //     return callback(new Error('验证码不能为空'));
      //   } else {
      //     let code = this.code;
      //     if (value.toLowerCase() == code.toLowerCase()) {
      //       callback();
      //     } else {
      //       return callback(new Error('请输入正确的验证码'));
      //     }
      //   }
      // };
      return {
        companyNatures:[],
        files: [],
        justimg: [],
        backimg: [],
        cardimg: [],
        belongTypes: [],
        result: "0",
        fileList: [],
        flag: true, //该值变化，就会触发刷新
        code: '', //刷新后的验证码
        active: 0,
        checked: false,
        adminform: {
          name: "",
          idNumber: "",
          password: '',
          isPassword: '',
          email: '',
          phonenumber: '',
          code: '',
          phonecode: '',
        },
        form: {
          companyName: '',
          local: '',
          provinceId: "",
          cityId: "",
          districtId: "",
          type: '',
        },
        perfectForm: {
          legalPersonPhone: "",
          legalPersonName: "",
          location: "",
          bankAccount: "",
          bankAccountName: "",
          contactAddress: "",
          socialCode: "",
          companyNature: "",
          industryType: "",
          bankName: "",
          registeredCapital: "",
          businessScope: ""
        },
        rules: {
          companyName: [{
            required: true,
            message: '请输入单位名称',
            trigger: 'blur'
          }],
          local: [{
            required: true,
            validator: islocal,
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入管理者姓名',
            trigger: 'blur'
          }],
          idNumber: [{
              required: true,
              message: '请输入身份证',
              trigger: 'blur'
            },
            {
              pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: '请输入正确的身份证号'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              validator: validate,
              trigger: 'blur'
            },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
              message: '密码需由8-16位数字字母组合'
            }
          ],
          isPassword: [{
              required: true,
              message: '请再次输入密码',
              trigger: 'blur'
            },
            {
              validator: validate2,
              trigger: 'blur'
            },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
              message: '密码需由8-16位数字字母组合'
            }
          ],
          email: [{
              required: true,
              message: '请输入电子邮箱',
              trigger: 'blur'
            },
            {
              pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
              message: '请输入正确的邮箱地址'
            }
          ],
          phonenumber: [{
            required: true,
            validator: checkPhone,
            trigger: 'blur'
          },
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
          ],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }],
          phonecode: [{
            required: true,
            message: '请输入短信验证码',
            trigger: 'blur'
          }],
          legalPersonPhone: [{
            required: true,
            message: '请输入法人电话',
            trigger: 'blur'
          }],

          legalPersonName: [{
            required: true,
            message: '请输入法人姓名',
            trigger: 'blur'
          }],
          location: [{
            required: true,
            message: '请输入法人地址',
            trigger: 'blur'
          }],
          bankAccount: [{
            required: true,
            message: '请输入结算账户号',
            trigger: 'blur'
          }],
          bankAccountName: [{
            required: true,
            message: '请输入开户银行号',
            trigger: 'blur'
          }],
          contactAddress: [{
            required: true,
            message: '请输入联系地址',
            trigger: 'blur'
          }],

          socialCode: [{
            required: true,
            message: '请输入社会信用代码',
            trigger: 'blur'
          }],
          companyNature: [{
            required: true,
            message: '请输入行业类型',
            trigger: 'blur'
          }],
          industryType: [{
            required: true,
            message: '请选择行业类型',
            trigger: 'blur'
          }],
          bankName: [{
            required: true,
            message: '开户银行名称',
            trigger: 'blur'
          }],
          registeredCapital: [{
            required: true,
            message: '请输入注册资本',
            trigger: 'blur'
          }],
          businessScope: [{
            required: true,
            message: '请输入经验范围',
            trigger: 'blur'
          }],
          identity: [{
            required: true,
            validator: checkidentity,
            trigger: 'blur'
          }],
          cardimg: [{
            required: true,
            validator: checkcardimg,
            trigger: 'blur'
          }]
        },
      };
    },
    methods: {
      // 回到首页
      back(){
        this.$router.push("/")
      },
      // 获取单位性质
      async getCompanyNatureList() {
        const res = await companyNatureList()
        this.companyNatures = res
      },
      //获取所属行业
      async getIndustryList() {
        const res = await industryList()
        this.belongTypes = res
      },
      //  获取验证码图片
      // async getCordimg() {
      //   const res = await getVerify()
      //   console.log(res);
      // },

      getJustimg(val) {
        console.log(val)
        this.justimg = val
      },
      getBackimg(val) {
        console.log(val)
        this.backimg = val
      },
      getCardimg(val) {
          console.log(val)
        this.cardimg = val
      },
      getfile(val) {
          console.log(val)
        this.files = val
      },
      // 获取市ID
      getprovinceId(val) {
        this.form.provinceId = val
        this.form.cityId = "";
        this.form.districtId = "";

      },
      // 获取省ID
      getcityId(val) {
        this.form.cityId = val
        this.form.districtId = "";
      },
      // 获取城ID
      getdistrictId(val) {
        this.form.districtId = val
      },
      async next() {
        let active = this.active;
        // 注册阶段
        if (active == 0) {
          const valid = await this.$refs['form'].validate()
          const valid1 = await this.$refs['adminform'].validate()
          if (valid && valid1) {
            let checked=this.checked;
            if(!checked){
              this.$message.error("请勾选协议")
              return;
            }
            let message={}
            message.phone=this.adminform.phonenumber
            message.verify=this.adminform.phonecode
            const {
              msg,
              code
            } = await verifyPhone(message);
            if(code===200){
              this.active++
            }else{
               this.$message.error(msg)
            }
          }
          // 完善阶段
        } else if (active == 1) {
          const valid = await this.$refs['perfectForm'].validate()
          if (valid) {
            let justimg = this.justimg;
            let backimg = this.backimg;
            let cardimg = this.cardimg;
            let files = this.files;
            justimg.forEach(function(item, index) {
              item.type = 1
            });
            backimg.forEach(function(item, index) {
              item.type = 2
            });
            cardimg.forEach(function(item, index) {
              item.type = 3
            });
            files.forEach(function(item, index) {
              item.type = 4
            });
            let file = justimg.concat(backimg).concat(cardimg).concat(files);
            let form = this.form;
            let adminform = this.adminform;
            let perfectForm = this.perfectForm;
            Object.assign(perfectForm, form);
            perfectForm.sysUserPO = adminform
            perfectForm.fileList = file
            const {
              data,
              code,
              msg
            } = await register(perfectForm);
            if(code===200){
               this.$message.success(msg)
              this.active++
            }
          }
        }
      },
      refreshCode() {
        this.flag = !this.flag;
         console.log("刷新")
      },
      getMakedCode(code) {
        this.code = code;
      },
     async  getMessagecode(){
       if(!this.adminform.phonenumber){
          this.$message.error("请输入手机号")
          return
       }
        if(!this.adminform.code){
          this.$message.error("请填写验证码")
          return
        }
        if(this.code.toLowerCase()!==this.adminform.code.toLowerCase()){
           this.$message.error("请输入正常的验证码")
           return
        }
        let message={}
        message.phone=this.adminform.phonenumber;
        message.type = 1
        const {
          msg,
          code
        } = await sendSms(message)
        if (code === 200) {
          this.$message.success("发送成功")
          this.refreshCode();
        }
      }
    },
    mounted() {
      console.log(this.flag);
      this.flag = !this.flag;
      this.getIndustryList();
      this.getCompanyNatureList()
      // this.getCordimg();
    },
  }
</script>

<style scoped>
  .upload>div {
    color: rgba(102, 102, 102, 1);
    font-weight: 400;
  }

  .label-form {
    font-size: .16rem;
    margin-top: 0.3rem;
    margin-bottom: 0.1rem;
    font-weight: 400;
  }

  .company h4 {
    font-size: .22rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin-top: 0.62rem;
    margin-bottom: 0.5rem;
  }

  .el-input {
    width: 2.4rem;
    height: 0.4rem;
  }

  .nextButton {
    width: 3rem;
    height: .48rem;
    background: rgba(4, 134, 254, 1);
    border-radius: .04rem;
    line-height: .46rem;
    margin-top: .45rem;
    margin-bottom: .8rem;
    color: #fff
  }

  .item .el-form-item__label {
    font-size: .16rem;
    font-weight: bold;
  }

  .password-tips {
    margin-bottom: 0;
    color: rgba(144, 147, 153, 1);
    font-weight: 400;
    font-size: .12rem;
  }

  .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: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    background: rgba(247, 247, 247, 1);
  }

  .avatar {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
  }

  .getcode,
  .getphonecode {
    position: relative;
  }

  .getcode>.code {
    /*margin: 400px auto;*/
    width: .68rem;
    height: .32rem;
    /*border: 1px solid red;*/
    position: absolute;
    top: 0;
    left: 3.3rem;
  }

  .getphonecode>.phonecode {
    font-size: .14rem;
    font-weight: 400;
    color: rgba(51, 136, 255, 1);
    position: absolute;
    top: 0.13rem;
    left: 4rem;
  }

  .else .red {
    color: #FF6161;
    font-size: .14rem;
  }

  .perfect-head {
    width: 9rem;
    margin-top: 0.66rem;
    margin-bottom: .37rem;
  }

  .perfect-head>div>text {
    font-weight: bold;
  }

  .result {
    width: 100%;
    height: 3rem
  }

  .result h4 {
    font-size: .30rem;
    font-weight: 600;
    color: rgba(75, 193, 103, 1);
    margin-top: 1rem;
    margin-bottom: .2rem;
  }

  .result h5 {
    font-size: .18rem;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    line-height: .3rem;
    text-align: center;
  }
</style>
