/** * 注册页面 */
<template>
  <view class="register">
    <view class="main">
      <block>
        <image class="back-img" src="../../static/back.png"></image>
        <view class="back-title">环市东院区安防小程序</view>
      </block>
      <view class="content">
        <u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
          <u-form-item
            label="员工证件编号"
            prop="account"
            labelWidth="110"
            class="form-item"
          >
            <u--input
              v-model="form.account"
              border="none"
              placeholder="请输入员工证件编号"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="员工姓名"
            prop="name"
            labelWidth="110"
            class="form-item"
          >
            <u--input
              v-model="form.name"
              border="none"
              placeholder="请输入员工姓名"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="证件类型"
            class="form-item form-item-border"
            labelWidth="110"
          >
            <u-button @click="typeLx">{{form.documentTypeName || "请选择证件类型"}}</u-button>
          </u-form-item>
          <u-form-item
            label="手机号码"
            prop="phone"
            borderBottom
            labelWidth="110"
            class="form-item"
          >
            <u-button
              v-model="form.phone"
              open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber"
              border="none"
            >
              {{ form.phone || "获取手机号" }}
            </u-button>
          </u-form-item>
        </u--form>
        <u-button type="error" text="注 册" @click="registerGo"></u-button>
				
				<!-- 证件类型选择框 -->
        <u-action-sheet
          :show="show"
          :actions="certificateList"
          title="请选择证件类型"
          description="只能单选"
          @close="show = false"
          @select="confirmSelect"
        >
        </u-action-sheet>
				
				<!-- 拒绝注册弹出框 -->
        <u-popup
          :show="jujueShow"
          mode="bottom"
          :round="10"
          :closeOnClickOverlay="false"
          @close="close"
          @open="open">
          <view class="popup">
						<view class="title">提示</view>
            <view class="content"> 拒绝将无法进行注册! </view>
            <view class="footer">
              <button class="allow refuse" @click="rejectAll"> 仍要拒绝 </button>
              <button 
								class="allow" 
								@click="permit" 
								open-type="getPhoneNumber" 
								@getphonenumber="getPhoneNumber"> 
								允许授权 
							</button>
            </view>
          </view>
        </u-popup>
				
				<!-- 注册成功弹出框 -->
        <u-popup
          :show="successShow"
          mode="bottom"
          :round="10"
          :closeOnClickOverlay="false"
          @close="close"
          @open="open">
          <view class="popup">
						<view class="title">提示</view>
            <view class="content"> 注册成功! </view>
          </view>
        </u-popup>
				
				<!-- 注册失败弹出框 -->
        <u-popup
          :show="errorShow"
          mode="bottom"
          :round="10"
          :closeOnClickOverlay="false"
          @close="close"
          @open="open">
          <view class="popup">
						<view class="title">提示</view>
            <view class="content">
              注册失败！请重新填写信息或联系管理人员
            </view>
            <view class="footer">
              <button class="allow refuse" @click="errorFh">返回</button>
              <button class="allow" @click="errorQr">确认</button>
            </view>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserRegister } from "@/api/user.js";
