<template>
    <div>
        <el-image :src="require('../../assets/wanshan.png')"/>
        <div class="home">
            <div class="title" style="position:relative;">
                <img src="../../assets/saoma.png" style="width: 20px; height: 20px;margin-right: 5px"></img>
                <div v-if="isShowUpload">扫描身份证上传基本信息</div>
                <input
                        class="camera"
                        v-if="isShowUpload"
                        type="file"
                        accept="image/*"
                        capture="camera"
                        style="width: 100%;"
                        ref="fileItem"
                        @change="changeFile"
                />

            </div>
            <div class="content">
                <el-form hide-required-asterisk :model="ruleForm" :rules="rules" ref="ruleForm" label="top"
                         class="demo-ruleForm">
                    <el-form-item prop="userName">
                        <div class="flex-box" slot="label">
                            <div class="shu"></div>
                            <div class="small-box">姓名</div>
                        </div>
                        <el-input v-model="ruleForm.userName"></el-input>
                    </el-form-item>

                    <el-form-item prop="sex">
                        <div class="flex-box" slot="label">
                            <div class="shu"></div>
                            <div class="small-box">性别</div>
                        </div>
                        <div class="box">
                            <el-radio v-model="ruleForm.sex" label="男">男</el-radio>
                            <el-radio v-model="ruleForm.sex" label="女">女</el-radio>
                        </div>
                    </el-form-item>
                    <el-form-item prop="idCardNumber">
                        <div class="flex-box" slot="label">
                            <div class="shu"></div>
                            <div class="small-box">身份证号</div>
                        </div>
                        <el-input v-model="ruleForm.idCardNumber" @blur="changeIdCard"></el-input>
                    </el-form-item>
                    <el-form-item prop="age">
                        <div class="flex-box" slot="label">
                            <div class="shu"></div>
                            <div class="small-box">年龄</div>
                        </div>
                        <el-input v-model="ruleForm.age" disabled></el-input>
                    </el-form-item>
                    <el-form-item prop="job">
                        <div class="flex-box" slot="label">
                            <div class="shu"></div>
                            <div class="small-box">职务</div>
                        </div>
                        <div class="box">
                            <el-select v-model="ruleForm.job" placeholder="请选择">
                                <el-option
                                        v-for="item in jobs"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item prop="income">
                        <div class="flex-box" slot="label">
                            <div class="shu"></div>
                            <div class="small-box">收入</div>
                        </div>
                        <div class="box">
                            <el-select v-model="ruleForm.income" placeholder="请选择">
                                <el-option
                                        v-for="item in incomes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item prop="education">
                        <div class="flex-box" slot="label">
                            <div class="shu"></div>
                            <div class="small-box">学历</div>
                        </div>
                        <div class="box">
                            <el-select v-model="ruleForm.education" placeholder="请选择">
                                <el-option
                                        v-for="item in educations"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div style="width: 100%;margin-top: 50px">
                <el-button size="small" type="primary" round @click="finishInfo">提交完成</el-button>
                <el-button style="margin-top: 20px" size="small" type="primary" round @click="goBack">返回上一页</el-button>
            </div>

        </div>
    </div>
</template>

