<template>
  <div class="screen-wrapper">
    <div class="map-module">
      <div
        v-loading="loading"
        element-loading-text="地图加载中.."
        element-loading-background="rgba(11, 23, 49, 1)"
        class="patrol-and-rescue"
      >
        <MainMap
          ref="mainMap"
          :defaultOptions="defaultOptions"
          @onLoad="mapLoad"
          @openEventDialog="openEventDialog"
          @openVideoDialog="openVideoDialog"
          @stationList="stationList"
          @patrolStationList="patrolStationList"
          @markerClick="markerClick"
        />
      </div>
    </div>
    <div class="screen-mask"></div>
    <div class="header-wrapper">
      <div class="header-search-section">
        <roadCascader
          class="road-cascader"
          :getOrgId="true"
          :searchCompany="false"
          :showAllLevels="false"
          :fullPath="fullPath"
          @lastPath="changeOrg"
        ></roadCascader>
        <el-date-picker
          type="month"
          class="date-picker"
          value-format="yyyy-MM"
          :clearable="false"
          v-model="dateMonth"
          @change="changeDate"
        ></el-date-picker>
      </div>
      <div class="logn-section">
        <img
          class="logo"
          src="@/assets/img/bigScreen/tiejian-logo.png"
          alt=""
        />
        <div class="head-title">铁建高速</div>
      </div>
      <div class="header-operate-section">
        <div class="system-section" @click="handleSystem">工作台</div>
        <div class="time-section">
          <img :src="require('@/assets/img/bigScreen/header-time.png')" />
          <span> {{ timenow }}</span>
        </div>
        <div class="logout-section" @click="handleLogout">
          <img :src="require('@/assets/img/bigScreen/logout.png')" />
          <span>退出登录</span>
        </div>
      </div>
    </div>
    <div class="section-left-wrapper">
      <basic class="basic-info"></basic>
      <inspection-statistics
        class="inspection-statistics"
      ></inspection-statistics>
    </div>
    <div class="section-right-wrapper">
      <task-statistics class="task-statistics"></task-statistics>
      <event-type class="event-type"></event-type>
    </div>
    <map-control class="map-control"></map-control>
    <marker-dialog ref="infoDialog"></marker-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import * as echarts from 'echarts'
import MainMap from '@/components/MineMap/index.vue'
import basic from './components/basic'
import inspectionStatistics from './components/inspectionStatistics'
import taskStatistics from './components/taskStatistics'
import eventType from './components/eventType'
import mapControl from './components/mapControl'
import markerDialog from './components/markerDialog'

export default {
  components: {
    MainMap,
    basic,
    inspectionStatistics,
    taskStatistics,
    eventType,
    mapControl,
    markerDialog,
  },
  data() {
    return {
      dateMonth: moment().format('YYYY-MM'),
      daynow: '',
      timer: null, // 头部时间计时器
      timenow: '',
      fullPath: ['1766017468444450816'], // 路段级联数据
      loading: true,
      map: null,
      defaultOptions: {
        center: [107.85585, 28.465908] /*地图中心点*/,
      },
    }
  },
  mounted() {
    this.getTimeNow()
  },
  methods: {
    // 路段级联搜索
    changeOrg(lastPath, orgIds) {
      this.querys.orgId = lastPath
      this.querys.roadIds = orgIds
      //   this.loadData()
    },
    changeDate() {
      //   this.loadData()
    },

    stopAutoScroll() {
      this.isScrolling = false
      if (this.rafId !== null) {
        cancelAnimationFrame(this.rafId)
        this.rafId = null
      }
    },
    handleMouseWheel(event) {
      this.stopAutoScroll() // 鼠标滚轮滚动时停止自动滚动
      const scrollContainer = this.$refs.scrollableList
      scrollContainer.scrollTop += event.deltaY // 使用 deltaY 来确定滚动方向
    },
    markerClick(marker) {
      const {type, data} = marker
      this.$refs.infoDialog.show(type, data)
    },
    // 地图挂载后
    mapLoad(map) {
      this.map = map
      this.loading = false
    },
    //事件详情打开
    openEventDialog() {
      this.detailVisible = true
    },
    openVideoDialog(val) {
      this.itemMap = true
    },
    // 打开救援驻点信息
    stationList(val) {
      this.stationInofo = val
      this.stationInfoVisible = true
    },
    //打开巡查驻点弹窗
    patrolStationList(val) {
      this.patrolStationListInfo = val
      this.patrolStationInfoVisible = true
    },

    // 实时获取时间
    getTimeNow() {
      this.daynow = moment().format('YYYY年MM月DD日')
      this.timenow = moment().format('HH:mm:ss')
      this.timer = setInterval(() => {
        this.timenow = moment().format('HH:mm:ss')
      }, 1000)
    },

    // 业务系统
    handleSystem() {
      this.$store.dispatch('menu/actionFrontMenus').then((res) => {
        if (!res || !res.length) {
          this.$message.warning('抱歉！您尚无可访问页面，请联系管理员添加！')
        } else {
          // 此段逻辑为调整工作台页面
          // 递归查询菜单树形结构中children第一项的最底层的调整路径
          let {children} = res && res.find((i) => i.alias === 'normal')
          const getPath = (treeData, path = '') => {
            if (
              Array.isArray(treeData[0].children) &&
              treeData[0].children.length
            ) {
              path += `/${treeData[0].alias}`
              return getPath(treeData[0].children, path)
            } else {
              return path + `/${treeData[0].alias}`
            }
          }
          this.$router.push(getPath(children, '/platLayout'))
        }
      })
    },

    // 退出登录
    handleLogout() {
      this.$store.dispatch('menu/clearMenus')
      this.$store.dispatch('user/clearUser')
      this.$store.dispatch('menu/setCopyMenus', [])
      let loginRouthPath =
        localStorage.getItem(
          this.$store.state.login.currentUser.account + 'loginRoutePath'
        ) || '/login'
      this.$store.dispatch('login/logoutAndCleanUp').then(() => {
        switch (window.ssoConfig.mode) {
          case 'cas':
          case 'oauth':
            window.sessionStorage.removeItem('currentUser')
            window.location.href =
              window.ssoConfig.logout +
              '?service=' +
              window.location.href.split('?')[0]
            break
          default:
            this.$router.push({
              path: loginRouthPath,
            })
            break
        }
      })
    },
    clear() {
      this.timer && clearInterval(this.timer)
      //   clearInterval(this.timerPie)
      //   clearInterval(this.publishTimer)
      //   clearInterval(this.newcomerTimer)
    },
  },
  beforeDestroy() {
    // 当组件销毁时停止滚动
    this.isScrolling = false
    this.clear()
  },
}
</script>

<style scoped lang="scss">
@import './css/bigScreen.scss';

</style>
