<template>
  <div class="homeBox">
    <!-- <GdMap></GdMap> -->
    <!-- 头部 -->
    <Head></Head>
    <!-- 左边 -->
    <div class="home-aside asideL">
      <div class="asideL-top">
        <DbCount></DbCount>
      </div>
      <div class="asideL-Bottom">
        <div class="commom-aside">
          <QbsbCount></QbsbCount>
        </div>
        <div class="commom-aside">
          <QblyType></QblyType>
        </div>
        <div class="commom-aside">
          <QbfkCount></QbfkCount>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="home-aside asideR">
      <div class="commom-aside-big">
        <SituationAssessment />
      </div>
      <div class="commom-aside-big">
        <GroupWarning />
      </div>
      <div class="commom-aside-small">
        <Experience />
      </div>
    </div>
    <!-- 中间 -->
    <div class="home-center">
      <div class="middle-top"><Yszs /></div>
      <div class="flex middle-bottom mt10">
        <div class="mr10" style="width: 50%;"><DeployControl /></div>
        <div class="flex-1" style="flex: 1;"><ZdryWarning /></div>
      </div>

    </div>
    <!-- 底部 -->
    <div class="home-foot-t">
      <Bkcz></Bkcz>
    </div>
  </div>

  <!-- 左边弹窗 -->
  <LeftDialog></LeftDialog>

  <Fxq :initial-position="{ x: position.x, y: position.y }">
    <el-badge value="0" class="item badge-top-left">
      <div class='fxq fxq1'>
        <div class="title" @click.stop="opneMsg('xtxx')"> <img src="@/assets/images/xtxx.png" /> 系统消息</div>
      </div>
    </el-badge>
    <!-- <div class='fxq fxq2'>
      <div class="title" @click.stop="opneMsg('tztg')"> <img src="@/assets/images/tztg.png" /> 通知通报</div>
    </div>
    <div class='fxq fxq3'>
      <div class="title"> <img src="@/assets/images/xxxt.png" /> 消息协同</div>
    </div> -->
  </Fxq>
  <Information v-model='showDialog' :title='title'>
    <systemMessages :dict="{ BD_D_XXLX, BD_D_XXLY }" :idEntityCard='idEntityCard' :xxlx="showMsgLx" />
  </Information>
</template>

<script setup>
import { ref, getCurrentInstance, reactive } from 'vue'
import LeftDialog from './dialog/leftDialog'
import GdMap from "@/components/GdMap/index.vue";
import Head from './layout/head.vue'
import DbCount from './model/dbCount.vue'
import QbfkCount from './model/qbfkCount.vue'
import QbsbCount from './model/qbsbCount.vue'
import QblyType from './model/qblyType.vue'
import Bkcz from './model/bkcz.vue'
import ZdryWarning from './model/zdryWarning.vue'
import GroupWarning from './model/groupWarning.vue'
import Yszs from './model/yszs.vue'
import DeployControl from './model/deployControl.vue';
import SituationAssessment from './model/situationAssessment.vue'
import Experience from './model/experience.vue'
import Fxq from './model/fxq.vue'
import Information from './model/information.vue'
import systemMessages from './model/mesgSwitch/systemMessages.vue'
import { getItem } from '@/utils/storage.js'
import { queryXxTj} from '@/api/commit.js'
const { proxy } = getCurrentInstance();
const { BD_D_XXLX, BD_D_XXLY } = proxy.$dict('BD_D_XXLX', 'BD_D_XXLY'); //获取字典数据
const idEntityCard = getItem('idEntityCard')
const position = reactive({
  x: window.innerWidth - 120,
  y: window.innerHeight - 100
})

//消息
const title = ref('系统消息')
const showDialog = ref(false)
const showMsgLx = ref('')
const opneMsg = (val) => {
  showDialog.value = true
  showMsgLx.value = val
  switch (val) {
    case 'xtxx':
      title.value = '系统消息'
      break;
    case 'tztg':
      title.value = '通知通告'
      break;
    case 'xxxt':
      title.value = '消息协同'
      break;

  }
}
const queryXxTjList = () => {
  queryXxTj({}).then((res) => {
console.log(res);

  }).catch((err) => {

  });
}
queryXxTjList()
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.fxq {
  border-radius: 35px;
  width: 35px;
  transition: transform 0.5s ease, width 0.5s ease;
  background-color: rgb(1, 127, 245);
  transform-origin: left center;
  overflow: hidden;
  margin-bottom: 10px;

  .icon {
    display: flex;
    align-items: center;
    width: 35px;
    height: 35px;
    justify-content: center;
    line-height: 35px;
    font-size: 30px;
  }

  .title {
    height: 35px;
    line-height: 35px;

    img {
      margin-left: 9.5px;
      width: 16px;
      margin-right: 10px;
      margin-top: -3px;
      vertical-align: middle;
      height: 16px;
    }
  }
}

.fxq2 {
  background-color: #9d88f9;
}

.fxq1:hover {
  width: 120px;
}

.fxq2:hover {
  width: 120px;

  // background-color: red;
}

.fxq3:hover {
  width: 120px;
}

::v-deep .badge-top-left .el-badge__content {
  top: 0;
  right: auto;
  left: -10px;
  transform: translateY(-50%) translateX(-50%);
}
</style>
