<template>
    <!-- 注册页面 -->
    <view class="register">
        <view class="edit-btn">
            <van-button size="small" icon="edit" type="info" @tap.native="edit">{{ btnValue }}</van-button>
        </view>
        <view class="base-info">
            <view class="header">
                <view class="title">基本信息</view>
                <view>
                    <view class="doorplate-type">类型</view>
                    <view class="">个人</view>
                </view>
            </view>
            <view class="house-info">
                <view class="list">
                    <text class="label">房屋编码：</text>
                    <text class="value">355ba6c0-c6f6-435f-90ef-3e9b889d8da2</text>
                </view>
                <view class="list">
                    <text class="label">标准地址：</text>
                    <text class="value">浙江省宁波市奉化区岳林街道金钟社区长汀东路221号东郡尚都7B幢701室</text>
                </view>
                <view class="list">
                    <text class="label">所属辖区：</text>
                    <text class="value">奉化区岳林街道金钟社区长汀东路东郡尚都</text>
                </view>
            </view>
        </view>
        <view class="edit-info" v-if="isEdit">
            <view class="edit-content">
                <view class="edit-title">房主及产权信息</view>
                <van-field
                    label="户主姓名："
                    v-model="ownerName"
                    center
                    clearable
                    required
                    placeholder="请输入户主姓名"
                    :error-message="verifyRules.ownerName"
                    @blur="onBlur($event, { prop: 'ownerName', label: '户主姓名' })"
                    data-prop="ownerName"
                    data-label="户主姓名"
                />
                <van-field
                    label="身份证号："
                    v-model="ownerIdcard"
                    type="idcard"
                    center
                    clearable
                    required
                    placeholder="请输入身份证号"
                    :error-message="verifyRules.ownerIdcard"
                    @blur="onBlur($event, { prop: 'ownerIdcard', label: '身份证号' })"
                    data-prop="ownerIdcard"
                    data-label="身份证号"
                />
                <van-field
                    label="联系电话："
                    v-model="ownerPhone"
                    type="number"
                    center
                    clearable
                    required
                    placeholder="请输入联系电话"
                    :error-message="verifyRules.ownerPhone"
                    @blur="onBlur($event, { prop: 'ownerPhone', label: '联系电话' })"
                    data-prop="ownerPhone"
                    data-label="联系电话"
                />
                <van-field
                    label="户籍地："
                    v-model="ownerHuji"
                    center
                    clearable
                    required
                    placeholder="请输入户籍地"
                    :error-message="verifyRules.ownerHuji"
                    @blur="onBlur($event, { prop: 'ownerHuji', label: '户籍地' })"
                    data-prop="ownerHuji"
                    data-label="户籍地"
                />
                <van-radio-group class="radio" v-model="radio1" direction="horizontal">
                    <van-radio name="1">房户不一致</van-radio>
                    <van-radio name="2">房户一致</van-radio>
                </van-radio-group>
                <van-field label="产权证号：" v-model="chanquanhao" center clearable placeholder="请输入产权证号" />
                <van-field label="居住情况：" v-model="ownerLive" center clearable placeholder="请输入居住情况" error-message="" />
                <view class="radio">
                    <text class="radio-label">在册党员：</text>
                    <van-radio-group v-model="radio2" direction="horizontal">
                        <van-radio name="1">是</van-radio>
                        <van-radio name="2">否</van-radio>
                    </van-radio-group>
                </view>
                <view class="radio">
                    <text class="radio-label">业委会：</text>
                    <van-radio-group v-model="radio3" direction="horizontal">
                        <van-radio name="1">是</van-radio>
                        <van-radio name="2">否</van-radio>
                    </van-radio-group>
                </view>
                <view class="radio">
                    <text class="radio-label">业主代表：</text>
                    <van-radio-group v-model="radio4" direction="horizontal">
                        <van-radio name="1">是</van-radio>
                        <van-radio name="2">否</van-radio>
                    </van-radio-group>
                </view>
                <view class="radio">
                    <text class="radio-label">残疾人：</text>
                    <van-radio-group v-model="radio5" direction="horizontal">
                        <van-radio name="1">是</van-radio>
                        <van-radio name="2">否</van-radio>
                    </van-radio-group>
                </view>
                <view class="radio">
                    <text class="radio-label">志愿者：</text>
                    <van-radio-group v-model="radio6" direction="horizontal">
                        <van-radio name="1">是</van-radio>
                        <van-radio name="2">否</van-radio>
                    </van-radio-group>
                </view>
                <view class="radio">
                    <text class="radio-label">是否独居：</text>
                    <van-radio-group v-model="radio7" direction="horizontal">
                        <van-radio name="1">是</van-radio>
                        <van-radio name="2">否</van-radio>
                    </van-radio-group>
                </view>
                <view class="table">
                    <view class="title">
                        <text>住户信息</text>
                        <van-button size="small" type="info" @tap.native="addUser">新增</van-button>
                    </view>
                    <view class="th">
                        <view class="label" v-for="(item, index) in tableHead" :key="index">{{ item.label }}</view>
                    </view>
                    <view class="tr" v-for="(item, index) in tableData" :key="index">
                        <view class="td" v-for="(value, index1) in item" :key="value.key">{{ value }}</view>

                        <view class="td">
                            <text class="text-btn" @tap="editUser" :data-data="item">编辑</text>
                            <text class="text-btn" @tap="deleteUser" :data-index="index">删除</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="submit">
                <button class="submit-button" @tap="submitHouseholdInfo">保存</button>
            </view>
        </view>
        <van-popup closeable round :show="showPopup" @close="closePopup">
            <view class="popup-title">住户人员信息</view>
            <van-field
                label="住户姓名："
                v-model="userName"
                title-width="200rpx"
                center
                clearable
                required
                placeholder="请输入住户姓名"
                :error-message="verifyRules.userName"
                @blur="onBlur($event, { prop: 'userName', label: '住户姓名' })"
                data-prop="userName"
                data-label="住户姓名"
            />
            <van-field
                label="身份证号："
                v-model="userIdcard"
                type="idcard"
                title-width="200rpx"
                center
                clearable
                required
                placeholder="请输入身份证号码"
                :error-message="verifyRules.userIdcard"
                @blur="onBlur($event, { prop: 'userIdcard', label: '身份证号' })"
                data-prop="userIdcard"
                data-label="身份证号"
            />
            <van-field
                label="与户主的关系："
                v-model="userRelation"
                title-width="200rpx"
                center
                clearable
                required
                placeholder="请选择与户主的关系"
                :error-message="verifyRules.userRelation"
                @blur="onBlur($event, { prop: 'userRelation', label: '与户主的关系' })"
                data-prop="userRelation"
                data-label="与户主的关系"
            />
            <van-field label="联系电话：" v-model="userPhone" title-width="200rpx" center clearable placeholder="请输入联系电话" :error-message="verifyRules.userPhone" />
            <van-field label="户籍地址：" v-model="userHuji" title-width="200rpx" center clearable placeholder="请输入户籍地址" error-message="" />
            <van-field label="现住地址：" v-model="userAddress" title-width="200rpx" center clearable placeholder="请输入现住地址" error-message="" />
            <van-field label="备注：" v-model="userComment" type="textarea" :autosize="true" title-width="200rpx" center clearable placeholder="请输入备注" />
            <button class="submit-button" @tap="submitUserInfo">确定</button>
        </van-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            btnValue: '编辑',
            isEdit: false,

            // 户主信息
            ownerName: '',

            ownerIdcard: '',
            ownerPhone: '',
            ownerLive: '',
            ownerHuji: '',
            chanquanhao: '',
            radio1: '',
            radio2: '',
            radio3: '',
            radio4: '',
            radio5: '',
            radio6: '',
            radio7: '',

            // 住户信息
            showPopup: false,

            userName: '',
            userIdcard: '',
            userRelation: '',
            userPhone: '',
            userHuji: '',
            userAddress: '',
            userComment: '',

            // 检验规则
            verifyRules: {
                ownerName: '',
                ownerIdcard: '',
                ownerPhone: '',
                ownerHuji: '',
                userName: '',
                userIdcard: '',
                userRelation: '',
                userPhone: ''
            },

            // 表格数据
            tableHead: [
                {
                    label: '姓名',
                    width: '80',
                    prop: 'userName'
                },
                {
                    label: '与户主关系',
                    width: '',
                    prop: 'userRelation'
                },
                {
                    label: '操作',
                    width: '150',
                    slot: 'operate'
                }
            ],

            tableData: [
                {
                    userName: '徐佳',
                    userRelation: '翁媳'
                },
                {
                    userName: '陈静波',
                    userRelation: '夫妻'
                },
                {
                    userName: '陈伟荣',
                    userRelation: '兄弟'
                },
                {
                    userName: '陈博',
                    userRelation: '父子'
                }
            ],

            value: {
                key: ''
            }
        };
    },
    methods: {
        /* 编辑 */
        edit() {
            if (this.btnValue === '编辑') {
                this.verifyIdcard('11111111111');
                this.setData({
                    ownerName: '',
                    ownerIdcard: '',
                    ownerPhone: '',
                    ownerLive: '',
                    ownerHuji: '',
                    chanquanhao: '',
                    radio1: '',
                    radio2: '',
                    radio3: '',
                    radio4: '',
                    radio5: '',
                    radio6: '',
                    radio7: '',
                    btnValue: '取消',
                    isEdit: true
                });
            } else {
                this.setData({
                    btnValue: '编辑',
                    isEdit: false
                });
            }
        },

        /* 增加住信息 */
        addUser() {
            this.setData({
                userName: '',
                userIdcard: '',
                userRelation: '',
                userPhone: '',
                userHuji: '',
                userAddress: '',
                userComment: '',
                showPopup: true
            });
        },

        /* 编辑住户信息 */
        editUser(event) {
            const data = event.currentTarget.dataset.data;
            this.setData({
                userName: data.userName,
                userIdcard: '433126199011220021',
                userRelation: data.userRelation,
                userPhone: '',
                userHuji: '',
                userAddress: '',
                userComment: '',
                showPopup: true
            });
        },

        /* 删除住户信息 */
        deleteUser(event) {
            const index = event.currentTarget.dataset.index;
            let tableData = this.tableData;
            tableData.splice(index, 1);
            this.setData({
                tableData
            });
        },

        /* 提交住户信息 */
        submitUserInfo() {
            let verifyRules = {};

            if (!this.userName) {
                verifyRules.userName = '住户姓名不能为空';
            }

            if (!this.userIdcard) {
                verifyRules.userIdcard = '身份证号不能为空';
            } else {
                if (!this.verifyIdcard(this.userIdcard)) {
                    verifyRules.userIdcard = '身份证号不合法';
                }
            }

            if (!this.userRelation) {
                verifyRules.userRelation = '与户主的关系不能为空';
            }

            if (Object.keys(verifyRules).length > 0) {
                this.setData({
                    verifyRules
                });
                return;
            }

            uni.showToast({
                title: '成功',
                icon: 'success',
                duration: 1000
            });
            this.setData({
                showPopup: false
            });
        },

        /* 关闭显示住户信息的弹出层 */
        closePopup() {
            this.setData({
                showPopup: false
            });
        },

        /* 提交房主信息 */
        submitHouseholdInfo() {
            let verifyRules = {};

            if (!this.ownerName) {
                verifyRules.ownerName = '户主姓名不能为空';
            }

            if (!this.ownerIdcard) {
                verifyRules.ownerIdcard = '身份证号不能为空';
            } else {
                if (!this.verifyIdcard(this.ownerIdcard)) {
                    verifyRules.ownerIdcard = '身份证号不合法';
                }
            }

            if (!this.ownerPhone) {
                verifyRules.ownerPhone = '联系电话不能为空';
            } else {
                if (!this.verifyPhone(this.ownerPhone)) {
                    verifyRules.ownerPhone = '电话号码不合法';
                }
            }

            if (!this.ownerHuji) {
                verifyRules.ownerHuji = '户籍地不能为空';
            }

            if (Object.keys(verifyRules).length > 0) {
                this.setData({
                    verifyRules
                });
                return;
            }

            uni.showToast({
                title: '成功',
                icon: 'success',
                duration: 1000
            });
            this.setData({
                isEdit: false,
                btnValue: '编辑'
            });
            uni.navigateTo({
                url: '/pages/home/home'
            });
        },

        /* 输入框失去焦点时校验输入值 */
        onBlur(event, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(event, _dataset);
            /* ---处理dataset end--- */
            const prop = event.currentTarget.dataset.prop;
            const label = event.currentTarget.dataset.label;
            const value = event.detail.value;
            let verifyRules = this.verifyRules;

            if (value) {
                verifyRules[prop] = '';
            } else {
                verifyRules[prop] = `${label}不能为空`;
            }

            this.setData({
                verifyRules
            });
        },

        /* 校验身份证是否合法 */
        verifyIdcard(idcard) {
            var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            return regx.test(idcard);
        },

        /* 验证电话号码是否合法 */
        verifyPhone(phoneNumber) {
            var regx = /^1\d{10}$/;
            return regx.test(phoneNumber);
        }
    }
};
</script>
<style>
@import './register.css';
</style>
