<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 fontvw" @click="goUnlockRecordMethods">开锁记录</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box boxjc">
        <dv-scroll-board :config="config" style="width:22.12vw;height:19vw" v-if="devicestatus" @click="skipto" />
      </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>
    </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: [300, 200, 200, 300],
          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: {
      skipto(config){
        let type=""
        if(config.row[0]=='指纹'){
          type=1
        }else if(config.row[0]=='数字键盘'){
          type=2
        }else if(config.row[0]=='NFC'){
          type=3
        }else if(config.row[0]=='机械钥匙'){
          type=4
        }else if(config.row[0]=='蓝牙'){
          type=5
        }else if(config.row[0]=='NB'){
          type=6
        }else if(config.row[0]=='身份证'){
          type=7
        }else if(config.row[0]=='单机密码'){
          type=8
        }else if(config.row[0]=='人脸'){
          type=9
        }
        this.$router.push({
          name:"UnlockRecord",
          params:{
            datePicker:[moment().format("YYYY-MM-DD 00:00:00"),moment().format("YYYY-MM-DD HH:mm:ss")],
            type:type
          }
        })
      },
      // 跳转开锁记录
      goUnlockRecordMethods(){
        this.$router.push({
          name:"UnlockRecord",
          params:{
            datePicker:[moment().format("YYYY-MM-DD 00:00:00"),moment().format("YYYY-MM-DD HH:mm:ss")]
          }
        })
      },
      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 data1 = {
          start: parseInt(str1),
          end: parseInt(str)
        };
        httpGet(data1, 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.8vw;
    height: 22vw;
    min-width: 3.75rem;
    border-radius: 0.0625rem;

    .fontvw {
      font-size: 0.8vw;
    }
    .boxjc{
      cursor: pointer;
    }
    .boxjc>>>.dv-scroll-board .rows .row-item {
      font-size: 0.7vw;
    }

    .boxjc>>>.dv-scroll-board .header .header-item {
      font-size: 0.8vw;
    }

    .bg-color-black {
      height: 20.5vw;
      border-radius: 0.125rem;
    }

    .text {
      color: #c3cbde;
    }

    .body-box {
      border-radius: 0.125rem;
      margin-top: 0.2vw;
      overflow: hidden;
    }
  }

  .fs-xl {
    cursor: pointer;
  }
</style>
