<template>
    <div>
        <el-image class="photo" :src="require('../../assets/bg_main_new5.jpg')" />
        <div class="title">
            <div>巡访住户老人</div>
            <div style="font-size: 2px; margin-top: 8%;">VISITING&nbsp;ELDERLY&nbsp;PEOPLE</div>
        </div>
        <el-table
                :row-style="{height:'60px'}"
                :cell-style="{height:'60px'}"
                :data="records"
                highlight-current-row
                @cell-click="mouseClick"
                class="table-record"
        >
            <el-table-column prop="name" label="老人姓名" align="center"></el-table-column>
            <el-table-column prop="idNumber" label="老人身份证" align="center"></el-table-column>
        </el-table>
        <div class="lzm_bottom">
            <el-button class="lzm_bottom_button" type="primary" size="medium" @click="out">解绑账号</el-button>
        </div>
    </div>
</template>

<script>
    import { detailsOut, detailsCheck, listByFid } from "../../api";
    import {decryptListData_ECB} from "@/api/tool/sm4";

    export default {
        name: "Login",
        data() {
            return {
                records: []
            };
        },
        methods: {
            mouseClick(row) {
                this.$router.replace("/dependant/OldsInfo/" + row.idNumber);
                //this.$router.replace("/dependant/details/"+row._id);
            },
            async loadList(fid) {
                console.log(fid);
                let result = await listByFid({ fid: fid });
                decryptListData_ECB(result.data,["name","idNumber"])
                console.log(result, "一户人");
                if (result.code === 0) {
                    this.records = result.data;
                }
            },
            async detailsOut1(fid, openId) {
                let result = await detailsOut({ fid: fid, openId: openId });
                if (result.code === 0) {
                    this.$message.success("解绑成功");
                    this.$router.replace("/dependant/login");
                }
            },

            out() {
                this.check();
            },
            async check() {
                let result = await detailsCheck({
                    openId: window.localStorage.getItem("openId")
                });
                console.log(result);
                if (result.code === 0) {
                    this.detailsOut1(
                        result.data._id,
                        window.localStorage.getItem("openId")
                    );
                    window.localStorage.clear();
                    // this.detailsOut1(fid,openId);
                }
            },
            async check1() {
                let result = await detailsCheck({
                    openId: window.localStorage.getItem("openId")
                });
                if (result.code === 0) {
                    this.loadList(result.data._id);
                }
            }
        },
        mounted() {
            this.check1();
        }
    };
</script>


<style scoped>
    .table-record >>> tbody .cell {
        color: #7abdff;
    }
    .table-record {
        font-size: 15px;
    }
    .title {
        position: absolute;
        top: 10%;
        left: 30%;
        text-align: center;
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        opacity: 0.8;
    }
    .photo {
        height: 180px;
    }
    .lzm_bottom {
        z-index: 10;
        background: #fff;
        width: 100%;
        padding: 15px 0;
        text-align: center;
        position: fixed;
        left: 0;
        bottom: 2%;
    }
    .lzm_bottom_button {
        width: 80%;
        height: 45px;
    }
</style>
