/** * 注册页面 */
<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="80"
            class="form-item"
          >
            <u--input
              v-model="form.account"
              border="none"
              placeholder="请输入员工号码"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="员工姓名"
            prop="name"
            labelWidth="80"
            class="form-item"
          >
            <u--input
              v-model="form.name"
              border="none"
              placeholder="请输入员工姓名"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="员工类型"
            prop="type"
            class="form-item form-item-border"
            labelWidth="80"
          >
            <u-button @click="typeLx">{{
              form.type || "请选择员工类型"
            }}</u-button>
          </u-form-item>
          <u-form-item
            label="手机号码"
            prop="phone"
            borderBottom
            labelWidth="80"
            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="list"
          title="请选择员工类型"
          description="只能单选"
          @close="show = false"
          @select="sexSelect"
        >
        </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 { getUserType, 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: "", //姓名
        type: "", //员工类型
        phone: "", //电话
        salt: "", //员工类型id
      },
      tips: {
        text: "请选择员工类型",
        color: "#909399",
        fontSize: 24,
      },
      list: [],
      show: false,
      // sqShow: false,
      jujueShow: false,
      successShow: false,
      errorShow: false,
      code: "",
    };
  },
  async created() {
    let res = await getUserType();
    this.list = res;
  },
  methods: {
    //注册失败确认
    errorQr() {
      this.errorShow = false;
    },
    //注册失败返回
    errorFh() {
      this.errorShow = false;
    },
    //点击注册
    async registerGo() {
      if (
        this.form.account.trim() == "" ||
        this.form.name.trim() == "" ||
        this.form.salt.trim() == "" ||
        this.form.phone.trim() == ""
      ) {
        return uni.showToast({
          title: `请将注册数据填写完整`,
          icon: "none",
          duration: 2000,
        });
      }
      const res = await getUserRegister(this.form);
        // 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;
			}
    },
    //选中员工类型
    sexSelect(e) {
      setTimeout(() => {
        this.form.type = e.name;
        this.form.salt = e.id;
      }, 30);
      // this.$refs.form1.validateField('userInfo.sex')
    },
  },
};
</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>
