<template>
  <view class="add-member" :class="{'add-member--elder':$uiStyle==='elder'}">
    <view class="member-info">
      <uni-forms ref="form" :model="formData" :label-width="200" label-align="left" label-position="top">
        <uni-forms-item label="姓 名" name="name">
          <uni-easyinput type="text" v-model="formData.name" placeholder="请输入住户姓名" />
        </uni-forms-item>
        <uni-forms-item label="身份证号" name="idCard">
          <uni-easyinput type="idcard" v-model="formData.idCard" placeholder="请输入身份证号码" />
        </uni-forms-item>
        <uni-forms-item label="与户主关系" name="hzRelationCode">
          <uni-data-select v-model="formData.hzRelationCode" :localdata="hzRelationOptions" placeholder="请选择与户主关系"></uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="联系电话" name="phone">
          <uni-easyinput type="number" v-model="formData.phone" placeholder="请输入联系电话" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view style="display:flex; align-items:center; padding:0 15px">
      <checkbox-group @change="handleCheckChange">
        <checkbox :checked="disable" />
      </checkbox-group>
      <view class="agreement-text">我已阅读并同意
        <text class="agreeName" @click="handleService">《用户服务协议》</text>和
        <text class="agreeName" @click="handlePrivate">《隐私协议》</text>
      </view>
    </view>
    <custom-popup ref="customDialogRef"></custom-popup>
    <view class="operate-btn">
      <button
        :style="disable ? 'background-color:#3a78f5' : 'background-color:#abaeb1'"
        :disabled="!disable"
        @click="submit">
        保存
      </button>
    </view>
  </view>
</template>

<script>
import { getDictionaryByName } from '@/api/system';
import { addFamilyMember } from '@/api/family';
import agreements from "@/common/js/agreement";

export default {
  name: "familyMemberAdd",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {},
      curDoorplateCode: '',
      formData: {},
      formRules:{
        name: {
          rules: [{ required: true, errorMessage: '姓名不能为空' }] 
        },
        hzRelationCode: { 
          rules: [{ required: true, errorMessage: '与户主关系不能为空' }] 
        },
        idCard: { 
          rules: [
            { required: true, errorMessage: '身份证号码不能为空' },
            { 
              validateFunction:function(rule,value,data,callback){
                const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if (!reg.test(value)) {
                  callback('身份证号码不合法')
                }
                return true
              }
            }
          ]
        },
        phone: {
          rules: [
            { 
              validateFunction:function(rule,value,data,callback){
                const reg = /^1\d{10}$/;
                if (!reg.test(value)) {
                  callback('手机号码不合法')
                }
                return true
              }
            }
          ]
        }
      },
      hzRelationOptions: [],
      hzRelationDic: {},
      disable: false,
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || {};
    const globalData = getApp().globalData;
    if (globalData.doorplateInfo.code) {
      this.curDoorplateCode = globalData.doorplateInfo.code;
    } else {
		  this.curDoorplateCode = globalData.doorInfo.baseInfo.doorplateCode;
    }
    this.getDictionaryByName()
  },
  onReady() {
		this.$refs.form.setRules(this.formRules)
	},
  methods: {
		// 查询与户主关系字典
		getDictionaryByName () {
			getDictionaryByName({ dicName: 'huzhuRelation' }).then(res => {
				res.data.forEach(item => {
					this.hzRelationOptions.push({value: item.code, text: item.name});
					this.hzRelationDic[item.code] = item.name;
				})
			})
		},
    // 新增住户
    submit () {
			this.$refs.form.validate().then(res => {
        this.formData.userInfoId = this.userInfo.uuid;
        this.formData.doorplateCode = this.curDoorplateCode;
        this.formData.hzRelation = this.hzRelationDic[this.formData.hzRelationCode];
				addFamilyMember(this.formData).then(res=> {
          if (res.code === 0) {
            uni.showToast({title: '新增住户成员成功',icon: 'success'});
            setTimeout(() => {
              const pages = getCurrentPages();
              const beforePage = pages[pages.length - 2];
              beforePage.$vm.getFamilyMemberList();
              uni.navigateBack({
                delta: 1
              })
            }, 1000);
          }
        })
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
    },
    // 勾选用户协议和隐私协议
    handleCheckChange(e) {
      this.disable = !this.disable;
    },
    // 查看用户协议
    handleService() {
      this.$refs.customDialogRef.open({
        content: agreements["SERVICE_AGREEMENT"],
      });
    },
    // 查看隐私协议
    handlePrivate() {
      this.$refs.customDialogRef.open({
        content: agreements["PRIVATE_AGREEMENT"],
      });
    },
  },
} 
</script>

<style lang="scss" scoped>
.add-member {
  height: 100%;
  background-color: #fff;
  .member-info {
    padding: 10px 15px;
    background-color: #fff;
  }
  .agreement-text {
  /*  margin-top: 10px; */
    font-size: 12px;
  }
  .agreeName {
    color: #329cff;
  }
  .operate-btn {
    width: 96%;
    position: absolute;
    bottom: 10px;
    left: 2%;
    button {
      width: 100%;
    }
  }
}

.add-member--elder {
  .agreement-text {
    font-size: calc(12px * $zlb-elder-font-scale);
  }
  ::v-deep .uni-forms-item__label{
     font-size: calc(14px * $zlb-elder-font-scale);
  }
}
</style>