<template>
    <div>
        <el-card class="box-card">
            <div class="title">
                巡访数量：
                <span style="color:#3a8ee6">{{num}}</span>&nbsp;
                <span style="color:#909399;">(注:最多显示15条)</span>
            </div>
        </el-card>
        <el-table
                class="table-record"
                :data="records"
                highlight-current-row
                v-loading="listLoading"
                @cell-click="mouseClick"
                :row-style="{height:'50px'}"
                :cell-style="{height:'50px'}"
        >
            <el-table-column align="center" prop="oldInfo" label="老人姓名"></el-table-column>
            <el-table-column
                    align="center"
                    prop="visitTime"
                    label="巡访时间"
                    sortable
                    :formatter="dateFormat"
            ></el-table-column>
        </el-table>
        <el-button class="lzm_bottom_button" type="primary" size="medium" @click="handleLast">返回</el-button>
    </div>
</template>

<script>
    import { listByNumber } from "../../api";
    import { mapMutations } from "vuex";
    import {decryptListData_ECB} from "@/api/tool/sm4";

    export default {
        name: "Login",
        data() {
            return {
                records: [],
                num: 0,
                listLoading: false,
                number: ""
            };
        },
        methods: {
            handleLast() {
                this.$router.replace("/dependant/message");
            },
            dateFormat(row, column) {
                const daterc = row[column.property];
                if (daterc != null) {
                    const dateMat = new Date(daterc);
                    const year = dateMat.getFullYear();
                    const month =
                        dateMat.getMonth() + 1 > 9
                            ? dateMat.getMonth() + 1
                            : "0" + (dateMat.getMonth() + 1);
                    const day =
                        dateMat.getDate() > 9 ? dateMat.getDate() : "0" + dateMat.getDate();
                    const hh =
                        dateMat.getHours() > 9
                            ? dateMat.getHours()
                            : "0" + dateMat.getHours();
                    const mm =
                        dateMat.getMinutes() > 9
                            ? dateMat.getMinutes()
                            : "0" + dateMat.getMinutes();
                    const ss =
                        dateMat.getSeconds() > 9
                            ? dateMat.getSeconds()
                            : "0" + dateMat.getSeconds();
                    const timeFormat =
                        year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
                    return timeFormat;
                }
            },
            mouseClick(row) {
                this.changeNumber(this.number);
                this.$router.replace("/dependant/details/" + row._id);
                //this.$router.replace("/dependant/details/"+row._id);
            },
            async loadList(number) {
                this.listLoading = true;
                let result = await listByNumber({ number: number });
                decryptListData_ECB(result.data,["oldInfo"])
                this.listLoading = false;
                console.log(result, "老人身份证单查说");
                if (result.code === 0) {
                    this.records = result.data;
                    this.num = result.data.length;
                }
            },
            ...mapMutations(["changeNumber"])
        },
        mounted() {
            let param = this.$route.params;
            this.number = param.id;
            this.loadList(param.id);
        }
    };
</script>


<style scoped>
    .title {
        font-size: 15px;
        color: #606266;
        margin-left: 3%;
        font-weight: bold;
    }

    .table-record >>> tbody tr td:first-child .cell {
        color: #3a8ee6;
    }
    .table-record >>> tbody tr td:last-child .cell {
        color: #909399;
    }

    .lzm_bottom_button {
        width: 80%;
        margin-left: 10%;
    }
    .box-card {
        border: 3px solid #ebeef5;
    }
    .box-card .el-card__body {
        padding: 10px;
    }
</style>
