<template>
    <div>
        <basic-container>
            <avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>
        </basic-container>
    </div>
</template>

<script>

import { add } from "@/api/business/yj/residentregister.js";

export default {
    data() {
        return {
            index: 0,
            dangerAreaPid: '',
            form: {
                isHouseholder: 1,
                personName: '',
                personId: '',
                dangerAreaPid: '',
                familyMembers: []
            },
            option: {
                labelWidth: 140,
                submitBtn: true,
                emptyBtn: true,
                column: [
                    {
                        label: '户主姓名',
                        prop: 'personName',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "必填项",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '身份证号',
                        prop: 'personId',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "必填项",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '危险区编码',
                        prop: 'dangerAreaPid',
                        span: 24,
                        disabled: true,
                        rules: [{
                            required: true,
                            message: "必填项",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '添加家庭成员',
                        prop: 'familyMembers',
                        type: 'dynamic',
                        span: 24,
                        // labelWidth: 120,
                        labelPosition: 'top',
                        children: {
                            index: false,
                            align: 'center',
                            type: 'form',
                            headerAlign: 'center',
                            rowAdd: (done) => {
                                //this.$message.success('新增回调');
                                // done({
                                //     input: '默认值'
                                // });
                                done();
                            },
                            rowDel: (row, done) => {
                                // this.$message.success('删除回调' + JSON.stringify(row));
                                done();
                            },
                            column: [{
                                // width: 200,
                                label: '姓名',
                                prop: "personName"
                            }, {
                                label: '身份证号',
                                prop: "personId"
                            },]
                        }
                    },
                ]
            }
        };
    },
    created() {
        const params = new URLSearchParams(this.$route.query)
        this.dangerAreaPid = params.get('dangerAreaPid')
        console.log(this.dangerAreaPid)
        this.form['dangerAreaPid'] = this.dangerAreaPid;
        document.getElementById("app").style.overflow = "auto";
    },
    methods: {
        handleSubmit(from, done) {
            console.log(JSON.stringify(from));
            // this.$message.success(JSON.stringify(from));
            add(from).then(() => {
                this.$message({
                    type: "success",
                    message: "提交成功!"
                });
                done();
            }, error => {
                console.log(error);
                done();
            });
        },
    }
};
</script>

<style></style>
