<template>
    <div class="person_root">
        <!--只显示，不能编辑-->
        <div class="onlyShow" v-if="!edit">
            <img src="../../assets/img/dog.jpeg" class="avarta">
            <div class="item">
                <h3 class="item-left">身份证号:</h3>
                <h3 class="item-right">{{ studentData.card_num }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">考生姓名:</h3>
                <h3 class="item-right">{{ studentData.name }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">所属单位:</h3>
                <h3 class="item-right">{{ studentData.unit_name }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">从事工作:</h3>
                <h3 class="item-right">{{ studentData.job }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">现职称:</h3>
                <h3 class="item-right">{{ studentData.professional }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">手机:</h3>
                <h3 class="item-right">{{ studentData.phone }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">电子邮箱:</h3>
                <h3 class="item-right">{{ studentData.email }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">通讯地址:</h3>
                <h3 class="item-right">{{ studentData.address }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">固定电话:</h3>
                <h3 class="item-right">{{ studentData.tel }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">传真:</h3>
                <h3 class="item-right">{{ studentData.fax }}</h3>
            </div>
            <div class="item">
                <h3 class="item-left">邮编:</h3>
                <h3 class="item-right">{{ studentData.postcode }}</h3>
            </div>
            <el-button type="primary" style="margin-top: 30px;width: 100px;" @click="editData">编辑</el-button>
        </div>
        <!--编辑-->
        <div class="edit" v-if="edit">
            <div class="edit-top-p">
                <div class="edit-top">
                    <div class="acount">
                        <span>身份证号：{{ studentData.card_num }}</span>
                        <span>考生姓名：{{ studentData.name }}</span>
                    </div>
                    <div class="avarta2">
                        <img src="../../assets/img/dog.jpeg">
                        <a @click="updateImg">点击修改头像</a>
                    </div>
                </div>
            </div>
            <div class="edit-data">
                <el-form ref="form" :model="form" label-width="180px" status-icon>
                    <el-form-item label="所属单位*：">
                        <el-select v-model="form.unit_name" placeholder="请选择" @change="selectUnit">
                            <el-option
                                v-for="item in unitData"
                                :key="item.uuid"
                                :label="item.name"
                                :value="item.uuid">
                            </el-option>
                        </el-select>

                        <el-select v-model="form.unit_id" placeholder="请选择" style="margin-left:20px;">
                            <el-option
                                v-for="item in unitSonData"
                                :key="item.uuid"
                                :label="item.name"
                                :value="item.uuid">
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item class="myinput" label="电子信箱*：">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item class="myinput" label="通讯地址*：">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="性别*：">
                        <el-radio v-model="form.gender" label="1">男</el-radio>
                        <el-radio v-model="form.gender" label="2">女</el-radio>
                    </el-form-item>
                    <el-form-item class="myinput" label="固定电话：">
                        <el-input v-model="form.tel"></el-input>
                    </el-form-item>
                    <el-form-item class="myinput" label="传真：">
                        <el-input v-model="form.fax"></el-input>
                    </el-form-item>
                    <el-form-item class="myinput" label="邮编：">
                        <el-input v-model="form.postcode"></el-input>
                    </el-form-item>
                </el-form>
                <el-button class="commit-btn" @click="submit">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getStudentInfo, //获取公告列表
    getUnitList,
    updateStudentInfo,
    addStudentInfo,
    getUnitSonList,
} from "@/api/home";

export default {
    data() {
        return {
            visible: false,
            edit: false,
            form: {},
            studentData: {},
            unitData: [],
            unitSonData: [],
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        // 获取考生个人资料
        async fetchData() {
            let res = await getStudentInfo({
                student_id: 2,
            });

            // 解构数据
            let {code, data} = res;

            // 赋值渲染
            if (code === 200) {
                this.studentData = data.res.student;
            }
        },
        // 获取可选单位
        async getUnit() {
            let res = await getUnitList({});

            // 解构数据
            let {code, data} = res;

            // 赋值渲染
            if (code === 200) {
                this.unitData = data.units;
            }
        },
        // 获取可选单位的子级单位
        async getUnitSon(id) {
            let res = await getUnitSonList({
                p_id: id,
            });

            // 解构数据
            let {code, data} = res;

            // 赋值渲染
            if (code === 200) {
                this.unitSonData = data.units;
            }
        },
        // 编辑考生个人资料
        async updateStudent() {
            let form = this.form
            let res = await updateStudentInfo(
                form
            );

            // 解构数据
            let {code, data} = res;

            // 赋值渲染
            if (code === 200) {
                this.fetchData();
            }
        },
        // 增加考生个人资料
        async addStudent() {
            let form = this.form
            let res = await addStudentInfo(
                form
            );

            // 解构数据
            let {code, data} = res;

            // 赋值渲染
            if (code === 200) {
                this.fetchData();
            }
        },
        editData() {
            this.edit = true;
            this.form = this.studentData;
            this.getUnit();
        },
        // 提交
        submit() {
            this.$emit('change', true)
            if (this.studentData) {
                this.updateStudent()
            } else {
                this.addStudent()
            }
        },
        selectUnit(val) {
            this.getUnitSon(val)
        },
        updateImg() {
            this.$router.push("/update_picture");
        }
    }
}
</script>

<style lang="less" scoped>
.person_root {
    width: 100%;
}

.avarta {
    width: 80px;
    height: 100px;
    position: absolute;
    top: 39%;
    left: 70%;
}

.onlyShow {
    padding-top: 30px;
    line-height: 40px;
    //text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        width: 100%;

        .item-left {
            width: 40%;
            text-align: right;
            margin-right: 20px;
        }

        .item-right {
            width: 40%;
            text-align: left;
        }
    }

}

.edit-top-p {
    padding: 10px;
}

.edit-top {
    background-color: #F6F7F9;
    line-height: 20px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .acount {
        //width: 100px;
        display: flex;
        flex-direction: column;
        //span{ width: 100px;}
    }

    .avarta2 {
        margin-left: 20px;
        width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 60px;
            height: 80px;
        }

        a {
            font-size: 12px;
            color: #225992;
        }
    }
}

.myinput {
    width: 800px;
}

.commit-btn {
    margin-left: 150px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    width: 100px;
    margin-bottom: 20px;
}
</style>