<template>
  <Form class="register-form" ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="member_type" :label="$t('developer_type')+':'" v-if="member_type_options.length">
        <Select class="input underline" v-model="form.member_type">
          <Option v-for="item in member_type_options" :value="item.level" :key="item.name">{{ item.name }}</Option>
        </Select>
    </FormItem>
    <FormItem prop="username" :label="$t('developer_account')+':'">
        <Input class="underline" v-model="form.username" :placeholder="$t('developer_account_tips')"/>
    </FormItem>
    <FormItem prop="password" :label="$t('developer_pwd')+':'">
        <Input class="underline" type="password" v-model="form.password" :placeholder="$t('developer_pwd_tips')"/>
    </FormItem>
    <FormItem prop="re_password" :label="$t('pwd_confirm')+':'">
        <Input class="underline" type="password" v-model="form.re_password" :placeholder="$t('pwd_confirm_placeholder')"/>
    </FormItem>
    <FormItem prop="nickname" :label="$t('name')+':'">
        <Input class="underline" v-model="form.nickname" :placeholder="$t('name_tips')"/>
    </FormItem>
    <FormItem prop="mobile" :label="$t('tel')+':'">
        <Input class="underline" v-model="form.mobile" :placeholder="$t('tel_tips')"/>
    </FormItem>
    <FormItem prop="email" :label="$t('email')+':'">
        <Input class="underline" v-model="form.email" :placeholder="$t('email_tips')"/>
    </FormItem>
    <FormItem v-if="registercaptcha" prop="captcha" :label="$t('captcha')+':'">
      <div style="display: flex;">
        <Input class="underline" clearable style="margin-right:5px;width:100%;" v-model="form.captcha" :placeholder="$t('input_captcha_case_sensitive')"/>
        <img style="width:120px;object-fit:scale-down" :src="codeImg" @click="changeSrc" alt="">
      </div>
    </FormItem>
    <FormItem>
      <div class="flexbox">
        <router-link class="register-link" :to="{path:'/login'}">{{$t('register_tips')}}&gt;&gt;</router-link>
        <Button class="register-btn" size="large" @click="handleSubmit" type="primary" long>{{$t('register')}}</Button>
      </div>
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'LoginForm',
  data () {
    return {
      codeImg: '/api/platform.php?service=Platform.Captcha.Create',
      form: {
        member_type: '',
        username: '',
        password: '',
        re_password: '',
        mobile: '',
        email: '',
        nickname: '',
        captcha: ''
      },
      rules: {
        member_type: [
          { required: true, message: this.$t('select_member_type'), trigger: 'blur', type: 'number' }
        ],
        username: [
          { required: true, message: this.$t('account_empty'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('developer_pwd_tips'), trigger: 'blur' },
          { pattern: /^\S+$/, message: this.$t('new_pwd_format_error'), trigger: 'blur' },
          // { pattern: /(?=.*[0-9])(?=.*[a-zA-Z])/, message: '密码必须包含字母和数字', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{6,12}$/, message: this.$t('pwd_length_error'), trigger: 'blur' }
        // todo
        ],
        re_password: [
          { required: true, message: this.$t('pwd_confirm_placeholder'), trigger: 'blur' }
        // { pattern: this.re_password == this.password, message: '两次输入密码不相同', trigger: 'blur' }
        ],
        // mobileRules: [
        //   { required: true, message: this.$t('tel_tips'), trigger: 'blur' },
        //   {
        //     pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
        //     message: this.$t('tel_input_error'),
        //     trigger: ['blur']
        //   }
        // ],
        // emailRules: [
        //   { required: true, message: this.$t('email_tips'), trigger: 'blur' },
        //   {
        //     type: 'email',
        //     message: this.$t('email_input_error'),
        //     trigger: ['blur']
        //   }
        // ],
        captcha: [
          { required: true, message: this.$t('input_captcha_case_sensitive'), trigger: 'blur' }
        ]
      }

    }
  },
  props: {
    member_type_options: {
      type: Array
    },
    registercaptcha: {
      type: Boolean
    }
  },
  // computed: {
  //   rules () {
  //     return {
  //       member_type: this.member_typeRules,
  //       username: this.usernameRules,
  //       password: this.passwordRules,
  //       re_password: this.re_passwordRules,
  //       captcha: this.form.captcha
  //       // mobile: this.mobileRules,
  //       // email: this.emailRules
  //     }
  //   }
  // },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        let params = {}
        Object.assign(params, this.form)
        delete params.re_password
        if (valid) {
          this.$emit('on-success-valid', params)
        }
      })
    },
    changeSrc () {
      let timestamp = Date.parse(new Date())
      this.codeImg = '/api/platform.php?service=Platform.Captcha.Create&t=' + timestamp
    }
  }
}
</script>

<style lang="less" scope>
.register-form {
  .flexbox {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;

   &-l {
     width: 80px;
   }
   &-r {
     width: 350px;
   }

  .register-btn {
     width: 100%;
     height: 50px;
   }
   .register-link {
     line-height: 60px;
     color: #666!important;
   }
 }
 .ivu-form-item-label {
   width: 100px !important;
   padding-right: 23px;
 }
}

</style>
