<template>
  <view class="container">
    <!-- <VNavigationBar title-color="#333" background-color="#fff" title="注册会员"></VNavigationBar> -->
	<view class="top_Bar">
		<uni-icons @click="goHome()" size="24" type="left"
			color="#000" style="margin-left: 10px;" ></uni-icons>
		<view class="title_top">完善会员信息</view>
		<view style="width: 24px;height: 24px;"></view>
	</view>
    <view class="body">
      <view class="formItem">
        <view class="formLabel">姓名</view>
        <view class="formContainer">
          <input placeholder="请填写你的真实姓名" v-model="formData.cusName" type="text"/>
        </view>
      </view>
      <view class="formItem">
        <view class="formLabel">性别</view>
        <view class="formContainer">
          <radio-group name="group1" class="radioGroup" :bindchange="radioChange">
            <label class="radio" v-for="(item, index) in radioSexItems" :key="item.value">
              <radio activeBackgroundColor="#009EDA" :value="item.value" :checked="item.checked"/>
              {{item.name}}
            </label>
          </radio-group>
        </view>
      </view>
      <view class="formItem">
        <view class="formLabel">身份证号</view>
        <view class="formContainer">
          <input placeholder="请填写你的身份证号" v-model="formData.idCard" type="text"/>
        </view>
      </view>
      <view class="formItem">
        <view class="formLabel">生日</view>
        <view class="formContainer">
          <picker mode="date" :value="formData.birthday"  @change="bindDateChange">
            <view>{{formData.birthday}}</view>
          </picker>
        </view>
      </view>
<!--      <view class="formItem">-->
<!--        <view class="formLabel">手机号</view>-->
<!--        <view class="formContainer">-->
<!--          <input placeholder="请填写你的手机号" v-model="formData.phoneNumber" type="text"/>-->
<!--        </view>-->
<!--      </view>-->
      <view class="formItem">
        <view class="formLabel">联系地址</view>
        <view class="formContainer">
          <textarea  placeholder="请填写你的联系地址" v-model="formData.address" maxlength="300"/>
        </view>
      </view>
      <view class="dl" @click="getlogin()">
        <text>保存</text>
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import request from "../../utils/request";
import {
  setToken,
} from '@/utils/auth.js'

export default {
  components: {
    VNavigationBar
  },
  data() {
    return {
      formData: {
        openId: "",
        cusName: "",
        sex: "",
        idCard:"",
        birthday:"请选择你的生日",
        // phoneNumber:"",
        address:"",
      },
      //性别
      radioSexItems: [
        { name: '男', value: '0', checked: true },
        { name: '女', value: '1', checked: false },
      ],
      detailAddress: [
        ['a', 'b'],
        ['b', 'a']
      ],
      addressRange: [
        ['山东'],
        ['济南'],
        ['历下区']
      ]
    };
  },
  onLoad(e) {
    this.formData.openId = e.openId
  },
  methods: {
	  goHome(){
		uni.reLaunch({
			url:'/pages-home/home/home'
		})
	  },
    /**
     * 注册
     */
    async getlogin(){
      //校验表单填写
      if(this.checkForm()){
        //获取选的性别
        this.formData.sex = this.radioSexItems.filter(item => item.checked ===true)[0].value;
        await request({
          url: '/base/custom-app/register',
          method: 'post',
          data: this.formData
        }).then((res) => {
          if (res.code==200) {
           uni.reLaunch({
             url: '/pages-home/home/home'
           })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
      }
    },
    checkForm(){
      if(""==this.formData.cusName){
        uni.showToast({
          title: '请填写姓名',
          icon: 'none'
        })
        return false
      }
      if(""==this.formData.idCard || !this.isValidID(this.formData.idCard)){
        uni.showToast({
          title: '请填写正确的身份证号',
          icon: 'none'
        })
        return false
      }
      if("请选择你的生日"==this.formData.birthday){
        uni.showToast({
          title: '请选择生日',
          icon: 'none'
        })
        return false
      }
      // if(""==this.formData.phoneNumber || !this.isValidPhoneNumber(this.formData.phoneNumber)){
      //   uni.showToast({
      //     title: '请填写手机号',
      //     icon: 'none'
      //   })
      //   return false
      // }
      if(""==this.formData.address){
        uni.showToast({
          title: '请填写联系地址',
          icon: 'none'
        })
        return false
      }
      return  true;
    },
    /**
     * 校验身份证号是否合法
     * @param id
     * @returns {boolean}
     */
    isValidID(id) {
    const regex = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
    return regex.test(id);
  },
    /**
     * 校验手机号
     * @param phoneNumber
     * @returns {boolean}
     */
    isValidPhoneNumber(phoneNumber) {
      const regex = /^1[3-9]\d{9}$/;
      return regex.test(phoneNumber);
    },
    bindDateChange(e) {
      this.formData.birthday = e.detail.value;
      this.$forceUpdate()
    },
    radioChange: function(e) {
      let radioItems = this.radioSexItems;
      for (let i = 0, len = radioItems.length; i < len; ++i) {
        radioItems[i].checked = radioItems[i].value === e.detail.value;
      }
      this.radioSexItems = radioItems;
    },
    submit() {
      this.$refs.form.validate().then(res => {
        console.log('表单数据信息：', res);
      }).catch(err => {
        console.log('表单错误信息：', err);
      })
    },
    detailColumnChangeFun({
                            detail
                          }) {
      if (detail.column === 0) {
        // 动态配置第二列
        this.$set(this.detailAddress, 1, ['m', 'n'])
      }
    },
    addressColumnChangeFun({
                             detail
                           }) {
      if (detail.column === 0) {
        // 动态配置第二列
        this.$set(this.detailAddress, 1, ['济宁'])
        // 动态配置第三列
        this.$set(this.detailAddress, 2, ['任城'])
      } else if (detail.column === 1) {
        // 动态配置第三列
        this.$set(this.detailAddress, 2, ['任城'])
      }
    },
    // 获取上传状态
    select(e) {
      console.log('选择文件：', e)
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },

    // 上传成功
    success(e) {
      console.log('上传成功')
    },

    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 20rpx 0;
  }

  .formItem {
    padding: 40rpx 0;
    margin: 0 32rpx;
    border-bottom: 1rpx solid #EEEEEE;
  }

  .formLabel {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    padding-bottom: 20rpx;
  }
  .formLabel:before {
    content: "*";
    color: red;
  }

  .radioGroup {
    display: flex;
    align-items: center;
    column-gap: 100rpx;
  }

  .radio {
    display: flex;
    align-items: center;
    column-gap: 20rpx;
  }

  /* #ifdef MP-WEIXIN */
  radio {
    filter: hue-rotate(90deg);
  }

  /* #endif */
  .formPicker {
    display: flex;
    align-items: center;
    column-gap: 20rpx;
  }

  .formPickerInput {
    flex: 1;
    width: 0;
  }

  .formPickerBtn {
    width: 28rpx;
    height: 28rpx;
  }
}
.dl {
  width: 90%;
  height: 44px;
  background: linear-gradient(-46deg, #0853C4 0%, #4282D8 80%);
  border-radius: 5px;
  margin: 0 auto;
  font-size: 16px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 22px;
}
.top_Bar{
	width: 100%;
	height: 40px;

	display: flex;
	align-items: center;
	justify-content: space-between;


	padding-top: 44px;
}
.title_top{
	font-size: 36rpx;
	font-weight: bold;
}

</style>
