<template>
  <div class="wrapper" :style="{'background-image':'url('+imgUrl.registered+')'}">
    <div class="box">
      <div class="boxx">
        <h3>立 即 注 冊</h3>
        <form enctype="multipart/form-data" onsubmit="return false">
          <!-- 请输入组织名称 pattern
              oninvalid="setCustomValidity('不能为空')"
              oninput="setCustomValidity('')"
          -->
          <label>
            <span class="one">
              <span class="iconfont icon-ren"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="text"
              placeholder="请输入组织名称"
              v-model="fieldsName.organization_name"
            />
            <span class="span1">注：组织名称将用于用户登录</span>
          </label>
          <!-- 请输入密码 -->
          <label>
            <span class="two">
              <span class="iconfont icon-suo"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input class="input" type="password" placeholder="请输入密码" v-model="fieldsName.password" />
          </label>
          <!-- 请再次输入密码 -->
          <label>
            <span class="two">
              <span class="iconfont icon-suo"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="password"
              placeholder="请再次输入密码"
              v-model="fieldsName.confirm_password"
            />
          </label>
          <!-- 请输入统一社会信用代码 -->
          <label>
            <span class="two">
              <img :src="imgUrl.yy" alt style="width:20px;height:20px;margin-top:0px;" />
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="password"
              placeholder="请输入统一社会信用代码"
              v-model="fieldsName.credit_code"
            />
          </label>
          <!-- 请输入法人代表 -->
          <label>
            <span class="two">
              <span class="iconfont icon-fuzeren"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="text"
              placeholder="请输入法人代表"
              v-model="fieldsName.legal_representative"
            />
          </label>
          <!-- 请输入单位属性 -->
          <label>
            <span class="two">
              <span class="iconfont icon-icon-test"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="text"
              placeholder="请输入单位属性"
              v-model="fieldsName.unit_attribute"
            />
          </label>
          <!-- 请输入业务主管单位名称 -->
          <label>
            <span class="two">
              <span class="iconfont icon-zhuzhuangtu"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="text"
              placeholder="请输入业务主管单位名称"
              v-model="fieldsName.entity_name"
            />
          </label>
          <!-- 请输入负责人姓名 -->
          <label>
            <span class="two">
              <span class="iconfont icon-renxiang-"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="text"
              placeholder="请输入负责人姓名"
              v-model="fieldsName.charge_name"
            />
          </label>
          <!-- 请输入负责人职务 -->
          <label>
            <span class="two">
              <span class="iconfont icon-lingdai"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="text"
              placeholder="请输入负责人职务"
              v-model="fieldsName.charge_position"
            />
          </label>
          <!-- 请输入负责人电话 -->
          <label>
            <span class="two">
              <span class="iconfont icon-dianhua"></span>
              <span class="iconfont icon-vertical_line"></span>
            </span>
            <input
              class="input"
              type="tel"
              placeholder="请输入负责人电话"
              v-model="fieldsName.charge_phone"
            />
          </label>
          <!-- 管理平台协 -->
          <label class="label">
            <input class="checkout" type="checkbox" v-model="fieldsName.agre" />
            <span class="span2">
              我已阅读并接受
              <span class="span3">《管理平台协议》</span>
            </span>
          </label>
          <label class="s" @click="registered()">
            <input type="submit" class="sub" value="立即注册" />
          </label>
        </form>
      </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: []
    }
  },
  computed: {},
  watch: {},
  methods: {

    registered () {
      let _this = this
      if (this.fieldsName.organization_name === undefined) {
        alert('组织名称不可为空')
      } else if (this.fieldsName.password === undefined) {
        alert('密码不可为空')
      } else if (this.fieldsName.confirm_password === undefined) {
        alert('请输入确认密码')
      } else {
        console.log(_this.fieldsName, 111)

        this.$http({
          method: 'post',
          url: 'v1/login/reg',
          data: {
            FieldsName: _this.fieldsName
          }
        })
          .then(res => {
            if (res.data.code === 200) {
              _this.$Message.success('注册成功！')
            } else {
              _this.$Message.error('注册失败！')
            }
          })
          // eslint-disable-next-line handle-callback-err
          .catch(err => {
            console.log(err, 555)
          })
      }
    }
  },
  created () { },
  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;
  background-size: 100% 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 736px;
    height: 1167px;
    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;
    .boxx {
      width: 474px;
      height: 980px;

      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>
