<template>
  <view class="page_css">
    <view class="container">
      <betone-header-top :title="title" />
      <u-form label-position="top" :model="registerInfo" :rules="rules" ref="registerForm">
        <u-form-item prop="businessName" :border-bottom="false" label="企业名称" :required="true">
          <u-input v-model="registerInfo.businessName" :border="true" placeholder="请输入手机号"
            style="margin-bottom: 32rpx" />
        </u-form-item>
        <u-form-item prop="area" :border-bottom="false" label="实验室地址" :required="true">
          <view @click.stop="addMap()" style="width: 100%;height: 100%;">
            <betone-new-input v-model="registerInfo.area" placeholder="请选择" type="select" />
          </view>
        </u-form-item>
        <u-form-item prop="personName" :border-bottom="false" label="负责人姓名" :required="true">

          <u-input v-model="registerInfo.personName" type="text" :border="true" placeholder="请输入"
            style="margin-bottom: 32rpx" />
        </u-form-item>
        <u-form-item prop="phoneNumber" :border-bottom="false" label="手机号" :required="true">

          <u-input v-model="registerInfo.phoneNumber" type="text" :border="true" placeholder="请输入"
            style="margin-bottom: 32rpx" />
        </u-form-item>
        <u-form-item prop="verificationCode" :border-bottom="false" >
          <betone-new-input label="手机验证码" :isRequire="true" v-model="registerInfo.verificationCode" placeholder="请输入手机6位数验证码"
            :isSms="true" @ch="sendCode" ref="verificationCode" />
        </u-form-item>
        <u-form-item prop="password" :border-bottom="false" label="设置密码" :required="true">
          <u-input v-model="registerInfo.password" type="password" placeholder="请输入8-16位数字与字母的组合" :border="true" :password-icon="true" />
        </u-form-item>
        <u-form-item prop="confirmPassword" label="确认密码" :border-bottom="false" :required="true">
          <u-input v-model="registerInfo.confirmPassword" type="password" :border="true" :password-icon="true" />
        </u-form-item>

        <u-form-item prop="checked" :border-bottom="false">
          <u-checkbox-group style="margin-bottom: 16rpx" shape="square">
            <u-checkbox v-model="registerInfo.checked" key="index" labelSize="24"
              name="我已阅读并接受《注册服务协议》及《隐私权政策》">我已阅读并接受《注册服务协议》及《隐私权政策》</u-checkbox>
          </u-checkbox-group>
        </u-form-item>
      </u-form>
      <u-button class="item-bottom" type="primary" @click="formSubmit()">
        注册
      </u-button>
    </view>
    <betone-dialog v-model="mapInfo.showMapSelect" :maskClose="true" :mode="'bottom'">
      <map-Point @commitCheck="commitCheck" :mapKey='mapInfo.mapKey' :Radius='mapInfo.Radius'
        :showResetting='mapInfo.showResetting' :listIco='mapInfo.listIco' :orientationIco='mapInfo.orientationIco'
        :resettingIco='mapInfo.resettingIco'></map-Point>
    </betone-dialog>
    <betone-loading ref="BetLoading"></betone-loading>
  </view>
