<template>
  <view class="page_css">
    <view class="container">
      <betone-header-top :title="title" />
      <u-form labelPosition="left" :model="registerInfo" :rules="rules" ref="registerForm">
        <u-form-item label="" prop="businessName" ref="item1" :border-bottom="false">
          <betone-new-input label="企业名称" v-model="registerInfo.businessName" placeholder="请输入" :isRequire="true" />
        </u-form-item>
        <!-- <u-form-item label="" prop="area" ref="item1" :border-bottom="false">
          <betone-input-picker :label="'地区'" :isRequire="true" :pickerData="countryData" :mode="'multiSelector'" :keyName="'label'" @changeSelect="changeSelect"  v-model="registerInfo.area"></betone-input-picker>
        </u-form-item> -->
        <u-form-item label="" prop="area" ref="item1" :border-bottom="false" @click="addMap()">
          <betone-new-input label="实验室地址" v-model="registerInfo.businessName" placeholder="请选择" :isRequire="true"
            :disabled="true" />
        </u-form-item>
        <u-form-item label="" prop="personName" ref="item1" :border-bottom="false">
          <betone-new-input label="负责人姓名" v-model="registerInfo.personName" placeholder="请输入" :isRequire="true" />
        </u-form-item>
        <u-form-item label="" prop="phoneNumber" ref="item1" :border-bottom="false">
          <betone-new-input label="手机号" v-model="registerInfo.phoneNumber" placeholder="请输入" :isRequire="true" />
        </u-form-item>
        <u-form-item label="" prop="password" ref="item1" :border-bottom="false">
          <betone-new-input label="设置密码" v-model="registerInfo.password" placeholder="请输入8-16位数字与字母的组合"
            :isRequire="true" type="password" />
        </u-form-item>
        <u-form-item label="" prop="confirmPassword" ref="item1" :border-bottom="false">
          <betone-new-input label="确认密码" v-model="registerInfo.confirmPassword" placeholder="请再次输入密码" :isRequire="true"
            type="password" />
        </u-form-item>
        <u-form-item label="" prop="verificationCode" ref="item1" :border-bottom="false">
          <betone-new-input label="手机验证码" v-model="registerInfo.verificationCode" placeholder="请输入手机6位数验证码"
            :isSms="true" @ch="sendCode" :isRequire="true" />
        </u-form-item>
        <u-form-item label="" prop="checked" ref="item1" :border-bottom="false">
          <u-checkbox-group style="margin-bottom: 16rpx" shape="square">
            <u-checkbox v-model="registerInfo.checked" key="index" labelSize="12"
              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="showSelect" :maskClose="true">

    </betone-dialog> -->
    <view v-if="showMap">
      <selectLoc :showMap="showMap" @close="closeLoc" @confirm="confirmLoc"></selectLoc>
    </view>
  </view>
</template>
<script>
import addrList from "@/utils/addr.js";
import selectLoc from './selectLoc/selectLoc.vue'
export default {
  components: {
    selectLoc
  },
  data() {
    return {
      title: "注册",
      showSelect: true,
      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"],
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["blur", "change"],
        },
        confirmPassword: {
          type: "string",
          required: true,
          message: "请确认密码",
          trigger: ["blur", "change"],
        },
        verificationCode: {
          type: "string",
          required: true,
          message: "请输入验证码",
          trigger: ["blur", "change"],
        },
      },
      showAreaModal: false,

      countryData: [],
      childArr: [], // 二级分类数据源

      title: '点击选择位置',
				showMap: true,
				lat: '',
				lng: '',
				prov: '',
				city: '',
				area: '',
				address: ''
    };
  },
  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]];
    },
    changeSelect(country) {

      var province = {}
      var area = {}
      // 不操作列行
      if (!!country) {
        province = this.countryData[0][0]
        area = province.children[0]
      }
      // 操作第一列
      if (country.length == 1) {
        province = this.countryData[0][country[0]]
        area = province.children[0]
      }
      if (country.length == 2) {
        province = this.countryData[0][country[0]]
        area = province.children[country[0]]

      }
      this.registerInfo.area = province.label + "," + area.label;
      console.log(this.registerInfo.area, province, area, country)
    },
    formSubmit() {
      console.log("form表单的提交", this.registerInfo);
      uni.navigateTo({
        url: "/pages/register/registerSuccess",
      });
      this.$refs.registerForm
        .validate()
        .then((res) => {
          if (this.registerInfo.checked.length <= 0) {
            uni.$u.toast("请勾选《注册服务协议》及《隐私权政策》");
            return false;
          }
          uni.$u.toast("校验通过");
        })
        .catch((errors) => {
          uni.$u.toast("校验失败");
        });
    },
    // 发送验证码
    sendCode() {
      setTimeout(() => {
        // this.isCanSms = true;
        uni.$u.toast("发送成功");
      }, 1500);
    },

    confirmLoc(res) {
				this.showMap = false;
				this.lat = res.lat;
				this.lng = res.lng;
				this.prov = res.province;
				this.city = res.city;
				this.area = res.area;
				this.address = res.district;
				console.log('选择的信息', res);
			},
			closeLoc() {
				this.showMap = false;
			},
  },
};
</script>
<style lang="scss" scoped>
.page_css {
  width: 100%;
  min-height: 100%;

  .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;
  }
}
</style>