<template>
  <div id="index" @mouseover="mouseMove">
    <el-drawer title="选择保安员并发送信息" :visible.sync="sendMessageShow" :modal="false" direction="rtl" :destroy-on-close="true">
      <send-message :id="serviceInfo.id" @close="sendMessageShow = false">
        <template #default>
          <el-button @click="sendMessageShow = false">取消</el-button>
        </template>
      </send-message>
    </el-drawer>
    <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 type="primary" size="small" @click="back()">系统中心</el-button>
          </el-col>
          <el-col :span="8" class="one_2"> 保安服务集中监控系统 </el-col>
          <el-col :span="8" class="one_3">
            <el-button type="primary" size="small" v-if="rank == '2' || rank == '3'" @click="oneBack()">统计首页</el-button>
            <el-button type="primary" size="small" @click="toSendMessage()">发送消息</el-button>
          </el-col>
        </el-col>
        <el-col :span="24" class="two">
          <el-col :span="24" class="map">
            <map-1></map-1>
          </el-col>
          <el-col :span="8" class="info_1">
            <el-col :span="24" class="info_1one">
              <comapny-1 v-if="rank == '1'" @toCompany="toCompany"></comapny-1>
              <comapny-2 v-else-if="rank == '2' || rank == '3'" :typeInfo="typeInfo" @toCompanyInfo="toCompanyInfo"></comapny-2>
            </el-col>
            <el-col :span="24" class="info_1one animate__animated animate__fadeInLeft">
              <grade-1 :typeInfo="typeInfo" :companyInfo="companyInfo"></grade-1>
            </el-col>
            <el-col :span="24" class="info_1one animate__animated animate__fadeInUp">
              <warn-1 :typeInfo="typeInfo" :companyInfo="companyInfo" @toHistory="toHistory"></warn-1>
            </el-col>
          </el-col>
          <el-col :span="8" class="info_2">
            <el-col :span="24" class="info_2one animate__animated animate__zoomIn">
              <rank-one :rank="rank" :typeInfo="typeInfo" :companyInfo="companyInfo" :serviceInfo="serviceInfo"></rank-one>
            </el-col>
          </el-col>
          <el-col :span="8" class="info_3">
            <el-col :span="24" class="info_3one animate__animated animate__fadeInTopRight">
              <service-1 :service_show="service_show" :typeInfo="typeInfo" :companyInfo="companyInfo" @toService="toService" @back="oneBack()"></service-1>
            </el-col>
            <el-col :span="24" class="info_3one animate__animated animate__fadeInBottomRight">
              <region-1 :companyInfo="companyInfo" :typeInfo="typeInfo"></region-1>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog class="dialog" :title="dialog.title" :visible.sync="dialog.show" width="50%" :before-close="toClose" :close-on-click-modal="false">
      <history-1 v-if="dialog.type == '1'"></history-1>
    </el-dialog>
  </div>
</template>

