<style>
  .regist_Box {
    max-width: 420px;
    padding: 50px 40px;
    margin: 40px auto;
    background-color: #fff;
    border-radius: 5px;
    background-clip: padding-box;
    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
  }

  .registLogo {
    height: 45px;
    width: auto;
    margin: 0 auto 20px;
    display: block;
  }

  .regist_inner {
    margin: 0 -15px 0 -15px;
  }

  .registform-group {
    position: relative;
    margin-bottom: 15px;
  }

  .regist_Box .q-field__control {
    height: 46px;
  }

  .regisTiptext {
    font-size: 16px;
    margin-bottom: 15px;
    color: #999;
    text-align: center;
  }

  .regisTiptext a {
    color: #00afff;
    cursor: pointer;
  }

  .regist_Box .q-field__control {
    min-height: 46px !important;
  }

  .regist_Box .q-field__native {
    min-height: 46px;
  }

  .regist_Box .q-field__marginal {
    height: 46px;
  }

  .regisStar {
    color: red;
  }

</style>
<template>
  <q-page>
    <div class="account">
      <div class="regist_Box">
        <img :src="logo" class="q-mr-lg registLogo" @click="CommonJump('/index',{})" />
        <div class="regist_inner">
          <p class="regisTiptext">已經有帳號了？<a @click="CommonJump('/login',{})">立即登入</a></p>
        </div>
        <div class="registform-group">
          <div class="login_labelName"><span class="regisStar">*</span>姓名</div>
          <q-input outlined v-model="registerMsg.Name" class="bg-grey-1" />
        </div>
        <div class="registform-group">
          <div class="login_labelName"><span class="regisStar">*</span>電子郵件</div>
          <q-input outlined v-model="registerMsg.Account" class="bg-grey-1" />
        </div>
        <div class="registform-group">
          <div class="login_labelName"><span class="regisStar">*</span>設定密碼</div>
          <q-input outlined v-model="registerMsg.Password" type="password" class="bg-grey-1" />
        </div>
        <div class="registform-group">
          <div class="login_labelName"><span class="regisStar">*</span>再輸入一次密碼</div>
          <q-input outlined v-model="registerMsg.SurePwd" type="password" class="bg-grey-1" />
        </div>
        <div class="registform-group">
          <div class="login_labelName">性別</div>
          <q-select filled v-model="registerMsg.Sex" :options="sexArray" emit-value map-options>
          </q-select>
        </div>
        <div class="registform-group">
          <div class="login_labelName">生日</div>
          <q-input filled v-model="registerMsg.Birthday" mask="date">
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                  <q-date mask="YYYY-MM-DD" v-model="registerMsg.Birthday" @input="() => $refs.qDateProxy.hide()" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
        <div class="registform-group">
          <div class="login_labelName">聯絡電話</div>
          <q-input outlined v-model="registerMsg.Mobile" class="bg-grey-1" />
        </div>
        <div class="registform-group">
          <q-btn color="primary" style="width:100%;height:50px;margin-top:20px;" @click="doRegister" :label="mylabel" />
        </div>
      </div>
    </div>
  </q-page>
</template>
<script>
  export default {
    props: [],
    data() {
      return {
        registerMsg: {
          AccountId: 0, //账号编号
          Name: "", //姓名
          Account: "", //账号
          Sex: 1, //性别(1-男,2-女)
          Birthday: "", //生日
          Password: "", //密码
          SurePwd: "", //确认密码
          Mobile: "", //联系电话
        },
        logo: "", //Logo地址
        sexArray: [{
            value: 1,
            label: "男"
          },
          {
            value: 2,
            label: "女"
          },
        ],
        mylabel:'免費註冊'
      };
    },
    created() {

    },
    mounted() {
      //获取网站基础配置
      if (localStorage.baseifo) {
        var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
        this.logo = jObj.Config.Logo;
      }
      if (localStorage.b2bUser) {
        this.B2BUser = JSON.parse(window.localStorage.getItem('b2bUser'));
      }
    },
    methods: {
      doRegister() {
        if (this.registerMsg.Name == '') {
          this.$q.notify({
            type: 'negative',
            message: '请输入姓名',
            position: 'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if (this.registerMsg.Account == '') {
          this.$q.notify({
            type: 'negative',
            message: '请输入账号',
            position: 'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if (this.registerMsg.Password == '') {
          this.$q.notify({
            type: 'negative',
            message: '请输入密码',
            position: 'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if (this.registerMsg.SurePwd == '') {
          this.$q.notify({
            type: 'negative',
            message: '请输入确认密码',
            position: 'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if (this.registerMsg.SurePwd != this.registerMsg.Password) {
          this.$q.notify({
            type: 'negative',
            message: '两次输入密码不一致',
            position: 'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        this.mylabel='提交中...'
        this.apipost(
          "b2b_post_SetCustomerAccountService", this.registerMsg,
          res => {
            this.mylabel='免費註冊'
            if (res.data.resultCode == 1) {
              var jsonData = JSON.stringify(res.data.data);
              window.localStorage.setItem("b2bUser", jsonData);
              this.$q.notify({
                type: 'negative',
                message: res.data.message,
                position: 'top',
                color: 'secondary',
                timeout: 2000, // 以毫秒为单位; 0意味着没有超时
              })
              setTimeout(() => {
                this.CommonJump('/login', {})
              }, 2000)
            }else{
              this.$q.notify({
                type: 'negative',
                message: res.data.message,
                position: 'top',
                timeout: 2000, // 以毫秒为单位; 0意味着没有超时
              })
            }
          },
          err => {}
        );
      }
    },
  };

</script>
