<template>
  <div>
    <el-row :gutter="20" class="elrow">
      <el-col :span="9">
        <el-card shadow="hover" class="" style="">
          <el-row :gutter="20" class="">
            <el-col :span="12" class="">
              <div class="grid-content grid-con-1">
                <img src="../assets/img/mszsbg.png" class="imgbg" alt="" />
                <div class="colposition">
                  <img src="../assets/img/mszs.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>门锁总数</div>
                    <div class="grid-num">{{sumRoom.device}} <span>把</span></div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="">
              <div class="grid-content grid-con-2">
                <img src="../assets/img/syrsbg.png" class="imgbg" alt="" />
                <div class="colposition">
                  <img src="../assets/img/syrs.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>使用人数</div>
                    <div class="grid-num">{{sumRoom.tenant}} <span>人</span></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card shadow="hover" class="" style="">
          <el-row :gutter="20" class="">
            <el-col :span="12" class="">
              <div class="grid-content grid-con-1">
                <img src="../assets/img/mslxslbg.png" class="imgbg" alt="" />
                <div class="colposition">
                  <img src="../assets/img/mslxsl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>门锁离线数量</div>
                    <div class="grid-num">{{sumRoom.offline}} <span>把</span></div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="">
              <div class="grid-content grid-con-2">
                <img src="../assets/img/fjslbg.png" class="imgbg" alt="" />
                <div class="colposition">
                  <img src="../assets/img/fjsl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>房间数量</div>
                    <div class="grid-num">{{sumRoom.room}} <span>间</span></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="" style="">
          <el-row :gutter="20" class="">
            <el-col :span="24">
              <div class="grid-content grid-con-1 blkmqx">
                <img src="../assets/img/blkmqx.png" class="w100" alt="" />
                <div class="grid-cont-right">
                  <div>办理开门权限</div>
                  <div class="grid-num">立即前往>></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="elrow">
      <el-col :span="9">
        <el-card shadow="hover">
          <schart v-if="Chart"
            ref="bar"
            class="schart"
            canvasId="bar"
            :options="options"
            style="height:3.78rem;"
          ></schart>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card shadow="hover">
          <schart
            ref="line"
            class="schart"
            canvasId="line"
            :options="options2"
            style="height:3.78rem;"
          ></schart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="elTitle" @click="tgces">门锁开门记录统计</div>
          <dv-scroll-board :config="config" style="width:4.375rem;height:3.48rem" class="dvboard" v-if="devicestatus" />
          <!-- <div class="elth">
            <span>开锁位置</span>
            <span>开锁人员</span>
            <span>开锁方式</span>
            <span>开锁状态</span>
          </div>
          <div class="bs-sysMsg" v-if="systemMsg.length > 0">
            <div class="msg__content" :class="{ animate: animate == true }">
              <div
                class="elth elthsecond"
                v-for="(item, index) in tableData"
                :key="index"
              >
                <span>{{ item.date }}</span>
                <span>{{ item.t1 }}</span>
                <span>{{ item.t2 }}</span>
                <span>{{ item.t3 }}</span>
              </div>
            </div> 
            <el-carousel height="228px" direction="vertical" :autoplay="true">
              <el-carousel-item>
                <div v-for="(item,index) in tableData" :key="index">
                  <span>{{ item.date }}</span>
                  <span>{{ item.t1 }}</span>
                  <span>{{ item.t2 }}</span>
                  <span>{{ item.t3 }}</span>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div v-for="(item,index) in tableData" :key="index">
                  <span>{{ item.date }}</span>
                  <span>{{ item.t1 }}</span>
                  <span>{{ item.t2 }}</span>
                  <span>{{ item.t3 }}</span>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div  v-for="(item,index) in tableData" :key="index">
                <span>{{ item.date }}</span>
                <span>{{ item.t1 }}</span>
                <span>{{ item.t2 }}</span>
                <span>{{ item.t3 }}</span>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div> -->
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <schart
            ref="line"
            class="schart"
            canvasId="line1"
            :options="options3"
          ></schart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Schart from "vue-schart";
