<template>
    <hr>
    <h3>编辑居民信息</h3>
    <table>
        <tbody>
        <tr>
            <td>身份证</td>
            <td><input type="text" id="id" ref="refId" v-model="person.id"></td>
        </tr>
        <tr>
            <td>姓名</td>
            <td><input type="text" id="name" v-model="person.name"></td>
        </tr>
        <tr>
            <td>sbp</td>
            <td><input type="text" id="sbp" v-model="person.sbp"></td>
        </tr>
        <tr>
            <td>dbp</td>
            <td><input type="text" id="dbp" v-model="person.dbp"></td>
        </tr>
        </tbody>
    </table>
    <button id="button_save" @click="save">保存</button>
    <div ref="refMessage"></div>
</template>

<script>
    import {ref} from 'vue';
    // import DictionaryElement from "@/components/dict/DictionaryElement";
    export default {
        name: "EditPerson",
        data(){
            return{
                proxy:"/springbootServer",
                urlSelect:"/PersonBaseInfo_881_1/select",
                urlInsert:"/PersonBaseInfo_881_1/insert",
                urlUpdate:"/PersonBaseInfo_881_1/update",
                newPerson:false,
                person:{
                    id:this.$route.query.id,
                    name:"",
                    sbp:"",
                    dbp:""
                },
            }
        },
        methods:{
            select(){
                //编辑态时把数据读出来
                let url = this.proxy+this.urlSelect+"?id="+this.person.id;
                //console.log(url);
                let that = this;

                this.axios.get(url).then(
                    function (response) {
                        that.person=response.data.responseData;
                    },
                    function (error) {
                        console.log("有可能是防火墙没有开");
                        console.log(error.data);
                    }
                )
            },
            save(){

                const formData = new FormData();
                //id, name, gender, password, address, create_time, update_time
                formData.append("id",this.person.id);
                formData.append("name",this.person.name);
                formData.append("sbp",this.person.sbp);
                formData.append("dbp",this.person.dbp);

                let url="";
                if(this.newPerson){
                    url = this.proxy+this.urlInsert;
                }else{
                    url = this.proxy+this.urlUpdate;
                }
                // console.log("-----------------------------------------");
                // console.log(url);
                // console.log("-----------------------------------------");
                let that = this;

                this.axios.post(
                    url,
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }

                ).then(
                    function (response) {


                        that.result = response.data;
                        that.refMessage.innerText="保存成功";
                        if(that.newPerson){
                            //新增后改变状态
                            that.newPerson=false;
                            that.refId.disabled=true;
                        }
                        window.setTimeout(
                            ()=>{
                                try {
                                    that.refMessage.innerText=''
                                }catch (e) {
                                    console.log(e.toString())

                                }

                            },1000
                        )
                    },
                    function (error) {
                        // console.log("-----------------------------------------");
                        // console.log("error", error);
                        // console.log("-----------------------------------------");
                        that.refMessage.innerText="保存失败";
                        window.setTimeout(
                            ()=>{
                                try {
                                    that.refMessage.innerText=''
                                }catch (e) {
                                    console.log(e.toString())
                                }
                            },1000
                        )
                        console.log("有可能是防火墙没有开");
                        console.log(error);
                    }
                )
            },
        },
        mounted() {
            //console.log(this.$route.query.id)
            if(this.person.id!=""){
                //console.log(this.id)
                this.select();
                this.refId.disabled=true;
            }else {
                //console.log(this.id)
                this.newPerson=true;
                this.person.id="身份证不能为空";
            }
            window.myVue=this;

        },
        setup(){
            //定义ref数据变量
            const refMessage=ref("message");
            const refId=ref(null);
            //把定义的变量与方法返回给组件，这时在组件中就可以使用了
            return {
                refMessage,
                refId,
            }
        },
        unmounted() {

        }

    }
</script>

<style scoped>
    table{
        margin: auto;
    }
    td{
        text-align: left;
    }
    img{
        height:50px;
    }
</style>


