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

<script>

import { add, getFamilyList } from "@/api/business/yj/damagetransferregister.js";

export default {
    data() {
        return {
            index: 0,
            warnId: '',
            form: {
                warnId: '',
                personName: '',
                personId: '',
                familyMembers: [],
            },
            familyMembersItems: [],
            option: {
                labelWidth: 160,
                submitBtn: true,
                emptyBtn: true,
                column: [
                    {
                        label: '姓名',
                        prop: 'personName',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "必填项",
                            trigger: "blur"
                        }],
                        change: ({ value, column }) => {
                            // this.$message.success('change事件查看控制台')
                            // console.log('值改变', value, column)
                            this.nameInput(value, column);
                        },
                    },
                    {
                        label: '手机号',
                        prop: 'personId',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "必填项",
                            trigger: "blur"
                        }],
                        change: ({ value, column }) => {
                            // this.$message.success('change事件查看控制台')
                            // console.log('值改变', value, column)
                            this.phoneInput(value, column);
                        },
                    },
                    {
                        label: '家庭成员',
                        type: 'checkbox',
                        prop: 'familyMembers',
                        dicData: [],
                        span: 24,
                        rules: [{
                            required: true,
                            message: "必填项",
                            trigger: "blur"
                        }],
                    },

                    // {
                    //     label: '家庭户是否转移完成',
                    //     prop: 'familyMembersTransferStatus',
                    //     type: 'radio',
                    //     props: {
                    //         label: 'label',
                    //         value: 'value'
                    //     },
                    //     span: 24,
                    //     dicData: [
                    //         {
                    //             label: '否',
                    //             value: 0
                    //         },
                    //         {
                    //             label: '是',
                    //             value: 1
                    //         },
                    //     ],
                    //     rules: [{
                    //         required: true,
                    //         message: "必填项",
                    //         trigger: "blur"
                    //     }],
                    //     value: 0
                    // },
                ]
            }
        };
    },
    created() {
        const params = new URLSearchParams(this.$route.query)
        this.warnId = params.get('warnId')
        console.log(this.warnId)
        document.getElementById("app").style.overflow = "auto";
        //     var form = this.$refs.form
        //   this.$message.success('先设置本地字典1s后请求url')
        //   form.updateDic('checkbox', [{
        //     name: '字典1',
        //     code: 1
        //   }, {
        //     name: '字典0',
        //     code: 2
        //   }]);
        //   setTimeout(() => {
        //     form.updateDic('checkbox');
        //   }, 1000)
    },
    methods: {
        nameInput(value, column) {
            var formId = this.$refs.form
            let that = this;
            console.log(value, column);
            console.log(JSON.stringify(this.form))
            if (value != undefined && value.length > 0) {
                if (this.form.personId != undefined && this.form.personId.length > 0) {
                    let p = {
                        personId: this.form.personId,
                        personName: value
                    }
                    getFamilyList(p).then((res) => {
                        console.log(JSON.stringify(res))
                        let data = res.data.data;
                        let items = data.map(item => {
                            return {
                                label: item.personName,
                                value: item.id,
                            }
                        })
                        formId.updateDic('familyMembers', items);
                        that.form.familyMembers = [];
                        if (data.length > 0) {
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].personId == that.form.personId && data[i].personName == that.form.personName) {
                                    that.form.familyMembers.push(data[i].id);
                                    break;
                                }
                            }
                        }
                    });
                }
            }
        },
        phoneInput(value, column) {
            var formId = this.$refs.form
            let that = this;
            console.log(value, column);
            console.log(JSON.stringify(this.form))
            if (value != undefined && value.length > 0) {
                if (this.form.personName != undefined && this.form.personName.length > 0) {
                    let p = {
                        personId: value,
                        personName: this.form.personName
                    }
                    getFamilyList(p).then((res) => {
                        console.log(JSON.stringify(res))
                        let data = res.data.data;
                        let items = data.map(item => {
                            return {
                                label: item.personName,
                                value: item.id,
                            }
                        })
                        formId.updateDic('familyMembers', items);
                        that.form.familyMembers = [];
                        if (data.length > 0) {
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].personId == that.form.personId && data[i].personName == that.form.personName) {
                                    that.form.familyMembers.push(data[i].id);
                                    break;
                                }
                            }
                        }
                    });
                }
            }
        },
        handleSubmit(from, done) {
            console.log(JSON.stringify(from));
            from['warnId'] = this.warnId;
            add(from).then(() => {
                this.$message({
                    type: "success",
                    message: "提交成功!"
                });
                done();
            }, error => {
                console.log(error);
                done();
            });
        },
    }
};
</script>

<style></style>