import { httpGet, httpPost, download } from "../api";
// import scrollvue from "../components/scrollvue"
export default {
  name: "dashboard",
  data() {
    return {
      config: {
        header: ["设备号", "用户电话", "开锁方式","开锁时间"],
        data: [
          ["", "", "",""],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: "#fff", //表头
        oddRowBGC: "#fff", //奇数行
        evenRowBGC: "#fff", //偶数行
        index: false,
        columnWidth: [400,400,400,400],
        align: ["center"]
      },
      devicestatus:true,
      animate: false,
      name: localStorage.getItem("ms_username"),
      tableData: [
        {
          date: "1郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
        {
          date: "2郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
        {
          date: "3郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
        {
          date: "4郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
        {
          date: "5郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
        {
          date: "6郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
        {
          date: "7郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
        {
          date: "8郑州大学人才公寓/3号楼/2单元/4层",
          t1: "测试1",
          t2: "指纹",
          t3: "开锁成功",
        },
      ],
      // 滚屏消息
      systemMsg: [
        { id: 1, title: "入主白宫近10日 拜登做了10件大事" },
        { id: 2, title: "全民带货？小红书外链淘宝权限将大范围开放" },
        { id: 3, title: "贾跃亭FF将在纳斯达克上市 股票代码为FFIE" },
        {
          id: 4,
          title: "全民带货？小红书外链淘宝权限将大范围开放 股票代码为FFIE",
        },
        {
          id: 5,
          title: "全民带货？小红书外链淘宝权限将大范围开放 股票代码为FFIE",
        },
        { id: 6, title: "贾跃亭FF将在纳斯达克上市 股票代码为FFIE" },
        {
          id: 7,
          title: "全民带货？小红书外链淘宝权限将大范围开放 股票代码为FFIE",
        },
        { id: 8, title: "贾跃亭FF将在纳斯达克上市 股票代码为FFIE" },
        {
          id: 9,
          title: "全民带货？小红书外链淘宝权限将大范围开放 股票代码为FFIE",
        },
        { id: 10, title: "贾跃亭FF将在纳斯达克上市 股票代码为FFIE" },
      ],
      data: [
        {
          name: "2018/09/04",
          value: 1083,
        },
        {
          name: "2018/09/05",
          value: 941,
        },
        {
          name: "2018/09/06",
          value: 1139,
        },
        {
          name: "2018/09/07",
          value: 816,
        },
        {
          name: "2018/09/08",
          value: 327,
        },
        {
          name: "2018/09/09",
          value: 228,
        },
        {
          name: "2018/09/10",
          value: 1065,
        },
      ],
      options: {
        type: "bar",
        title: {
          text: "空房统计",
        },
        xRorate: 25,
        labels: ["1月", "2月", "三月", "4月", "5月",'6月','7月','8月','9月','10月','11月','12月'],
        datasets: [
          {
            label: "空房数量",
            data: [0,0,0,0,0,0,0,0,0,0,0,0],
          },
        ],
      },
      options2: {
        type: "line",
        title: {
          text: "账号异常报警",
        },
        labels: ["6月", "7月", "8月", "9月", "10月"],
        datasets: [
          {
            label: "无开锁记录",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "未激活账号",
            data: [164, 178, 150, 135, 160],
          },
          // {
          //   label: "低电异常",
          //   data: [74, 118, 200, 235, 90],
          // },
        ],
      },
      options3: {
        type: "line",
        title: {
          text: "空房数量预警",
        },
        labels: ["2020-06", "2020-07", "2020-08", "2020-09", "2020-10"],
        datasets: [
          {
            label: "人数",
            data: [234, 278, 270, 190, 230],
          },
        ],
      },
      items: [],
      pageTotal:0,
      sumRoom:0,
      online:0,
      unonline:0,

      Chart:true
    };
  },
  components: {
    Schart,
    // scrollvue
  },
  created(){    
    // this.getdevice();
    this.getvacancy()//查询空房统计
    // this.selectlist()
    this.getcount()//查询门锁、使用人数、门锁离线、房间数量统计
    this.getcard()
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  mounted() {
    // setInterval(this.scroll, 1000);
  },
  methods: {
    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() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    getcard(){
      var data1={
        code:"lockOpenRecord/list",
        data:{
          pageNum:1,
          pageSize:100          
        }
      }    
      httpPost(data1,this.$api.sendCommand).then(res=>{
        var data=[]
        res.data.list.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;
          }
          li.openTime=this.timestampToTime(li.openTime)
          var str=[li.deviceNum,li.userTelephone,str,li.openTime]
          data.push(str)
        })
        this.devicestatus=false
        this.$nextTick(()=>{
          this.config.data=data
          this.devicestatus=true
        })
      })
    },
    // 查询使用人数    
    getcount(){
      var data={
        type:5
      }
      httpGet(data,this.$api.getStatisticsTotal).then(res=>{
        this.sumRoom=res.data[0]
      })
    },
    // 查询副将数量
    selectlist(){
      var q={
        type:5
      }
      var data={
        q:JSON.stringify(q),
        pageNum:1,
        pageSize:1
      }
      httpGet(data,this.$api.getSiteList).then(res=>{
        this.sumRoom = res.data.list.total;
      })
    },
    // 查询空房总数
    getvacancy(){
      var data={
        level:2, //0-天、1-周、2-月、3-季、4-年
        type:5
      }
      httpGet(data,this.$api.getStatisticsVacancy).then(res=>{
        var option=this.options.datasets[0].data
        res.data.map(li=>{
          var index=parseInt(li.order)-1
          option[index]=li.count
        })
        this.Chart=false
        this.$nextTick(function(){
          this.options.datasets[0].data = option
          this.Chart=true
        })
      })
    },
    getdevice() {
      var data = {};
      httpGet(data, this.$api.getDeviceList).then((res) => {
        var online=0,unonline=0
        res.data.list.map((li) => {
          if(li.isOnline == 1){
            online++
          }else if(li.isOnline == 0){
            unonline++
          }
        });
        this.online = online
        this.unonline = unonline
        this.pageTotal = res.data.total;
      });
    },
    tgces() {
      this.$router.push({
        path: "/test",
      });
    },
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.tableData.push(this.tableData[0]); // 将数组的第一个元素添加到数组的
        this.tableData.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 500);
    },
    changeDate() {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${
          date.getMonth() + 1
        }/${date.getDate()}`;
      });
    },
  },
};
</script>

<style scoped>
.elrow {
  margin-bottom: 20px;
}

.grid-content {
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  height: 120px;
  overflow: hidden;
}
/* 加的 */
.colposition {
  display: flex;
  align-items: center;
  height: 85%;
  position: relative;
  box-sizing: border-box;
  margin: 10px;
  padding: 0 10px;
  border: 2px solid hsla(0, 0%, 100%, 0.2);
  width: 100%;
}
/* .el-carousel .el-carousel__item{height: 40px;line-height: 40px;} */
.grid-cont-right {
  flex: 1;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  /* color: rgb(45, 140, 240); */
  color: #fff;
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  /* color: rgb(45, 140, 240); */
  color: #fff;
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}
.imgbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.todo-item {
  font-size: 14px;
}
.grid-num > span {
  font-size: 16px;
  font-weight: 500;
}
.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.blkmqx {
  display: block;
  cursor: pointer;
}
.blkmqx .w100 {
  display: block;
  margin: 0 auto;
  width: 20%;
}
.blkmqx .grid-cont-right {
  color: #333;
  text-align: center;
  margin: 8px 0 3px;
}
.blkmqx .grid-num {
  color: #888;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
}
/*轮翻消息*/
.el-card__body {
  box-sizing: border-box;
}
.elTitle {
  font-weight: 600;
  color: #666;
  text-align: center;
  margin-bottom: 10px;
}
.bs-sysMsg {
  height: 228px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.bs-sysMsg span {
  width: 20%;
  display: inline-block;
  text-align: center;
  padding: 10px 0;
  box-sizing: border-box;
  vertical-align: middle;
}
.bs-sysMsg span:nth-child(1) {
  font-size: 12px;
  width: 35%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.msg__content {
  height: auto;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.elth {
  padding: 10px 0;
  border-bottom: 1px solid #f1f2f3;
}
.elth span {
  width: 20%;
  text-align: center;
  display: inline-block;
}
.elth span:first-child {
  width: 35%;
}
.elthsecond span {
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
::-webkit-scrollbar {
  display: none !important;
}
.animate {
  transition: all 1s;
  top: -30px;
}
.dvboard >>> .header{color: #333;font-size: 12px;font-weight:bold;border-bottom:1px solid #f1f2f3}
.dvboard >>> .rows .row-item{color: #333;font-size: 12px;}
</style>
