<template>
  <div class="home">
    <div class="container">
      <div class="logo">
        <img src="../assets/nxwjlogo.webp" />
        <h2>武警宁夏总队医院</h2>
      </div>
      <van-form @submit="onSubmit" class="formData">
        <van-field
          v-model="formData.user"
          name="user"
          placeholder="请输入账号"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入账号' },{pattern:userPatten,message: '账号由字母、数字、中文组成'}]"
        />
        <van-field
          v-model="formData.phone"
          name="phone"
          type="number"
          placeholder="请输入手机号"
          maxlength="11"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入手机号' },{pattern:phonePatten,message: '手机格式有误'}]"
        />
        <van-field
          v-model="formData.name"
          name="name"
          placeholder="请输入姓名"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入姓名' },{pattern:namePatten,message: '姓名只能输入汉字或英文'}]"
        />
        <van-field
          v-model="formData.idNo"
          name="idNo"
          placeholder="请输入身份证号"
          maxlength="18"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入身份证号' },{pattern:cardPatten,message: '身份证号有误'}]"
        />
        <van-field
          :value="formData.address"
          name="address"
          placeholder="请选择地址"
          @click="flag = true"
          readonly
          autocomplete="off"
          right-icon="arrow"
          :rules="[{ required: true, message: '请选择地址' }]"
        />
        <van-popup v-model="flag" round position="bottom">
          <van-area
            title="选择地址"
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="flag = false"
          />
        </van-popup>
        <van-field
          v-model="formData.password"
          type="password"
          name="password"
          placeholder="请输入密码"
          autocomplete="off"
          :rules="[{ required: true, message: '请设置密码' },{pattern:passwordPatten,message: '密码由字母、数字组成，区分大小写，长度为6-20位'}]"
        />
        <van-field
          v-model="formData.compassword"
          type="password"
          name="password"
          placeholder="请确认密码"
          autocomplete="off"
          :rules="[{ required: true, message: '请确认密码' },{validator:checkPwdPatten,message: '两次密码不一致'}]"
        />
        <div class="btn">
          <van-button round block type="info" native-type="submit" color="#46C3B0">注册</van-button>
          <h3>
            <router-link to="Login">账号密码登陆</router-link>
          </h3>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { apiRegister } from "@/request/api.js";
import { Toast, Area, Popup } from "vant";
import { areaList } from "@vant/area-data";
export default {
  data() {
    let _this = this;
    return {
      address: [],
      areaList,
      flag: false,
      addressData: {
        p_code: "",
        c_code: "",
        a_code: "",
        p_name: "",
        c_name: "",
        a_name: "",
      },
      formData: {
        user: "",
        password: "",
        compassword: "",
        phone: "",
        address: "",
        idNo: "",
        name: ""
      },
      userPatten: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
      phonePatten: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      passwordPatten: /^(?![a-zA-z]+$)(?!\d+$)(?![!@.#$%^&*]+$)[a-zA-Z\d!@.#$%^&*]{6,20}$/,
      namePatten: /^[\u0391-\uFFE5A-Za-z]+$/,
      cardPatten: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      title: ""
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
  },
  methods: {
    onSubmit() {
      let _this = this;
      // if (_this.formData.compassword !== _this.formData.password) {
      //   Toast("两次密码输入不一致，请重新确认");
      //   return;
      // }
      apiRegister(_this.formData).then(res => {
        Toast("注册成功");
        setTimeout(() => {
          _this.$router.push({ path: "/Login" });
        }, 1000);
      });
    },
    checkPwdPatten(val){
      // console.log(val==this.formData.password)
      return val==this.formData.password
    },
    onConfirm(val) {
      console.log(val);
      this.address = val;
      this.formData.address = val[0].name + val[1].name + val[2].name;
      this.flag = false;
    }
  }
};
</script>

<style>
.formData .van-cell__value .van-field__body {
  background-color: #e6e6e6;
  border-radius: 80px;
  line-height: 80px;
  padding: 0px 30px;
  box-sizing: border-box;
  color: #666;
}
.formData .van-cell::after {
  border: 0;
}
</style>
<style scoped lang="scss">
.logo {
  padding-top: 70px;
  text-align: center;
  color: #333;
  padding-bottom: 50px;
  img {
    width: 170px;
    height: 170px;
  }
  h2 {
    font-size: 36px;
    padding-top: 10px;
  }
}
.list {
  padding: 0px 20px;
  ul li {
    margin-bottom: 30px;
    position: relative;
    input {
      width: 100%;
      border: 0px;
      background: #e6e6e6;
      line-height: 80px;
      font-size: 28px;
      border-radius: 50px;
      box-sizing: border-box;
      padding: 0px 30px;
    }
    b {
      font-size: 28px;
      color: #46c3b0;
      position: absolute;
      right: 25px;
      top: 20px;
    }
  }
}

.btn {
  padding: 0px 20px;
  padding-top: 60px;
  h3 {
    display: flex;
    justify-content: center;
    padding: 20px 100px;
    font-size: 28px;
  }
}
::v-deep .van-button__text {
  font-size: 32px;
}
</style>