<script>
import { EventBus } from './eventBus';
import map1 from './parts/map-1.vue';
import comapny1 from './parts/company-1.vue';
import comapny2 from './parts/company-2.vue';
import grade1 from './parts/grade-1.vue';
import warn1 from './parts/warn-1.vue';
import history1 from './parts/history-1.vue';
import rankOne from './parts/rank-one.vue';
import service1 from './parts/service-1.vue';
import region1 from './parts/region-1.vue';
import sendMessage from './parts/send-message.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const moment = require('moment');
export default {
  name: 'index',
  props: {},
  components: { history1, comapny1, comapny2, service1, region1, grade1, warn1, rankOne, map1, sendMessage }, //
  data: function () {
    return {
      // 当前时间
      time: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      // 层级
      rank: '1',
      // 企业类型信息
      typeInfo: {},
      // 企业信息
      companyInfo: {},
      // 服务对象信息
      serviceInfo: {},
      service_show: '1',
      sendMessageShow: false,
      // 弹框
      dialog: { title: '历史信息', show: false, type: '1' },
    };
  },
  created() {
    //先销毁所有总线事件
    this.destroyBus();
  },
  methods: {
    // 选择企业类型
    toCompany(data) {
      this.$set(this, `typeInfo`, data);
      this.$set(this, `rank`, '2');
      // 启动联动查询
      EventBus.$emit('toLinkage', { purpose: data.purpose_id });
      // 查类型下的企业,再用id查服务对象
      EventBus.$emit('dealCompany', { purpose_id: data.purpose_id });
    },
    // 选择企业
    toCompanyInfo(data) {
      this.$set(this, `companyInfo`, data);
      this.$set(this, `rank`, '3');
      // 启动联动查询
      EventBus.$emit('toLinkage', { company_id: data.id });
      // 查服务对象
      EventBus.$emit('dealCompanyInfo', { id: data.id });
    },
    // 点击服务对象
    toService(data) {
      this.$set(this, `serviceInfo`, data);
      this.$set(this, `service_show`, '2');
      // 启动联动查询, 此处是 rank-one的watch管理,不能用总线,用总线的话,需要改很多
      // EventBus.$emit('toLinkageMap', { company_id: data.id });
      // 查保安员的实时位置
      EventBus.$emit('dealService', { id: data.id });
    },
    // 历史信息
    toHistory() {
      this.dialog = { title: '历史信息', show: true, type: '1' };
    },
    // 关闭弹框
    toClose() {
      this.dialog = { show: false };
    },
    // 统计首页
    oneBack() {
      this.$set(this, `rank`, '1');
      this.$set(this, `typeInfo`, {});
      this.$set(this, `serviceInfo`, {});
      this.$set(this, `service_show`, '1');
      EventBus.$emit('backToInit', {});
    },
    // 返回
    back() {
      history.go(-1);
    },
    // 获取时间
    getTime() {
      this.time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
    },
    // 鼠标移动事件
    mouseMove() {
      // 此处写激活内容,执行后并给地图 重置定时任务的判断时间 重置
      EventBus.$emit('resetMapTime', moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
    },
    // 建立总线监听函数
    connectBus() {
      EventBus.$on('toCompany', (data) => {
        console.log('toCompany');
        this.toCompany(data);
      });
      EventBus.$on('toCompanyInfo', (data) => {
        console.log('toCompanyInfo');
        this.toCompanyInfo(data);
      });
      EventBus.$on('toService', (data) => {
        console.log('toService');
        this.toService(data);
      });
    },
    destroyBus() {
      EventBus.$off();
    },
    toSendMessage() {
      this.sendMessageShow = true;
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  mounted() {
    this.timer = setInterval(this.getTime, 1000);
    this.connectBus();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.destroyBus();
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background-color: #11145c !important;
  background: url('~@/assets/tg/bottom-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  overflow: hidden;
  .one {
    background: url('~@/assets/tg/l-topbg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    height: 5.36vw;
    z-index: 3;
    .one_1 {
      height: 5.36vw;
      span {
        display: inline-block;
        font-size: 3vmin;
        font-family: cursive;
        line-height: 5.36vw;
        padding: 0 0 0 30px;
        color: #31dafb;
        font-weight: bold;
      }
      .el-button {
        float: right;
        margin: 40px 90px 0 0;
        background-color: transparent;
        color: #31dafb;
      }
      .el-button:hover {
        color: #ffffff;
      }
    }
    .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: 5.36vw;
      .el-button {
        margin: 40px 0 0 90px;
        background-color: transparent;
        color: #31dafb;
      }
      .el-button:hover {
        color: #ffffff;
      }
    }
  }
  .two {
    position: relative;
    .info_1 {
      position: absolute;
      width: 22%;
      .info_1one {
        height: 13.6vw;
        background: url('~@/assets/tg/room-overview.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 0 1.5625vw 1.5625vw 1.5625vw;
        margin-bottom: 1.04vw;
      }
      .info_1one:last-child {
        margin: 0px !important;
      }
    }
    .info_2 {
      position: absolute;
      left: 23%;
      width: 51.9%;
      display: inline-block;
      vertical-align: top;
      margin: 0.04vw 1.04vw 0 1.04vw;
      .info_2one {
        height: 160px;
        overflow: hidden;
      }
    }
    .info_3 {
      position: absolute;
      right: 0;
      width: 22%;
      .info_3one {
        height: 21vw;
        background: url('~@/assets/tg/room-overview.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 0 1.5625vw 1.5625vw 1.5625vw;
        margin-bottom: 1.04vw;
      }
      .info_3one:last-child {
        margin: 0px !important;
      }
    }
  }
}
.dialog {
  /deep/.el-dialog__body {
    height: 540px;
    overflow-y: auto;
    padding: 10px;
  }
}

.list {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: fixed;
  top: 6.5rem;
  background-color: white;
  width: auto;
  min-width: 22rem;
  border-width: 0;
  right: 1rem;
  z-index: 999;
}
</style>
