/** * 注册页面 */
<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"
              @click="getUserInfo"
              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="sqShow"
          mode="center"
          :round="10"
          :closeOnClickOverlay="false"
          @close="close"
          @open="open"
        >
          <view class="popup">
            <view class="popup-title"> 微信授权</view>
            <view class="popup-content">
              申请获取你微信绑定的手机号{{ form.phone }}?
            </view>
            <view class="popup-buttom">
              <view class="popup-jujue" @click="reject"> 拒绝 </view>
              <view class="popup-yunxu" @click="permit"> 允许 </view>
            </view>
          </view>
        </u-popup>
        <u-popup
          :show="jujueShow"
          mode="center"
          :round="10"
          :closeOnClickOverlay="false"
          @close="close"
          @open="open"
        >
          <view class="popup">
            <view class="popup-all-title"> 拒绝将无法进行注册! </view>
            <view class="popup-buttom">
              <view class="popup-jujue" @click="rejectAll"> 仍要拒绝 </view>
              <view class="popup-yunxu" @click="permit"> 允许授权 </view>
            </view>
          </view>
        </u-popup>
        <u-popup
          :show="successShow"
          mode="center"
          :round="10"
          :closeOnClickOverlay="false"
          @close="close"
          @open="open"
        >
          <view class="popup">
            <view class="popup-all-title"> 注册成功! </view>
          </view>
        </u-popup>
        <u-popup
          :show="errorShow"
          mode="center"
          :round="10"
          :closeOnClickOverlay="false"
          @close="close"
          @open="open"
        >
          <view class="popup">
            <view class="popup-error-title">
              注册失败！请重新填写信息或联系管理人员
            </view>
            <view class="popup-buttom">
              <view class="popup-jujue popup-jujue-fanhui" @click="errorFh">
                返回
              </view>
              <view class="popup-yunxu popup-jujue-queren" @click="errorQr">
                确认
              </view>
            </view>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserType } from '@/api/user.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: [
        {
          name: '广播电视台员工',
        },
        {
          name: '广播电视台员工',
        },
        {
          name: '网络有限公司员工',
        },
      ],
      show: false,
      sqShow: false,
      jujueShow: false,
      successShow: false,
      errorShow: false,
      code: '',
    }
  },
  methods: {
    //注册失败确认
    errorQr() {
      this.errorShow = false
    },
    //注册失败返回
    errorFh() {
      this.errorShow = false
    },
    //点击注册
    registerGo() {
      console.log(this.form)
      this.successShow = true
	 setTimeout(()=>{
		 wx.switchTab({
		 	url: `/pages/index/index`,  
		 });
	 },1000)
    },
    //允许获取
    permit() {
      this.sqShow = false
      this.jujueShow = false
    },
    //拒绝获取
    reject() {
      this.sqShow = false
      this.jujueShow = true
    },
    //任然要拒绝
    rejectAll() {
      this.jujueShow = false
    },
    open() {},
    typeLx() {
      this.show = true
      getUserType()
    },
    getPhoneNumber(e) {
      console.log(e, '666')
    },
    //获取用户手机号
    getUserInfo() {
      this.sqShow = true
      uni.getUserInfo({
        provider: 'weixin',
        success: (res) => {
          console.log('getUserInfo', res)
        },
      })
    },
    //关闭授权获取手机号弹窗
    close() {
      this.sqShow = false
    },
    //选中员工类型
    sexSelect(e) {
      setTimeout(() => {
        this.form.type = e.name
      }, 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 {
      width: 700rpx;
      height: 450rpx;

      .popup-title {
        text-align: center;
        font-size: 36rpx;
        margin: 35rpx;
      }

      .popup-content {
        width: 70%;
        margin-left: 135rpx;
        line-height: 54rpx;
      }

      .popup-error-title {
        margin-left: 36rpx;
        margin-right: 36rpx;
        margin-top: 80rpx;
        font-size: 38rpx;
      }

      .popup-login {
        margin-left: 240rpx;
        margin-top: 120rpx;
        width: 180rpx;
        height: 52rpx;
        background-color: skyblue;
        border-radius: 8rpx;
        line-height: 52rpx;
        border: #000 1px solid;
        text-align: center;
        color: #fff;
      }

      .popup-buttom {
        padding: 70rpx;
        margin-top: 72rpx;
        display: flex;
        justify-content: space-between;
      }

      .popup-jujue-fanhui {
        border: none;
        border-radius: 8rpx;
        background-color: gray;
        color: #fff;
      }

      .popup-jujue-queren {
        border: none;
        border-radius: 8rpx;
        background-color: skyblue;
        color: #fff;
      }

      .popup-buttom view {
        width: 180rpx;
        height: 56rpx;
        text-align: center;
        line-height: 56rpx;
        border-radius: 6rpx;
        border: 1px #000 solid;
      }

      .popup-all-title {
        text-align: center;
        font-size: 42rpx;
        margin-top: 142rpx;
      }
    }
  }
}
/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;
  }
}
</style>