<template>
  <div class="register">
    <!-- 首页导航 -->
    <Navs></Navs>
    <section class="register_cont">
      <!-- 全局搜索 -->
      <search></search>
      <div class="register_main">
        <div class="title">个人用户注册</div>
        <div>
          <div>用户名称</div>
          <input type="text" placeholder="请输入您的真实姓名" v-model="registerData.username" />
        </div>
        <div>
          <div>电话号码</div>
          <input type="text" placeholder="请输入手机号或座机号" v-model="registerData.userIphone" />
        </div>
        <div>
          <div>邮箱地址</div>
          <input type="text" placeholder="请输入邮箱" v-model="registerData.userMail" />
        </div>
        <div>
          <div>设置密码</div>
          <input type="password" placeholder="请输入密码" v-model="registerData.password" />
        </div>
        <div>
          <div>确认密码</div>
          <input type="password" placeholder="请重新输入密码" v-model="registerData.passwordQR" />
        </div>
        <div>
          <div>机构名称</div>
          <input type="text" placeholder="请输入机构名称" v-model="registerData.organizationName" />
        </div>
        <div>
          <div>机构地址</div>
          <textarea placeholder="请输入机构地址" v-model="registerData.organizationSite"></textarea>
        </div>
        <div>
          <div>所属部门</div>
          <input type="text" placeholder="请输入所属部门" v-model="registerData.department" />
        </div>
        <div class="affirm" @click="registerD">立即注册</div>
        <div class="affirmtext">
          点击“立即注册”，即表示您同意并愿意遵守
          <span @click="$router.push({path:'/userAgreement'})">用户协议</span>
        </div>
      </div>
    </section>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'register',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      registerData: {
        username: '',
        userIphone: '',
        userMail: '',
        password: '',
        passwordQR: '',
        organizationName: '',
        organizationSite: '',
        department: ''
      }
    }
  },
  methods: {
    // 立即注册
    registerD () {
      if (this.registerData.username === '') {
        // alert('用户名称不能为空！')
        this.$alert('用户名称不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.userIphone === '') {
        // alert('电话号码不能为空！')
        this.$alert('电话号码不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.userMail === '') {
        // alert('邮箱地址不能为空！')
        this.$alert('邮箱地址不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.password === '') {
        // alert('设置密码不能为空！')
        this.$alert('设置密码不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.passwordQR === '') {
        // alert('确认密码不能为空！')
        this.$alert('确认密码不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.organizationName === '') {
        // alert('机构名称不能为空！')
        this.$alert('机构名称不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.organizationSite === '') {
        // alert('机构地址不能为空！')
        this.$alert('机构地址不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.department === '') {
        // alert('所属部门不能为空！')
        this.$alert('所属部门不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (!(/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(this.registerData.userIphone))) { // 验证手机号
        // alert('您输入的手机号码有误！')
        this.$alert('您输入的手机号码有误！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(this.registerData.userMail))) { // 验证邮箱
        // alert('您输入的邮箱地址有误！')
        this.$alert('您输入的邮箱地址有误！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.registerData.password !== this.registerData.passwordQR) {
        // alert('您输入的设置密码与确认密码不一致！')
        this.$alert('您输入的设置密码与确认密码不一致！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.$axios({
          method: 'POST',
          url: 'member/index/register',
          data: {
            username: this.registerData.username,
            phone: this.registerData.userIphone,
            email: this.registerData.userMail,
            password_hash: this.registerData.password,
            password: this.registerData.passwordQR,
            company_name: this.registerData.organizationName,
            company_addr: this.registerData.organizationSite,
            company_dept: this.registerData.department
          }
        }).then(res => {
          console.log(res)
          // 请求接口完成注册   请求成功
          // alert(res.data.message)
          this.$alert(res.data.message, '温馨提示', {
            confirmButtonText: '确定'
          })
          if (res.data.code === 200) {
            this.$router.push({ path: '/' })
          }
        }).catch((fail) => {
          console.log(fail)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.register_cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .register_main {
    margin-bottom: 1.5rem;
    width: 84.25rem;
    background-color: #fff;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > .title {
      margin-top: 1.375rem;
      font-size: 1.75rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #000000;
    }
    & > div:nth-child(n + 2) {
      height: 5.625rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > div {
        margin-right: 2.75rem;
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #333333;
      }
      & > input {
        width: 23.375rem;
        height: 2.875rem;
        font-size: 1rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #999999;
      }
      & > textarea {
        width: 23.375rem;
        height: 5.5rem;
        font-size: 1rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #999999;
      }
    }
    & > .affirm {
      margin-top: 1.5rem;
      width: 31.875rem;
      height: 2.875rem !important;
      background-color: #34b1f1;
      border-radius: 3.5rem;
      // border: 1px solid red;
      font-size: 1.375rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      justify-content: center !important;
      align-items: center;
    }
    & > .affirm:hover {
      cursor: pointer;
    }
    & > .affirmtext {
      font-size: 1rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #000000;
      & > span {
        color: #005ba5;
      }
      & > span:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