<script>
    import {getLoginUserInfo, updateLoginUserInfo, getToken} from "../../api";
    import lrz from "lrz";
    import axios from 'axios'
    import {decryptData_ECB} from "@/api/tool/sm4";

    export default {
        name: "finishinfo",
        data() {
            return {
                ruleForm: {
                    userName: '',
                    sex: '',
                    idCardNumber: '',
                    age: '',
                    job: '',  //职务
                    income: '',  //收入
                    education: '',
                },
                isShowUpload: true,

                jobs: [
                    {label: '在职人员', value: '在职人员'},
                    {label: '两委人员', value: '两委人员'},
                    {label: '社会组织人员', value: '社会组织人员'},
                    {label: '志愿者', value: '志愿者'},
                    {label: '学生', value: '学生'},
                    {label: '其他', value: '其他'},
                ],

                incomes: [
                    {label: '暂无', value: '暂无'},
                    {label: '500元以下', value: '500元以下'},
                    {label: '500-1000元', value: '500-1000元'},
                    {label: '1000-2000元', value: '1000-2000元'},
                    {label: '2000-5000元', value: '2000-5000元'},
                    {label: '5000元-1万元', value: '5000元-1万元'},
                    {label: '1-2万元', value: '1-2万元'},
                    {label: '2万元以上', value: '2万元以上'},
                ],

                educations: [
                    {label: '小学', value: '小学'},
                    {label: '初中', value: '初中'},
                    {label: '高中', value: '高中'},
                    {label: '大专', value: '大专'},
                    {label: '本科', value: '本科'},
                    {label: '本科以上', value: '本科以上'},
                ],

                rules: {
                    userName: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'blur'}
                    ],
                    idCardNumber: [
                        {required: true, message: '请填写证件号码', trigger: 'blur'},
                        {
                            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                            message: '证件号码格式有误！',
                            trigger: 'blur'
                        }
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'}
                    ],
                    job: [
                        {required: true, message: '请选择职务', trigger: 'blur'}
                    ],
                    income: [
                        {required: true, message: '请选择收入', trigger: 'blur'}
                    ],
                    education: [
                        {required: true, message: '请输入学历', trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            async getLoginUserInfo() {
                const result = await getLoginUserInfo();
                decryptData_ECB(result, ["userName", "idCardNumber"]);
                if (result.code == 0) {
                    this.ruleForm.userName = result.data.userName
                    this.ruleForm.sex = result.data.sex
                    this.ruleForm.idCardNumber = result.data.idCardNumber
                    this.ruleForm.age = result.data.age
                    this.ruleForm.income = result.data.income
                    this.ruleForm.job = result.data.job
                    this.ruleForm.education = result.data.education

                }
            },
            changeIdCard() {
                let myDate = new Date();
                let tYear = myDate.getFullYear();
                this.ruleForm.age = tYear - this.ruleForm.idCardNumber.slice(6, 10)
            },
            goBack() {
                this.$router.replace("/my/index");
            },
            async changeFile() {
                this.loading = this.$loading();
                const result = await getToken();
                let that = this;
                if (result.data.status == 200) {
                    let fileItem = this.$refs.fileItem;
                    //得到图片的路径
                    let file = fileItem.files[0];
                    lrz(file)
                        //成功时执行
                        .then(function (rst) {
                            let fd = rst.base64;
                            let form = new FormData();
                            // 文件对象
                            form.append("image", fd);
                            form.append("access_token", result.data.token);
                            form.append("id_card_side", 'front');
                            axios.post("https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=" + result.data.token,
                                form,
                                {
                                    headers: {
                                        'content-type': 'application/x-www-form-urlencoded'
                                    },
                                    dataType: 'json',
                                }).then(res => {
                                console.log(res, 'res');
                                if (that.ruleForm.userName == res.data.words_result['姓名'].words) {
                                    that.ruleForm.sex = res.data.words_result['性别'].words;
                                    that.ruleForm.idCardNumber = res.data.words_result['公民身份号码'].words;
                                    let myDate = new Date();
                                    let tYear = myDate.getFullYear();
                                    let aa = parseInt(res.data.words_result['公民身份号码'].words.slice(6, 10));
                                    that.ruleForm.age = tYear - aa;
                                } else {
                                    that.$message.error('添加当前老人名字和扫描身份证名字不一致,请重新扫描');
                                }
                                that.loading.close();
                            })
                                .catch(e => {
                                    that.$message.error(e.message);
                                    that.loading.close();
                                })
                        })
                        .catch(function (error) {
                            that.$message.error(error.message);
                            that.loading.close();
                        });

                }
            },
            finishInfo() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.updateLoginUserInfo();
                    } else {
                        return false;
                    }
                });
            },
            async updateLoginUserInfo() {
                this.$confirm('确定提交么?', '提交', {
                    type: 'warning'
                }).then(() => {
                    this.updateLoginUserInfo1()
                }).catch();
            },
            async updateLoginUserInfo1() {
                const result = await updateLoginUserInfo(this.ruleForm);
                if (result.code == 0) {
                    this.$router.replace("/my/index");
                }
            },
        },
        mounted() {
            this.getLoginUserInfo();
        }
    };
</script>


<style scoped>
    /deep/ .el-image__error, /deep/ .el-image__inner, /deep/ .el-image__placeholder {
        height: 150px;
    }


    .home {
        border: 1px solid #E4F0FE;
        box-shadow: 0px 3px 20px 0px rgba(32, 123, 242, 0.08);
        border-radius: 20px;
        position: absolute;
        left: 4%;
        top: 30px;
        background: #FFFFFF;
        padding-bottom: 30px;
        width: 92%;
        margin-bottom: 30px;
    }


    .title {
        width: 90%;
        height: 25px;
        background: rgba(31, 135, 247, 0.2);
        border: 1px solid rgba(31, 135, 247, 1);
        border-radius: 5px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(31, 135, 247, 1);
        margin-top: 20px;
    }

    .saoma {
        margin-left: 10px;
    }


    .flex-box {
        display: flex;
        margin-top: 20px;
        margin-bottom: 10px;
        width: 100%;
    }

    .small-box {
        margin-left: 10px;
    }

    .shu {
        height: 18px;
        width: 7px;
        background: #2087F7;
        border-radius: 4px;
    }

    /deep/ .el-form-item__label {
        line-height: 17px;
    }

    /deep/ .el-form-item {
        margin-bottom: 0;
    }


    .content {
        width: 90%;
        margin: 0 auto;
    }

    .box {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
    }


    .register {
        margin-top: 50px;
    }

    /deep/ .el-button {
        width: 90%;
        margin-left: 5%;
    }


    /deep/ .el-radio__inner {
        width: 20px;
        height: 20px;
    }

    .camera {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
</style>
