<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-line"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" >开锁记录</span>
          <!-- @click="logdialog" -->
        </div>
      </div>
      <div class="d-flex jc-center body-box" >
        <dv-scroll-board :config="config" style="width:7.5rem;height:5.6rem" v-if="devicestatus" />
      </div>
    </div>
    <el-dialog
      title="开锁记录"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      height="600"
      width="60%"
      class="dialog"
    >
      <el-table :data="logList" stripe style="width: 100%" height="500">
        <el-table-column prop="deviceNum" label="设备号" width="250">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="userTelephone" label="账号" width="180">
        </el-table-column>
        <el-table-column prop="roomName" label="房间号"> </el-table-column>
        <el-table-column label="开锁方式">
          <template #default="scope">
            <span v-if="scope.row.openType==1">指纹开锁</span>
            <span v-if="scope.row.openType==2">数字键盘开锁</span>
            <span v-if="scope.row.openType==3">NFC开锁</span>
            <span v-if="scope.row.openType==4">机械钥匙开锁</span>
            <span v-if="scope.row.openType==5">蓝牙开锁</span>
            <span v-if="scope.row.openType==6">NB开锁</span>
            <span v-if="scope.row.openType==7">身份证</span>
            <span v-if="scope.row.openType==8">单机密码开锁</span>
            <span v-if="scope.row.openType==9">人脸开锁</span>
          </template>
</el-table-column>
<el-table-column prop="openTime" label="开锁时间" width="250"> </el-table-column>
</el-table>
<!-- <div class="paging"> <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10,20,50,100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="leavetotal">
    </el-pagination></div> -->
</el-dialog>
</div>
</template>

<script>
    import {
        httpGet,
        httpPost
    } from "../../api";
    import moment from "moment";
    export default {
        data() {
            return {
                config: {
                    header: ["开锁方式", "开锁次数", "开锁人数", "开锁时间"],
                    data: [
                        ["", "", "", ""],
                    ],
                    rowNum: 8, //表格行数
                    headerHeight: 35,
                    headerBGC: "#0f1325", //表头
                    oddRowBGC: "#0f1325", //奇数行
                    evenRowBGC: "#171c33", //偶数行
                    index: false,
                    columnWidth: [200, 200, 200, 200],
                    align: ["center"]
                },
                devicestatus: true,
                dialogVisible: false,
                logList: [],
                openlist: [{
                    openType: 1,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 2,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 3,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 4,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 5,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 6,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 7,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 8,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, {
                    openType: 9,
                    name: '',
                    total: 0,
                    num: 0,
                    time: moment().format('YYYY-MM-DD')
                }, ]
            };
        },
        components: {},
        created() {
            httpGet('', this.$api.getOpenRecordList).then(res => {})
        },
        mounted() {
            this.getcard()
        },
        methods: {
            logdialog() {
                this.dialogVisible = true
            },
            timestampToTime(cjsj) {
                if (cjsj.toString().length == 10) {
                    cjsj = cjsj * 1000
                }
                var date = new Date(cjsj); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + "-";
                var M =
                    (date.getMonth() + 1 < 10 ?
                        "0" + (date.getMonth() + 1) :
                        date.getMonth() + 1) + "-";
                var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
                var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
                var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
                var s = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
                return Y + M + D + h + m + s;
            },
            getcard() {
                var that = this
                var str = (new Date()).getTime() / 1000
                var str1 = new Date(new Date().toLocaleDateString()).getTime() / 1000
                var data = {
                    start: parseInt(str1),
                    end: parseInt(str)
                };
                httpGet(data, this.$api.orderLockOpen).then((res) => {
                    var data = []

                    res.data.map((li, index) => {
                        li['num'] = 0
                    })
                    var openlist = this.openlist
                    this.hbFun(res.data, function(data1) {
                        data1.forEach((ll, index) => {
                            openlist[ll.openType] = ll
                        })
                        openlist.map((li, index) => {
                            var str = ""
                            switch (li.openType) {
                                case 1:
                                    str = "指纹开锁";
                                    break;
                                case 2:
                                    str = "数字键盘开锁";
                                    break;
                                case 3:
                                    str = "NFC开锁";
                                    break;
                                case 4:
                                    str = "机械钥匙开锁";
                                    break;
                                case 5:
                                    str = "蓝牙开锁";
                                    break;
                                case 6:
                                    str = "NB开锁";
                                    break;
                                case 7:
                                    str = "身份证";
                                    break;
                                case 8:
                                    str = "单机密码开锁";
                                    break;
                                case 9:
                                    str = "人脸开锁";
                                    break;
                                default:
                                    break;
                            }
                            var str1 = [str, li.total, li.num, li.time]
                            data.push(str1)
                        })
                        data.splice(0, 1)
                        that.devicestatus = false
                        that.$nextTick(() => {
                            that.config.data = data
                            that.logList = res.data.list
                            that.devicestatus = true
                        })
                    })

                })
            },
            hbFun(arrayName, callback) {
                var idArray = [];
                var newAarray = [];
                arrayName.forEach(function(ele, i) {
                    if (idArray.indexOf(arrayName[i].openType) === -1) {
                        var num = arrayName[i].num + 1
                        newAarray.push({
                            'openType': arrayName[i].openType,
                            'name': arrayName[i].name,
                            'total': arrayName[i].total,
                            'num': num,
                            'time': moment().format('YYYY-MM-DD')
                        })
                        idArray.push(arrayName[i].openType);
                    } else {
                        newAarray.forEach(function(dom, k) {
                            if (newAarray[k].openType == arrayName[i].openType) { //把具有相同id的course值进行合并
                                var num = parseInt(newAarray[k].total)
                                var num1 = parseInt(arrayName[i].total)
                                newAarray[k].total = num + num1
                                newAarray[k].num += 1
                            }
                        })

                    }
                })
                callback(newAarray)
            }
        }
    };
</script>

<style lang="scss" scoped>
    #centerRight1 {
        padding: 0.2rem;
        height: 5.125rem;
        min-width: 3.75rem;
        border-radius: 0.0625rem;
        .bg-color-black {
            /* height: 7rem; */
            border-radius: 0.125rem;
        }
        .text {
            color: #c3cbde;
        }
        .body-box {
            border-radius: 0.125rem;
            overflow: hidden;
        }
    }
    
    .fs-xl {
        cursor: pointer;
    }
</style>