</template>
<script>
import addrList from "@/utils/addr.js";
export default {
  data() {
    return {
      title: "注册",

      registerInfo: {
        businessName: "", //企业名称
        area: "", //地区
        personName: "", //负责人姓名
        phoneNumber: "", //手机号
        password: "", //密码
        confirmPassword: "", //确认密码
        verificationCode: "", //验证码
        checked: false, //同意隐私政策

      },
      rules: {
        businessName: {
          type: "string",
          required: true,
          message: "请输入企业名称",
          trigger: ["blur", "change"],
        },
        area: {
          type: "string",
          required: true,
          message: "请选择实验室位置",
          trigger: ["blur", "change"],
        },
        personName: {
          type: "string",
          required: true,
          message: "请输入负责人姓名",
          trigger: ["blur", "change"],
        },
        phoneNumber: [
          {
            type: "string",
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '请输入正确的手机号',
            trigger: ["change", "blur"]
          },
        ],
        password: [
          {
            type: "string",
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
          {
            min: 8,
            max: 16,
            message: '长度在8-16个字符之间'
          },
        ],
        confirmPassword: [
          {
            type: "string",
            required: true,
            message: "请确认密码",
            trigger: ["blur"],
          },
          {
            asyncValidator: (rules, value, callback) => {
              if (value != this.registerInfo.password) {
                callback(new Error('两次密码校验不一致'))
              }
              callback()
            },
            message: '两次密码校验不一致',
            trigger: ["blur"]
          },
        ],
        verificationCode: {
          type: "string",
          required: true,
          message: "请输入验证码",
          trigger: ["blur", "change"],
        },
      },
      showAreaModal: false,

      countryData: [],
      childArr: [], // 二级分类数据源  120.439196,36.171428
      mapInfo: {
        showMapSelect: false,
        mapKey: '58235226b0fab29ed527bac25ec853ae',
        address: '',
        latitude: '120.439196',
        longitude: '36.171428',
        listIco: '/uni_modules/map-Point/static/item-inx.png',
        orientationIco: '/uni_modules/map-Point/static/map-inx.png',
        resettingIco: "/uni_modules/map-Point/static/position.png",
        showResetting: true,
        Radius: '',
      },
      selectMap: {},//选中地点的详细信息

    };
  },
  onReady() {
    this.$refs.registerForm.setRules(this.rules);
  },
  mounted() {
    this.getAllClassify()
  },
  methods: {
    // 初始化数据
    getAllClassify() {
      let dataLen = addrList.length;
      for (let i = 0; i < dataLen; i++) {
        // 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
        this.childArr.push(addrList[i].children);
      }
      // 一级分类的数据源
      this.countryData = [addrList, this.childArr[0]];
    },

    formSubmit() {
      this.$nextTick(() => {
        // uni.navigateTo({
        //           url: "/pages/register/registerSuccess?account=" + this.registerInfo.phoneNumber + '&pwd=' + this.registerInfo.password,
        //         });
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            if (this.registerInfo.checked.length <= 0) {
              uni.$u.toast("请勾选《注册服务协议》及《隐私权政策》");
              return false;
            }
            this.BetLoading.show();
            let query_ = {
              "deptName": this.registerInfo.businessName,//企业名称
              "address": this.registerInfo.area,//详细地址
              "name": this.registerInfo.personName,//负责人姓名
              "phone": this.registerInfo.phoneNumber,//手机号
              "password": this.registerInfo.password,//设置密码
              "addressLon": this.selectMap.location.split(',')[0],//经度
              "addressLat": this.selectMap.location.split(',')[1],//纬度
              "verifyCode": this.registerInfo.verificationCode,//验证码
            }
            this.$u.api.registerUser(query_).then(res => {
              this.BetLoading.hide();
              if (res.code == 200) {
                setTimeout(() => {
                  uni.navigateTo({
                    url: "/pages/register/registerSuccess?account=" + this.registerInfo.phoneNumber + '&pwd=' + this.registerInfo.password,
                  });
                }, 1000)
              } else {
                uni.$u.toast(res.msg);
              }
            }).finally(err => {
              this.BetLoading.hide();
              uni.$u.toast(err.data.msg);
            })
          } else {
            this.BetLoading.hide();
            console.log('验证失败');
          }
        });
      })


    },
    // 发送验证码
    sendCode() {
      if (this.registerInfo.phoneNumber == '') {
        uni.$u.toast("请先输入手机号");
        return false;
      }
      let query = {
        phone: this.registerInfo.phoneNumber
      }
      this.$u.api.sendVerify(query).then(res => {
        if (res.code == 200) {
          this.$refs.verificationCode.sendSuceess()
        }
      })

    },
    // 打开地图选择框
    addMap() {
      this.mapInfo.showMapSelect = true
    },
    commitCheck(e) {
      if (e) {
        this.selectMap = e
        console.log('选中地点', e)
        uni.$emit('commitCheck', e);
        this.registerInfo.area = e.province + e.city + e.district + e.address
      }
      this.mapInfo.showMapSelect = false
    }

  },
};
</script>
<style lang="scss" scoped>
.page_css {
  width: 100%;
  min-height: 100%;
  padding-top: var(--status-bar-height);

  .container {
    padding: 32rpx 64rpx 32rpx 64rpx;
  }

  /deep/.u-form-item__body {
    padding-bottom: 0 !important;
  }

  /deep/.u-form-item__body__right__message {
    margin-left: 0 !important;
  }
  /deep/.arrow{
    top: 15rpx;
  }
}
</style>