<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one animate__animated animate__bounceIn">
          <el-col :span="8" class="one_1">
            <span>{{ time }}</span>
            <el-button size="mini" class="btn" @click="toBack()">系统中心</el-button>
          </el-col>
          <el-col :span="8" class="one_2">保安服务集中监控系统</el-col>
          <el-col :span="8" class="one_3">
            <el-button size="mini" class="btn">发送消息</el-button>
          </el-col>
        </el-col>
        <el-col :span="24" class="two animate__animated animate__zoomIn">
          <statis-num></statis-num>
        </el-col>
        <el-col :span="24" class="thr">
          <el-col :span="24" class="map"><map-1 :client="client"></map-1></el-col>
          <el-col :span="6" class="thr_1">
            <el-col :span="24" class="common left_1 animate__animated animate__fadeInDown">
              <top-1 title="企业类型"></top-1>
              <left-1></left-1>
            </el-col>
            <el-col :span="24" class="common left_2 animate__animated animate__fadeInUp">
              <top-1 title="职业等级"></top-1>
              <left-2></left-2>
            </el-col>
          </el-col>
          <el-col :span="6" class="thr_1 thr_3">
            <el-col :span="24" class="common right_1 animate__animated animate__fadeInTopRight">
              <top-1 title="服务对象"></top-1>
              <right-1></right-1>
            </el-col>
            <el-col :span="24" class="common right_2 animate__animated animate__fadeInBottomRight">
              <top-1 title="服务区域"></top-1>
              <right-2></right-2>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const moment = require('moment');
export default {
  name: 'index',
  props: {},
  components: {
    statisNum: () => import('./parts/statis-num.vue'),
    map1: () => import('./parts/map-1.vue'),
    top1: () => import('./parts/top-1.vue'),
    left1: () => import('./parts/left-1.vue'),
    left2: () => import('./parts/left-2.vue'),
    right1: () => import('./parts/right-1.vue'),
    right2: () => import('./parts/right-2.vue'),
  },
  data: function () {
    return {
      time: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      client: {},
    };
  },
  created() {
    let data = {
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
      width: window.screen.width,
      height: window.screen.height,
      availWidth: window.screen.availWidth,
      availHeight: window.screen.availHeight,
    };
    this.$set(this, `client`, data);
  },
  methods: {
    getTime() {
      this.time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
    },
    // 返回系统中心
    toBack() {
      window.history.go('-1');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.timer = setInterval(this.getTime, 1000);
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background: url('~@a/statis-four/bottom-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .one {
    height: 100px;
    overflow: hidden;
    background: url('~@a/statis-four/l-topbg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 0 15px 0;
    .one_1 {
      height: 100px;
      line-height: 150px;
      span {
        display: inline-block;
        font-size: 3vmin;
        font-family: cursive;
        line-height: 5.36vw;
        padding: 0 0 0 25%;
        color: #31dafb;
        font-weight: bold;
      }
      .btn {
        float: right;
        margin: 9% 5% 0 0px;
      }
    }
    .one_2 {
      text-align: center;
      font-family: fzzuhjt;
      font-size: 3.5vmin;
      line-height: 4.6875vw;
      overflow: hidden;
      color: #ffffff;
      text-shadow: 0 3px 3px #1872ec;
    }
    .one_3 {
      height: 100px;
      line-height: 150px;
      padding: 0 0 0 1.6%;
    }
    .btn {
      background: transparent;
      border-radius: 12px;
      color: #fff;
      padding: 8px 20px;
      font-weight: bold;
      border: 1px solid #409eff;
    }
  }
  .two {
    margin: 0 0 15px 0;
  }
  .thr {
    padding: 0 20px;
    .thr_1 {
      position: absolute;
      .common {
        height: 19.4vw;
        margin: 0 0 10px 0;
        box-shadow: 0 0 1px #f1f1f1;
        // padding: 0 5px;
        // border: 1px solid #f1f1f1;
        // border-radius: 5px;
      }
    }
    .thr_3 {
      right: 20px;
    }
  }
}
</style>
