<template>
  <div class="company-home">
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <div class="company-content">
      <div class="area-content">
        <div class="left-area">
          <!-- 矿井通风状态监测 -->
          <div class="area-card">
            <mineWind :airKjStatus="airKjStatus" />
          </div>
          <!-- 一通三防风险分析与预警 -->
          <div class="area-card1">
            <riskWarn :earlyWarn="earlyWarn" />
          </div>
        </div>
        <div class="center-area">
          <!-- 地图底图 -->
          <div class="center-bg">
            <div class="bg-map">
              <iconLight @show-detail="showDetail" :warningList="warningList" />
            </div>
          </div>
          <!-- 榆家梁矿 -->
          <!-- <div class="area-card2">
            
          </div> -->
          <!-- 通风巷道长度统计，原文件共享中心 -->
          <div class="area-card3">
            <windRoad :roadData="roadData" />
            <!-- <fileShare :shareData="shareData" /> -->
          </div>
        </div>
        <div class="right-area">
          <!-- 关键场景通防综合监测 -->
          <div class="area-card">
            <sceneKey :compositeData="compositeData" />
          </div>
          <!-- 原通风巷道长度统计（wind-road.vue） -->
          <div class="area-card1">
            <BillboardEntry />
            <!-- <windRoad :roadData="roadData" /> -->
          </div>
        </div>
      </div>
    </div>
    <div class="area-card2" v-show="isShowDialog">
      <dialogModal ref="dialogModalRef" @close-dialog="closeDialog" :title="dialogTitle" :centerDetail="centerDetail" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, onUnmounted } from 'vue';
import mineWind from './components/mine-wind.vue';
import riskWarn from './components/risk-warn.vue';
// import fileShare from './components/file-share.vue';
import BillboardEntry from './components/billboard-entry.vue';
import windRoad from './components/wind-road-middle.vue';
import sceneKey from './components/scene-key.vue';
import iconLight from './components/icon-light.vue';
import dialogModal from './components/dialog-modal.vue';
import { getHomeData, getList } from './clique.api';
const dialogModalRef = ref();
let mainTitle = ref('国能神东一通三防管控平台');
// let mainTitle = ref('国家能源神东煤炭集团');
// let mainTitle = ref('XXXX集团');
const isShowDialog = ref(false);
const dialogTitle = ref('');

//矿井通风状态数据
let airKjStatus = reactive<any[]>([]);

//风险分析与预警数据
let earlyWarn = ref<any[]>([]);

//通防综合监测数据
let compositeData = ref<any[]>([]);

//地图区域详情数据
let centerDetail = ref({});

//文件共享中心数据
let shareData = reactive<any[]>([]);

let warningList = ref([]);

//通风巷道长度统计数据
let roadData = reactive({
  totallength: 0,
  data: [],
  data1: [],
});

let orgcode = ref('');

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor() {
  timer = setTimeout(async () => {
    await getHomeDataList();
    await getLists();
    if (timer) {
      timer = null;
    }
    getMonitor();
  }, 10000);
}

//获取公司端首页数据
async function getHomeDataList() {
  let res = await getHomeData();
  console.log(res, '公司端首页数据----------');
  if (res && res.length > 0) {
    earlyWarn.value = res;
    roadData.totallength = res.reduce((len, r) => {
      return r.sys_data ? len + r.sys_data.totallength : len;
    }, 0);
    roadData.data.length = 0;
    roadData.data1.length = 0;
    airKjStatus.length = 0;
    const warningListTemp: { orgcode: string; isWarning: boolean }[] = [];
    res.forEach((el) => {
      airKjStatus.push({
        deviceName: el.sys_data.deviceName,
        jf: el.sys_data.zongjinfeng,
        xf: el.sys_data.xufengliang,
        hf: el.sys_data.zonghuifeng,
        isWarning: el.sys_data.zongjinfeng < el.sys_data.xufengliang,
      });

      //临时添加，前端判断，后期后端加上预警再处理
      if (el.sys_data.zongjinfeng < el.sys_data.xufengliang) {
        warningListTemp.push({ orgcode: el.orgcode, isWarning: true });
      } else {
        warningListTemp.push({ orgcode: el.orgcode, isWarning: false });
      }

      roadData.data.push(el.sys_data.flength);
      // roadData.data.push(el.sys_data.totallength);
      roadData.data1.push(el.sys_data.deviceName);
    });
    warningList.value = warningListTemp;
    compositeData.value = res.reduce((arr, e) => {
      return [...arr, ...e.majorpath_data];
    }, []);

    let centerDetail = res.filter((v) => v.orgcode == orgcode.value)[0];
    if (centerDetail.majorpath_data.length != 0 || JSON.stringify(centerDetail.sys_data) != '{}') {
      centerDetail.value = res.filter((v) => v.orgcode == orgcode.value)[0];
    }
  }
}
//获取文件共享中心数据
async function getLists() {
  let res = await getList();
  if (res.length != 0) {
    shareData.length = 0;
    res.forEach((el) => {
      shareData.push({ title: el.sysOrgName, value: el.tolalNum, value1: el.approveNum });
    });
  }
}