import { getLogin, getUserProfile } from '@/utils/auth.js';
import { getUserPhoneNumber, verifyPhone } from '@/api/index.js';
export default {
  data() {
    return {
      rules: {
        name: [
          {
            required: true,
            message: "请填写姓名",
            trigger: ["blur", "change"],
          },
        ],
        account: [
          {
            required: true,
            message: "请填写员工号",
            trigger: ["blur", "change"],
          },
        ],
      },
      form: {
        account: "", //证件编号
        name: "", //姓名
        phone: "", //电话
				documentType: '', //证件类型
				documentTypeName: '', //证件类型名称
      },
			//证件类型筛选列表
      certificateList: [
				{
					id: '1',
					name: '工作证'
				},
				{
					id: '0',
					name: '出入证'
				},
			],
      show: false, //控制证件类型筛选显隐
      jujueShow: false, //控制拒绝注册弹出框显隐
      successShow: false, //控制成功注册弹出框显隐
      errorShow: false, 
      code: "",
    };
  },
  methods: {
    //注册失败确认
    errorQr() {
      this.errorShow = false;
    },
    //注册失败返回
    errorFh() {
      this.errorShow = false;
    },
    //点击注册
    async registerGo() {
      if (this.form.account.trim() == "" ||this.form.name.trim() == "" ||this.form.documentTypeName.trim() == "" ||this.form.phone.trim() == "") {
        return uni.showToast({
          title: `请将注册数据填写完整`,
          icon: "none",
          duration: 2000,
        });
      }
			let params = { ...this.form }
			if(params.documentType === '1') {
				if(this.isLetter(params.account)) {
					uni.showToast({
						title: '要求员工编号不包含字母',
						duration: 2000,
						icon: 'none'
					});
					return
				} else {
					params.account = 'G' + params.account
				}
			} 
			if(params.documentType === '0' && this.countUpperOrLower(params.account) > 0) {
				uni.showToast({
					title: '要求员工编号不包含小写字母',
					duration: 2000,
					icon: 'none'
				});
				return
			}
      const res = await getUserRegister(params);
        // this.successShow = true;
			uni.showToast({
				title: '注册成功',
				duration: 2000
			});
			uni.setStorageSync('registerPhone', this.form.phone);
			setTimeout(() => {
				wx.switchTab({
					url: `/pages/index/index`,
				});
			}, 2000);
    },
    //允许获取
    permit() {
      // this.sqShow = false;
      this.jujueShow = false;
    },
    //任然要拒绝
    rejectAll() {
      this.jujueShow = false;
    },
    open() {},
    typeLx() {
      this.show = true;
    },
		//允许授权手机号
    async getPhoneNumber(e) {
      // 允许授权
			if(e.detail.errMsg === 'getPhoneNumber:ok'){ //允许
				const phone = await getUserPhoneNumber(e.detail.code);
				//调获取手机号接口，成功后隐藏对话框
				uni.setStorageSync("registerPhone", phone);
				this.form.phone = phone;
				const res = await verifyPhone(phone);
				if (res !== "用户未注册") {
					await getUserProfile();
				}
			}  
			else if(e.detail.errMsg === 'getPhoneNumber:fail user deny'){ //取消
				this.jujueShow = true;
			}
    },
    //选中证件类型
    confirmSelect(e) {
			this.form.documentType = e.id 
			this.form.documentTypeName = e.name
    },
		//判断字符串是否包含字母
		isLetter(str) {
			for (var i in str) {
					var asc = str.charCodeAt(i);
					if ((asc >= 65 && asc <= 90 || asc >= 97 && asc <= 122)) {
							return true;
					}
			}
			return false;
		},
		//统计字符串中小写字母的个数
		countUpperOrLower(str) {
			let upper = [];
			let lower = [];
			for (let i in str) {
				let code = str[i].charCodeAt()
				if (code > 96 && code < 123) {
					lower.push(str[i])
				} else if (code > 64 && code < 91) {
					upper.push(str[i])
				}
			}
			console.log('小写字母个数', lower.length)
			return lower.length
		}
	},
};
</script>

<style lang="scss" scoped>
.register {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  padding: 32rpx;
  padding-bottom: 44rpx;
  box-sizing: border-box;
  .back-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400rpx;
  }
  .back-title {
    font-size: 38rpx;
    font-weight: 900;
    color: #000;
    text-align: center;
    margin-top: 410rpx;
    margin-bottom: 120rpx;
  }
  .main {
    height: 100%;
    background-color: #fff;
    border-radius: 50rpx;
  }
  .content {
    flex: 1;
    padding: 0 54rpx;
    margin-top: 30rpx;
    background-color: #fff;
    .title {
      font-size: 42rpx;
      font-weight: 500;
      margin-bottom: 32rpx;
    }
    .form-item {
      // white-space: nowrap;
      width: 390rpx;
    }
		.popup {
			.title {
				font-size: 36rpx;
				color: #000;
				font-weight: 600;
				margin-bottom: 32rpx;
				text-align: center;
			}
			.content {
				font-size: 32rpx;
				color: #000;
				margin-bottom: 42rpx;
				text-align: center;
			}
			.footer {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;
				.allow {
					color: rgba(197, 0, 10, 1);
					height: 68rpx;
					padding: 16px 19px;
					line-height: 0;
					border: 1rpx solid rgba(197, 0, 10, 1);
					margin: 0 40rpx;
				}
				.refuse {
					color: rgba(142, 142, 142, 1.0);
					border: 1rpx solid rgba(142, 142, 142, 1.0);
					background-color: transparent;
				}
			}
		}
  }
}
/deep/.uicon-arrow-right {
  position: absolute !important;
  right: 10rpx;
  bottom: 0;
}
</style>

<style lang="scss">
.register {
  .u-button {
    justify-content: left !important;
  }
  .u-button--normal {
    padding-left: 0 !important;
    font-size: 30rpx !important;
    color: #c4c7cf !important;
  }
  .u-button--info {
    border: 0 !important;
    font-weight: 500;
  }
  .u-form-item {
    border-bottom: 1rpx solid #f2f2f2;
    margin-bottom: 20rpx;
  }
  .u-button--error {
    justify-content: center !important;
    background-color: #c5000a !important;
    border-color: #c5000a !important;
    color: #fff !important;
    margin-top: 120rpx;
    font-weight: 600;
  }
	.u-popup__content {
	  padding: 30rpx 40rpx;
		// padding-bottom: 0;
	}
}
</style>