<template>
    <div class='g-main'>
        <div class="left">
            <div class="user">
                <img src="@/assets/images/index/nan.png" alt="">
                <span v-if="resiDetailObj.baseInfoDto"> {{ resiDetailObj.baseInfoDto.name
                }}（{{ age }}岁）</span>
                <span v-else> -- </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><span
                            :class="{ 'incomplete': index == '2' || index == '3', 'full': index != '2' && index != '3' }">{{
                                item.num }}</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">
                        {{ nationalityText }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label"><b>证件类型：</b></div>
                    <div class="f-left8 f-font-color">
                        {{ idTypeText }}
                    </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.baseInfoDto && resiDetailObj.baseInfoDto.idNum
                            ? resiDetailObj.baseInfoDto.idNum
                            : "--"
                        }}
                    </div>
                    <img v-show="showFlagIdCardBtn" 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 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.baseInfoDto && resiDetailObj.baseInfoDto.mobile
                            ? resiDetailObj.baseInfoDto.mobile
                            : "--"
                        }}
                    </div>
                    <img v-show="showFlagMobileBtn" 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 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.baseInfoDto && resiDetailObj.baseInfoDto.genderName
                            ? resiDetailObj.baseInfoDto.genderName : "--"
                        }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">出生日期：</div>
                    <div class="f-left8 f-font-color">{{ resiDetailObj.baseInfoDto.birthday }}</div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">民族：</div>
                    <div class="f-left8 f-font-color">
                        {{ resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.nationName ?
                            resiDetailObj.baseInfoDto.nationName : "--" }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">文化程度：</div>
                    <span class="f-left8 f-font-color"> {{ resiDetailObj.eduInfoDto &&
                        resiDetailObj.eduInfoDto.cultureLevelName ?
                        resiDetailObj.eduInfoDto.cultureLevelName : "--" }}</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.baseInfoDt && resiDetailObj.baseInfoDto.remark ? resiDetailObj.baseInfoDto.remark :
                            "--" }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">创建日期：</div>
                    <span class="f-left8 f-font-color">
                        {{ resiDetailObj.baseInfoDt && resiDetailObj.baseInfoDto.createdTime ?
                            resiDetailObj.baseInfoDto.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.baseInfoDt && resiDetailObj.baseInfoDto.updatedTime ?
                                resiDetailObj.baseInfoDto.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">
                            {{ 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">{{
                            resiDetailObj.religionDto && resiDetailObj.religionDto.religion ?
                            resiDetailObj.religionDto.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">{{
                            resiDetailObj.baseInfoDto
                            ? resiDetailObj.baseInfoDto.nativePlace
                                ? resiDetailObj.baseInfoDto.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">
                        {{ categoryDictText }}
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-labels">工作单位:</div>
                    <span class="f-left8 f-font-color">{{
                        resiDetailObj.workInfoDto
                        ? resiDetailObj.workInfoDto.workUnit
                            ? resiDetailObj.workInfoDto.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">{{
                            resiDetailObj.workInfoDto
                            ? resiDetailObj.workInfoDto.occupation
                                ? resiDetailObj.workInfoDto.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">{{
                            resiDetailObj.economyDto
                            ? resiDetailObj.economyDto.monthIncome
                                ? resiDetailObj.economyDto.monthIncome
                                : "--"
                            : "--"
                        }}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="f-flex">
                    <div class="f-label">有无赡养人：</div>
                    <div class="f-left8 f-font-color">
                        {{
                            resiDetailObj.familyInfoDto && resiDetailObj.familyInfoDto.elderlyFlag == 1
                            ? "有"
                            : resiDetailObj.familyInfoDto && resiDetailObj.familyInfoDto.elderlyFlag == 0
                                ? "无"
                                : "--"
                        }}
                    </div>
                </el-col>
            </el-row>

            <div class="title-small">关系图谱</div>
            <graph :userInfo="resiDetailObj.baseInfoDto" v-if="resiDetailObj.baseInfoDto" />
            <div class="title-small">人员标签</div>
            <staff-tag :userInfo="resiDetailObj.baseInfoDto.categoryInfo"
                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 graph from './cpts/graph.vue'
import staffTag from './cpts/staffTag.vue'
import businessRecord from './cpts/businessRecord.vue'
import changeRecord from './cpts/table/changeRecord.vue'
import { idTypeList } from "@/js/columns/constants";

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

            resiDetailObj: {},//居民详情
            showFlagIdCardBtn: true,
            showFlagMobileBtn: true,
            active: 0,
            menuList: [
                {
                    name: '基本信息',
                    num: '（7/7）'
                },
                {
                    name: '居住信息',
                    num: '（4/4）'

                },
                {
                    name: '拓展信息',
                    num: '（3/4）'
                },
                {
                    name: '党员信息',
                    num: '（0/3）'

                },
                // {
                //     name: '残疾信息（0/3）'
                // },
                // {
                //     name: '大病信息（0/3）'
                // },
                // {
                //     name: '慢病信息（0/3）'
                // },
                // {
                //     name: '退役军人信息（0/3）'
                // },
                // {
                //     name: '保障房信息（0/3）'
                // },
                // {
                //     name: '特扶人员信息（0/3）'
                // },
                {
                    name: '业务记录',
                    num: '（1）'
                }, {
                    name: '更新记录',
                    num: '（1）'
                }
            ],
            age: null,

            nationalityList: [],//国籍字典
            marriageArr: [],  //婚姻状况字典
            spouseArr: [],//配偶情况字典
            careerStatusArr: [],//就业状况字典
            idTypeList,//证件类型字典
            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;
        console.log(this.$store.state.huaXiang.userInfo);
        await this.getNationalityList();
        this.getResiDetail();
        this.getMarriageNation()
        this.getSpouse()
        this.getChangeRecordDetailById()
    },
    mounted() {
    },
    activated() {
        this.resiDetailObj = null
        this.resiId = this.$store.state.huaXiang.userInfo.resiId;
        this.getNationalityList();
        this.getResiDetail();
        this.getMarriageNation()
        this.getSpouse()
        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
                .get(`/actual/base/residentIntegratedInfo/detail/masked/1740209624289349634`)
                .then((res) => {
                    console.log(res.data.data, 'resiDetailObj');
                    this.resiDetailObj = res.data.data || {};
                    // this.resiDetailObj.nationalityName = ''
                    const birthdayTimestamp = Date.parse(res.data.data.baseInfoDto.birthday);
                    this.age = this.calculateAge(birthdayTimestamp);
                    this.nationalityList.forEach(element => {
                        if (element.value === res.data.data.nationality) {
                            this.resiDetailObj.baseInfoDto.nationalityName = 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.baseInfoDto,
                        "idNum",
                        this.resiDetailObj.baseInfoDto.idNum.substr(0, 11) + "****" + this.resiDetailObj.baseInfoDto.idNum.substr(16, 2)
                    );
                }
            } else if (type === 'mobile') {
                if (this.showFlagMobileBtn) {
                    this.showCheckPassword = true;
                } else {
                    this.showFlagMobileBtn = true;
                    this.$set(
                        this.resiDetailObj.baseInfoDto,
                        "mobile",
                        this.resiDetailObj.baseInfoDto.mobile.substr(0, 3) + "****" + this.resiDetailObj.baseInfoDto.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.baseInfoDto, "mobile", data.mobile);
                    this.showFlagMobileBtn = !this.showFlagMobileBtn;
                }
                if (this.tuominType === "idCard") {
                    this.$set(this.resiDetailObj.baseInfoDto, "idNum", data.idNum);
                    this.showFlagIdCardBtn = !this.showFlagIdCardBtn;
                }
                this.showCheckPassword = false
            } else {
                this.$message.error(msg);
            }
        },



        // 婚姻状况字典
        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 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: {
        categoryDictText() {
            let text = "--";
            this.marriageArr.forEach((item) => {
                if (item.value == this.resiDetailObj.familyInfoDto.marriage) {
                    text = item.label;
                }
            });
            return text;
        },
        spouseText() {
            let text = "--";
            this.spouseArr.forEach((item) => {
                if (item.value == this.resiDetailObj.familyInfoDto.spouseSituation) {
                    text = item.label;
                }
            });
            return text;
        },
        nationalityText() {
            let text = "--";
            this.nationalityList.forEach((item) => {
                if (item.value == this.resiDetailObj.baseInfoDto.nationality) {
                    text = item.label;
                }
            });
            return text;
        },
        idTypeText() {
            let text = "--";
            this.idTypeList.forEach((item) => {
                if (item.value == this.resiDetailObj.baseInfoDto.idType) {
                    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>