function showDetail(code, label, leftV, topV) {
  if (code) {
    orgcode.value = code;
    dialogTitle.value = label;
    isShowDialog.value = true;
    getHomeDataList();
  }
  nextTick(() => {
    const tooltipDom = document.getElementById('detailModal') as HTMLElement;
    tooltipDom.style.left = leftV;
    tooltipDom.style.top = topV;
  });
}
function closeDialog() {
  isShowDialog.value = false;
}

onMounted(() => {
  getHomeDataList();
  getLists();
  getMonitor();
});
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
});
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'douyuFont';
  src: url('../../../../assets/font/douyuFont.otf');
}

// @font-face {
//   font-family: 'yjsz';
//   src: url('../../../../assets/font/yjsz.TTF');
// }
.company-home {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
  background-size: 100% 100%;

  .top-bg {
    width: 100%;
    height: 97px;
    background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
    position: absolute;
    z-index: 1;

    .main-title {
      height: 96px;
      color: #fff;
      font-family: 'douyuFont';
      font-size: 20px;
      letter-spacing: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .company-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../../../../assets/images/company/content-bg.png') no-repeat;
    background-size: 100% 100%;

    .area-content {
      position: absolute;
      top: 45px;
      width: 100%;
      height: calc(100% - 45px);
      padding: 0px 20px 20px 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .left-area {
        width: 23%;
        height: 100%;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1;

        .area-card {
          width: 100%;
          height: calc(60% - 15px);
          margin-bottom: 15px;
          background: url('../../../../assets/images/company/area-card.png') no-repeat;
          background-size: 100% 100%;
        }

        .area-card1 {
          width: 100%;
          height: 40%;
          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .center-area {
        width: 1000px;
        height: 100%;
        position: relative;
        z-index: 0;

        .center-bg {
          position: absolute;
          bottom: 240px;
          left: 50%;
          transform: translate(-50%, 0);
          width: 1128px;
          height: 630px;
          background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
          background-size: contain;
          background-position: 50% 50px;
          z-index: 0;

          .bg-map {
            width: 1086px;
            height: 610px;
            left: 30px;
            top: 60px;
            background: url('../../../../assets/images/company/home-map.png') no-repeat center;
            background-size: contain;
            // background-position: 0px 70px;
            position: relative;
            z-index: 0;
          }
        }

        .area-card2 {
          position: absolute;
          right: 0;
          top: 62px;
          width: 568px;
          height: 437px;
          background: url('../../../../assets/images/company/area-card2.png') no-repeat;
          background-size: 100% 100%;
          // pointer-events: auto;
        }

        .area-card3 {
          position: absolute;
          right: 0;
          bottom: 0px;
          width: 100%;
          height: 269px;
          background: url('../../../../assets/images/company/area-card3.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .right-area {
        width: 23%;
        height: 100%;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1;

        // pointer-events: auto;
        .area-card {
          width: 100%;
          height: calc(60% - 15px);
          margin-bottom: 15px;
          background: url('../../../../assets/images/company/area-card.png') no-repeat;
          background-size: 100% 100%;
        }

        .area-card1 {
          width: 100%;
          height: 40%;
          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
