<template>
  <div class="wrapper">
    <img :src="imgUrl.registered" id="img" />
    <div class="box">
      <div class="boxx">
        <h3>立 即 注 冊</h3>
        <form enctype="multipart/form-data" action method onsubmit="return false">
          <!-- 请输入组织名称 pattern
              oninvalid="setCustomValidity('不能为空')"
              oninput="setCustomValidity('')"
          -->
          <template v-for="(reg,index) in reg.data">
            <label :key="index">
              <span :class="index === 0 ? 'one' : 'two'">
                <span class="iconfont" :class="reg.icon"></span>
                <span class="iconfont icon-vertical_line"></span>
              </span>
              <input
                class="input"
                :type="reg.data_type"
                :placeholder="'请输入'+ reg.notes"
                :name="reg.name"
                v-model="obj[reg.name]"
                required
              />
              <span v-if="index === 0" class="span1">注：组织名称将用于用户登录</span>
            </label>
          </template>
          <label class="s" @click="submit()">
            <input type="submit" class="sub" value="立即注册" />
          </label>
        </form>
        <div id="home" @click="$jump('homePage')">
          <span>返回首页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      imgUrl: {
        registered: require('../../static/img/registered.png'),
        yy: require('../../static/img/yy.png')
      },
      fieldsName: [],
      reg: [],
      arr: [],
      obj: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    submit () {
      for (var key of Object.keys(this.obj)) {
        if (this.obj[key] === '') {
          alert('以上内容不可为空！')
          return
        }
      }
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/login/reg',
        data: {
          object: _this.obj
        }
      }).then(res => {
        if (res.data.code === 200) {
          // alert(res.data.data.msg)
          if (res.data.data.code !== 200) {
            alert(res.data.data.msg)
            return false
          }
          _this.$router.push({
            name: 'login'
          })
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    },
    getData () {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/login/reg-fields',
        params: {}
      }).then(res => {
        if (res.data.code === 200) {
          _this.reg = res.data
          _this.reg.data.forEach(item => {
            _this.obj[item.name] = ''
          })
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {
    this.getData()
  },
  mounted () { }
}
</script>

<style lang='scss' scoped>
/** 无效 */
input:required:invalid {
  border-color: #ccc !important;
}
/** 有效 */
input:required:valid {
  border-color: green !important;
}
.wrapper {
  min-width: 1280px;
  height: 1398px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  #home {
    width: 100%;
    color: red;
    font-size: 12px;
    margin: 20px auto 0;
    text-align: center;
    cursor: pointer;
  }

  #img {
    width: 100vw;
    height: auto;
    position: absolute;
    left: 0%;
    top: 0%;
    z-index: -1;
  }

  .box {
    width: 736px;
    background-color: rgba($color: #fff, $alpha: 0.5);
    box-shadow: 0px 3px 29px 0px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0px;
    box-sizing: border-box;
    .boxx {
      width: 474px;

      h3 {
        font-family: 'HanWangKaiBold-Gb5';
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 24px;
        letter-spacing: 0px;
        color: #333333;
        text-align: center;
        margin-bottom: 33px;
      }

      form {
        .s {
          width: 100%;
          text-align: center;
          .sub {
            margin: 0 auto;
            width: 218px;
            height: 56px;
            background-color: #e60012;
            box-shadow: 3px 5px 9px 0px rgba(252, 142, 142, 0.47);
            border-radius: 28px;
            font-family: 'MicrosoftYaHei';
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 56px;
            text-align: center;
            letter-spacing: 0px;
            color: #ffffff;
            outline: none;
          }
        }

        .label {
          display: flex;
          align-items: center;
          height: 15px;

          .checkout {
            width: 14px;
            height: 14px;
            background-image: linear-gradient(0deg, #e5e2e2 0%, #ffffff 100%);
            border-radius: 3px;
            border: solid 1px #bfbfbf;
            margin-right: 16px;
          }

          .span2 {
            font-family: 'MicrosoftYaHei';
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 62px;
            letter-spacing: 0px;
            color: #333333;
          }

          .span3 {
            font-family: 'MicrosoftYaHei';
            font-size: 14px;
            font-weight: normal;
            letter-spacing: 0px;
            color: #e60012;
          }
        }
        label {
          position: relative;
          margin-bottom: 25px;
          display: inline-block;

          .two {
            position: absolute;
            left: 4%;
            top: 33%;
            display: flex;

            .iconfont {
              font-size: 20px;
              font-weight: 900;
              color: #000;
            }
          }

          .one {
            position: absolute;
            left: 4%;
            top: 24%;
            display: flex;

            .iconfont {
              font-size: 20px;
              font-weight: 900;
              color: #000;
            }
          }
          .input {
            width: 474px;
            height: 56px;
            border-radius: 28px;
            border: solid 1px #a5acbb;
            opacity: 0.8;
            outline: none;
            padding: 0 60px;
            box-sizing: border-box;

            font-family: 'MicrosoftYaHei';
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 88px;
            letter-spacing: 0px;
            color: #666666;
          }

          .span1 {
            display: inline-block;
            margin-top: 8px;
            margin-left: 25px;
            font-family: 'MicrosoftYaHei';
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
