<template>
    <div class='g-main'>
        <div class="left">
            <div class="user">
                <img src="@/assets/images/index/nan.png" alt="">
                <span>{{ resiDetailObj.name }}（{{ age }}岁）</span>
            </div>
            <div class="menu">
                <div class="progress">
                    <div class="text"><span>信息完整度</span> <span>70</span> </div>
                    <el-progress :percentage="70" :show-text="false"></el-progress>
                </div>

                <div class="list">
                    <div :class="{ 'item': true, 'active': index == active }" v-for="(item, index) in menuList"
                        @click="handelCLickMenu(index)">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="editBtn"><el-button type="primary" size="small">编辑</el-button></div>
            <div class="title-small">基础信息</div>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="6" class="f-flex">
                    <div class="f-label "><b>国籍：</b></div>
                    <div class="f-left8 f-font-color">
                        {{ resiDetailObj.nationalityName ? resiDetailObj.nationalityName : "--" }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label"><b>证件类型：</b></div>
                    <div class="f-left8 f-font-color">
                        {{ resiDetailObj.idTypeName ? resiDetailObj.idTypeName : "--" }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label"><b>证件号：</b></div>
                    <div class="f-left8 f-font-color">
                        {{
                            resiDetailObj.showIdNum
                            ? resiDetailObj.showIdNum
                            : resiDetailObj.idNum
                                ? `${resiDetailObj.idNum.substr(0, 11)}` +
                                "******" +
                                `${resiDetailObj.idNum.substr(16, 2)}`
                                : "--"
                        }}
                    </div>
                    <img v-show="showFlagIdCardBtn && resiDetailObj.idNum" src="@/assets/img/yanjing1.png" alt=""
                        width="14px" style="margin-left: 10px" />
                    <img v-show="!showFlagIdCardBtn" src="@/assets/img/yanjing2.png" alt="" width="14px"
                        style="margin-left: 10px" />
                    <el-button v-if="resiDetailObj.idNum" type="text" class="div-table-button--blue" size="small"
                        @click="handelCLickShowCheckPassword('idCard')">{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label"><b>联系电话：</b></div>
                    <div class="f-left8 f-font-color">
                        {{
                            resiDetailObj.showMobile
                            ? resiDetailObj.showMobile
                            : resiDetailObj.mobile
                                ? `${resiDetailObj.mobile.substr(0, 3)}` +
                                "****" +
                                `${resiDetailObj.mobile.substr(7, 5)}`
                                : "--"
                        }}
                    </div>
                    <img v-show="showFlagMobileBtn && resiDetailObj.mobile" src="@/assets/img/yanjing1.png" alt=""
                        width="14px" style="margin-left: 10px" />
                    <img v-show="!showFlagMobileBtn" src="@/assets/img/yanjing2.png" alt="" width="14px"
                        style="margin-left: 10px" />
                    <el-button v-if="resiDetailObj.mobile" type="text" class="div-table-button--blue" size="small"
                        @click="handelCLickShowCheckPassword('mobile')">{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button>
                </el-col>

            </el-row>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="6" class="f-flex">
                    <div class="f-label">性别：</div>
                    <div class="f-left8 f-font-color">
                        {{
                            resiDetailObj.gender
                            ? resiDetailObj.gender == 1
                                ? "男"
                                : "女"
                            : "--"
                        }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">出生日期：</div>
                    <div class="f-left8 f-font-color">{{ resiDetailObj.birthday }}</div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">民族：</div>
                    <div class="f-left8 f-font-color">
                        {{ resiDetailObj.nationName ? resiDetailObj.nationName : "--" }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">文化程度：</div>
                    <span class="f-left8 f-font-color">{{ educationText }}</span>
                </el-col>

            </el-row>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label">婚姻状况：</div>
                        <span class="f-left8 f-font-color">{{ categoryDictText }}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label">配偶情况：</div>
                        <span class="f-left8 f-font-color">{{ spouseText }}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">备注：</div>
                    <div class="f-left8 f-font-color">
                        {{ resiDetailObj.remark ? resiDetailObj.remark : "--" }}
                        <!--  -->
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">创建日期：</div>
                    <span class="f-left8 f-font-color">{{ resiDetailObj.createdTime || '--' }}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="24" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label">更新时间：</div>
                        <span class="f-left8 f-font-color">{{ resiDetailObj.updatedTime || '--' }}</span>
                    </div>
                </el-col>
            </el-row>
            <div class="title-small">居住信息</div>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="24" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label"><b>所属房屋：</b></div>
                        <span class="f-left8 f-font-color" v-if="resiDetailObj">
                            {{ resiDetailObj.houseInfo.gridName + '-' + resiDetailObj.houseInfo.homeName || '--' }}
                        </span>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label"><b>人房关系：</b></div>
                        <span class="f-left8 f-font-color">--</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label"><b>人户状况：</b></div>
                        <span class="f-left8 f-font-color">--</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label"><b>户籍所在地：</b></div>
                    <div class="f-left8 f-font-color">
                        --
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label"><b>与户主关系：</b></div>
                    <span class="f-left8 f-font-color">--</span>
                </el-col>
            </el-row>

            <div class="title-small">拓展信息</div>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label">宗教信仰：</div>
                        <span class="f-left8 f-font-color">{{
                            residentReligionObj.religion ? residentReligionObj.religion : "--"
                        }}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label">籍贯：</div>
                        <span class="f-left8 f-font-color">{{
                            residentResideInfoObj
                            ? residentResideInfoObj.nativePlace
                                ? residentResideInfoObj.nativePlace
                                : "--"
                            : "--"
                        }}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label"><b>就业状态:</b></div>
                    <div class="f-left8 f-font-color">
                        --
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-labels">工作单位:</div>
                    <span class="f-left8 f-font-color">{{
                        residentWorkInfoObj
                        ? residentWorkInfoObj.workUnit
                            ? residentWorkInfoObj.workUnit
                            : "--"
                        : "--"
                    }}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="" class="f-m-top23">
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label">职业：</div>
                        <span class="f-left8 f-font-color">{{
                            residentWorkInfoObj
                            ? residentWorkInfoObj.occupation
                                ? residentWorkInfoObj.occupation
                                : "--"
                            : "--"
                        }}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-flex ">
                        <div class="f-label">月收入：</div>
                        <span class="f-left8 f-font-color">{{
                            resiEconomyObj
                            ? resiEconomyObj.monthIncome
                                ? resiEconomyObj.monthIncome
                                : "--"
                            : "--"
                        }}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">有无赡养人：</div>
                    <div class="f-left8 f-font-color">
                        {{
                            residentFamilyInfoObj.elderlyFlag == 1
                            ? "有"
                            : residentFamilyInfoObj.elderlyFlag == 0
                                ? "无"
                                : "--"
                        }}
                    </div>
                </el-col>
            </el-row>

            <div class="title-small">关系图谱</div>
            <graph :userInfo="resiDetailObj" v-if="resiDetailObj.resiId"/>
            <div class="title-small">人员标签</div>
            <staff-tag :userInfo="resiDetailObj" v-if="Object.keys(resiDetailObj).length !== 0"></staff-tag>
            <div class="title-small">业务记录</div>
            <business-record :userInfo="resiDetailObj"></business-record>
            <div class="title-small">更新记录</div>
            <change-record :tableData="changeRecordList"></change-record>
        </div>
        <el-dialog title="密码验证" :visible.sync="showCheckPassword">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" autocomplete="off" placeholder="请输入当前账号密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showCheckPassword = false">取 消</el-button>
                <el-button type="primary" @click="handelClickCheckPassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { requestPost } from '@/js/dai/request'
import { idTypeList } from "@/js/columns/constants";
import graph from './cpts/graph.vue'
import staffTag from './cpts/staffTag.vue'
import businessRecord from './cpts/businessRecord.vue'
import changeRecord from './cpts/table/changeRecord.vue'

export default {
    data() {
        return {
            changeRecordList: [],//更新记录

            resiDetailObj: {},
            eduInfoDto: {},//学历详情
            residentFamilyInfoObj: {}, //家庭详情
            residentReligionObj: {},//宗教信仰详情
            residentResideInfoObj: {}, //居住详情
            residentWorkInfoObj: {},//工作详情
            resiEconomyObj: {},//经济状况详情
            showFlagIdCardBtn: true,
            showFlagMobileBtn: true,
            active: 0,
            menuList: [
                {
                    name: '基本信息（7/7）'
                },
                {
                    name: '居住信息（4/4）'
                },
                {
                    name: '拓展信息（3/4）'
                },
                // {
                //     name: '党员信息（0/3）'
                // },
                // {
                //     name: '残疾信息（0/3）'
                // },
                // {
                //     name: '大病信息（0/3）'
                // },
                // {
                //     name: '慢病信息（0/3）'
                // },
                // {
                //     name: '退役军人信息（0/3）'
                // },
                // {
                //     name: '保障房信息（0/3）'
                // },
                // {
                //     name: '特扶人员信息（0/3）'
                // },
                {
                    name: '业务记录（1）'
                }, {
                    name: '更新记录（1）'
                }
            ],
            age: null,

            idTypeList,//证件类型字典
            nationalityList: [],//国籍字典
            educationDictonArr: [],//学历字典
            marriageArr: [],  //婚姻状况字典
            spouseArr: [],//配偶情况字典
            careerStatusArr: [],//就业状况字典

            showCheckPassword: false,
            form: {
                password: ''//脱敏确认密码
            },
            rules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        };
    },
    components: { graph, staffTag, businessRecord, changeRecord },
    async created() {
        this.resiId = this.$store.state.huaXiang.userInfo.resiId;
        await this.getNationalityList();
        this.getResiDetail();
        this.getEduInfoDtoObj();
        this.getEducation();
        this.getFamilyInfoDetail()
        this.getMarriageNation()
        this.getSpouse()
        this.getResidentReligionObj()
        this.getResideInfoDetail()
        this.getResidentWorkInfoObj()
        this.getEconomyDetail()
        this.getChangeRecordDetailById()
    },
    mounted() {
    },
    activated() {
        this.resiDetailObj = null
        this.resiId = this.$store.state.huaXiang.userInfo.resiId;
        this.getNationalityList();
        this.getResiDetail();
        this.getEduInfoDtoObj();
        this.getEducation();
        this.getFamilyInfoDetail()
        this.getMarriageNation()
        this.getSpouse()
        this.getResidentReligionObj()
        this.getResideInfoDetail()
        this.getResidentWorkInfoObj()
        this.getEconomyDetail()
        this.getChangeRecordDetailById()
    },
    methods: {
        // 更新记录
        async getChangeRecordDetailById() {
            try {
                const { data } = await this.$http.post(
                    `/actual/base/residentChangeRecord/getChangeRecordsById/${this.resiId}`
                );
                if (data.data == null) {
                    this.changeRecordList = [];
                } else {
                    this.changeRecordList = data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        // 计算年龄
        calculateAge(birthdayTimestamp) {
            // 获取当前日期
            const currentDate = new Date();
            // 将生日时间戳转换为日期对象
            const birthdayDate = new Date(birthdayTimestamp);
            // 计算年龄
            let age = currentDate.getFullYear() - birthdayDate.getFullYear();
            // 检查是否已经过了生日
            const currentMonth = currentDate.getMonth();
            const birthMonth = birthdayDate.getMonth();
            if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDate.getDate() < birthdayDate.getDate())) {
                age--;
            }
            return age;
        },
        async getNationalityList() {
            try {
                const { data } = await this.$http.post('sys/dict/data/dictlist', { 'dictType': 'nationality' });
                this.nationalityList = data.data
            } catch (error) {
                console.log(error, `获取 ${dictType} 字典`);
            }
        },
        getResiDetail() {
            this.$http
                .post(`/actual/base/residentBaseInfo/detail/${this.resiId}`)
                .then((res) => {
                    this.resiDetailObj = res.data.data;
                    this.resiDetailObj.nationalityName = ''
                    const birthdayTimestamp = Date.parse(res.data.data.birthday);
                    this.age = this.calculateAge(birthdayTimestamp);
                    this.nationalityList.forEach(element => {
                        if (element.value === res.data.data.nationality) {
                            this.resiDetailObj.nationalityName = element.label
                        }
                    });
                    // console.log('idTypeList', this.idTypeList)
                    this.resiDetailObj.idTypeName = ''
                    this.idTypeList.forEach(element => {
                        if (element.value === res.data.data.idType) {
                            this.resiDetailObj.idTypeName = element.label
                        }
                    });
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        handelCLickMenu(index) {
            this.active = index
        },
        handelCLickShowCheckPassword(type) {
            this.form.password = '';
            if (type === 'idCard') {
                if (this.showFlagIdCardBtn) {
                    this.showCheckPassword = true;
                } else {
                    this.showFlagIdCardBtn = true;
                    this.$set(
                        this.resiDetailObj,
                        "showIdNum",
                        this.resiDetailObj.idNum.substr(0, 11) + "****" + this.resiDetailObj.idNum.substr(16, 2)
                    );
                }
            } else if (type === 'mobile') {
                if (this.showFlagMobileBtn) {
                    this.showCheckPassword = true;
                } else {
                    this.showFlagMobileBtn = true;
                    this.$set(
                        this.resiDetailObj,
                        "showMobile",
                        this.resiDetailObj.mobile.substr(0, 3) + "****" + this.resiDetailObj.mobile.substr(7, 4)
                    );
                }
            }
            this.tuominType = type;
        },

        handelClickCheckPassword() {
            this.$refs.form.validate(vali => {
                if (vali) {
                    this.handleSaveTuomin(this.form.password)
                } else {
                    return false
                }
            })
        },
        async handleSaveTuomin(password) {
            const url = `/actual/base/residentBaseInfo/getResiUserInfo/${this.resiId}`;
            let parm = {
                password
            }
            const { data, code, msg } = await requestPost(url, parm);
            if (code === 0) {
                if (this.tuominType === "mobile") {
                    this.$set(this.resiDetailObj, "showMobile", data.mobile);
                    this.showFlagMobileBtn = !this.showFlagMobileBtn;
                }
                if (this.tuominType === "idCard") {
                    this.$set(this.resiDetailObj, "showIdNum", data.idNum);
                    this.showFlagIdCardBtn = !this.showFlagIdCardBtn;
                }
                this.showCheckPassword = false
            } else {
                this.$message.error(msg);
            }
        },
        async getEducation() {
            try {
                let { data } = await this.$http.post("sys/dict/data/education", {
                    formCode: "resi_base_info",
                });
                this.educationDictonArr = data.data;
            } catch (error) {
                console.log(error, "获取学历字典");
            }
        },
        // 学历信息
        async getEduInfoDtoObj() {
            try {
                const { data } = await this.$http.get(
                    `/actual/base/residentEduInfo/detail/${this.resiId}`
                );
                if (data.data == null) {
                    this.eduInfoDto = {};
                } else {
                    this.eduInfoDto = data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        //宗教信仰
        async getResidentReligionObj() {
            try {
                const { data } = await this.$http.get(
                    `/actual/base/residentReligion/detail/${this.resiId}`
                );
                if (data.data == null) {
                    this.residentReligionObj = {};
                } else {
                    this.residentReligionObj = data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        // 婚姻状况字典
        async getMarriageNation() {
            try {
                const { data } = await this.$http.post("sys/dict/data/dictlist", {
                    dictType: "marriage",
                });
                this.marriageArr = data.data;
            } catch (error) {
                console.log(error, "获取婚姻状况字典");
            }
        },
        // 就业状态字典
        async getMarriageNation() {
            try {
                const { data } = await this.$http.post("sys/dict/data/dictlist", {
                    dictType: "career_status",
                });
                this.careerStatusArr = data.data;
            } catch (error) {
                console.log(error, "获取就业状态字典");
            }
        },
        //家庭信息
        async getFamilyInfoDetail() {
            try {
                const { data } = await this.$http.post(
                    `/actual/base/residentFamilyInfo/getFamilyInfoDetailById/${this.resiId}`
                );
                if (data.data == null) {
                    this.residentFamilyInfoObj = {};
                } else {
                    this.residentFamilyInfoObj = data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        //获取工作信息
        async getResidentWorkInfoObj() {
            try {
                const { data } = await this.$http.get(
                    `/actual/base/residentWorkInfo/detail/${this.resiId}`
                );
                if (data.data == null) {
                    this.residentWorkInfoObj = {};
                } else {
                    this.residentWorkInfoObj = data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        //获取经济状况
        async getEconomyDetail() {
            try {
                const { data } = await this.$http.post(
                    `/actual/base/residentEconomy/getEconomyDetailById/${this.resiId}`
                );
                if (data.data == null) {
                    this.resiEconomyObj = {};
                } else {
                    this.resiEconomyObj = data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        //居住
        async getResideInfoDetail() {
            try {
                const { data } = await this.$http.post(
                    `/actual/base/residentResideInfo/getResideInfoDetailById/${this.resiId}`
                );
                if (data.data == null) {
                    this.residentResideInfoObj = {};
                } else {
                    this.residentResideInfoObj = data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        // 配偶情况
        async getSpouse() {
            try {
                const { data } = await this.$http.post("sys/dict/data/dictlist", {
                    dictType: "spouse_situation",
                });
                this.spouseArr = data.data;
            } catch (error) {
                console.log(error, "获取配偶情况字典");
            }
        },
    },
    computed: {
        educationText() {
            let text = "--";
            this.educationDictonArr.forEach((item) => {
                if (item.value == this.eduInfoDto.cultureLevel) {
                    text = item.label;
                }
            });
            return text;
        },
        categoryDictText() {
            let text = "--";
            this.marriageArr.forEach((item) => {
                if (item.value == this.residentFamilyInfoObj.marriage) {
                    text = item.label;
                }
            });
            return text;
        },
        spouseText() {
            let text = "--";
            this.spouseArr.forEach((item) => {
                if (item.value == this.residentFamilyInfoObj.spouseSituation) {
                    text = item.label;
                }
            });
            return text;
        },
    },
    watch: {},
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/pages/resiInfo.scss";
@import "@/assets/scss/modules/management/list-main.scss";
</style>
