<template>
  <el-container class="home-wrap">
    <div class="headerContent">
      <div class="header">
        <div class="headerLeft">您好，欢迎进入临湘高新区智慧园区平台</div>
        <div class="headerRight" @click="handleOut()">
          <span>退出系统</span>
        </div>
      </div>
    </div>
    <el-header class="home-header">
      <div class="navTitle">
        临湘高新区智慧园区平台
      </div>
      <div class="navList">
        <div class="navItem" v-for="(item,index) in navList" @click="handleLink(item.url, item.id)" :key="item.id">
          {{ item.name }}
        </div>
      </div>
    </el-header>
    <div class="main">
      <div class="main_left fl" ref="mainLeft">
        <div class="contentLink">
          <div class="title">安全生产</div>
          <div class="menuArea">
            <div class="contentTop">
              <div class="contentTopLeft" @click="handleUrl2('DoublePrevention')">
                <img class="h-img" :src="require('@/assets/home/双重预防.png')"/>
              </div>
              <div class="contentTopLeft" @click="handleUrl2('OnlineMonitor')">
                <img class="h-img" :src="require('@/assets/home/在线监测.png')"/>

              </div>
              <div class="contentTopLeft" @click="handleUrl2('EmergencyCommand')" style="margin-right: 0;">
                <img class="h-img" :src="require('@/assets/home/应急指挥.png')"/>
                </div>
            </div>
            <div class="contentBottom">
              <div class="contentBottomLeft" @click="handleUrl2('ClosedManage')">
                <img class="h-img" :src="require('@/assets/home/封闭管理.png')"/>
                </div>
              <div class="contentBottomRight" @click="handleUrl2('SpecialOperation')">
                <img class="h-img" :src="require('@/assets/home/特殊作业.png')"/>
                </div>
            </div>
          </div>
        </div>
        <div class="contentLink noMt" v-for="(item,index) in menuListArr">
          <div class="title">{{ item.title }}</div>
          <div class="menuArea">
            <div class="menuArea_list" v-for="(items,index) in item.list">
              <div class="toMenu" @click="handleUrl(items.url)" :class="{ml5:(index % 2) != 0 ?true:false}">
<!--                {{ items.name }}-->
                <img class="h-img" :src="require(`@/assets/home/${items.name}.png`)"/>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="main_right fl">
        <div class="parkEnterprise" ref="parkEnterprise">
          <div class="title" v-if="showMenuFlag">园区企业</div>
          <div class="parkInfo" v-if="showMenuFlag">
            <div class="parkInfo_name" v-for="(item,index) in businessInfo" @click="openMindInf(item)">
              {{ item.name }}
            </div>
          </div>
          <div class="hiddenMenu" @click="leftMenu()">
            <i class="el-icon-caret-left" v-if="showMenuFlag"></i>
            <i class="el-icon-caret-right" v-else></i>
          </div>
        </div>
        <div class="businessInfoArea">
          <div class="title">园区简介</div>
          <div class="infoDisplay">
            <!-- {{infoDisplay}} -->
            临湘高新区滨江片区2007年立园，临湘高新区杨桥绿色化工产业园于2021年5月重新被湖南省认定为首批10个化工园区之一，2021年9月开建，2022年、2023年分别顺利通过省厅化工园区复核验收。
            被岳阳市明确为乙烯炼化一体化项目下游配套产业和生物医药产业承接地，是临湘融岳融港融产的重要对接平台，
            也是临湘沿江退出化工企业部分优质项目的转移承接地。 临湘高新区绿色化工园规划面积7844亩，
            前期开发面积3600亩。截至到2023年4月，临湘高新区绿色化工园已批面积2790.68亩，批而未供面积882.59亩，
            化工园区规模初具，3年内可望打造成500亿产值园区。
          </div>
        </div>
        <div class="parkCount">
          <div class="title">项目统计</div>
          <div class="el-row" style="width: 100%;">
            <div class="el-col-8">
              <div class="circle circle-blue">31</div>
              <div class="circle-title">已签约项目</div>
            </div>
            <div class="el-col-8">
              <div class="circle circle-green">13</div>
              <div class="circle-title">在建项目数</div>
            </div>
            <div class="el-col-8">
              <div class="circle circle-red">5</div>
              <div class="circle-title">已竣工项目</div>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 99.6%;overflow: hidden;">
          <newsMap ref="newsMapInfo"></newsMap>
        </div>

      </div>
    </div>
  </el-container>
</template>
<script>
import newsMap from '@/views/daping/Map.vue'
import * as parkInfos from '../utils/parkInfo'

export default {
  data() {
    return {
      navList: [
        {name: '园区概览', url: 'http://61.240.213.11:19082/gailan', id: '1'},
        {name: '安全生产', url: 'http://58.221.5.226:5000/Home/Index', id: '2'},
        {name: '生态环保', url: 'http://61.240.213.11:19082/index', id: '3'},
        {name: '智慧消防', url: 'http://tec.tezhijia.cn', id: '4'},
        {name: '五好园区', url: 'http://222.240.168.20:7777/digital_map/#/home', id: '5'},
        {name: 'GIS系统', url: 'http://61.240.213.212:8088', id: '6'},
        {name: '平台运营', url: '', id: '7'},
      ],
      menuListArr: [
        {
          title: '生态环保',
          list: [
            {name: '一企一档', url: 'http://61.240.213.11:19082/shengtai'},
            {name: '污染源', url: 'http://61.240.213.11:19082/daqi'},
            {name: '智慧能源', url: 'http://61.240.213.11:19082/shui'},
            {name: '环境监测', url: 'http://61.240.213.11:19082/gufeiweifei'}
          ]
        },
        {
          title: '经济运行',
          list: [
            {name: '经济运行', url: ''},
            {name: '产业分析', url: ''},
            {name: '重大项目', url: ''},
            {name: '企业运行', url: ''}
          ]
        }

      ],
      showMenuFlag: true,
      businessInfo: '',
      busiInfoDisplay: '',
      infoDisplay: '',
      shwoInfoFlag: false
    }
  },
  components: {
    newsMap
  },
  created() {
    //此处为了怕不影响其他页面，故单独使用，也还可以在main.js里面放开rem
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      recalc()
    })(document, window);
  },
  mounted() {
    this.businessInfo = parkInfos.parkEnterprise();
    this.busiInfoDisplay = parkInfos.enterpriseInfo();
  },
  methods: {
    handleOut() {
      this.$store.dispatch('FedLogOut')
      location.reload()
    },
    handleLink(url, id) {
      const list = ["1", "2", '3']
      if (url) {
        url = list.includes(id) ? (url + `?token=${this.$store.getters.token}`) : url
        window.open(url)
      }
    },
    handleUrl(url) {
      if (url) {
        window.open(url + `?token=${this.$store.getters.token}`)
      }
    },
    handleUrl2(url) {
      if (url) {
        window.open(`http://58.221.5.226:5000/BigData/${url}?token=${this.$store.getters.token}`)
      }
    },
    leftMenu() {
      this.showMenuFlag = !this.showMenuFlag;
      if (!this.showMenuFlag) {
        this.$refs.parkEnterprise.style.width = "0.01rem"
      } else {
        this.$refs.parkEnterprise.style.width = "3.5rem"
      }
    },
    closeMind() {
      this.shwoInfoFlag = false;
    },
    modelInfo(data) {
      console.log(data);
      for (let i = 0; i < this.busiInfoDisplay.length; i++) {
        let res = this.busiInfoDisplay[i];
        if (res.name == data.object.text) {
          this.shwoInfoFlag = true;
          this.infoDisplay = res.info;
        }
      }
    },
    openMindInf(objs) {
      this.$refs.newsMapInfo.$emit('companyInfo', objs);
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
* {
  font-size: 0.18rem;

}

.fl {
  float: left;
}

.fr {
  float: right;
}

.noMt {
  padding-top: 0rem !important;
}

.mt20 {
  margin-top: 0.2rem;
}

.ml5 {
  margin-left: 0.05rem;
}

.home-wrap {
  width: 100%;
  height: 100%;
}

.headerContent {
  width: 100%;
  height: 0.53rem;
  background-color: #f2f6fa;
}

.header {
  width: 12rem;
  line-height: 0.53rem;
  color: #666;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

.headerLeft {
  cursor: pointer;
}

.headerRight {
  font-size: 0.16rem;
  cursor: pointer;
}

.home-header {
  width: 13rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.2rem auto;
}

.home-header .navTitle {
  font-size: 0.28rem;
  color: #3f9ef7;
  font-weight: 600;
}

.navList {
  width: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navItem {
  width: auto;
  cursor: pointer;
  color: #000;
  font-size: 0.18rem;
  /* font-weight: 600; */
  text-align: center;
  padding: 0 20px;
}

.main {
  width: 100%;
  height: calc(100% - 1.6rem);
  padding: 0 !important;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  background: url('../assets/images/index_bg01.jpg');
  background-size: 100% 100%;
}

.main_left {
  width: 25%;
  height: 99%;
  position: relative;
  background-color: rgba(0, 0, 0, 0.1);
}

.main_right {
  width: 75%;
  height: 100%;
  position: relative;
}

.contentLink {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0.22rem 0.3rem;
  box-sizing: border-box;
  // background-color: rgba(0,0,0,0.1);
}

.contentLink .title {
  font-size: 0.2rem;
  color: #fff;
}

.main_left .menuArea {
  width: 100%;
}

.contentTop {
  margin-top: 0.2rem;
  display: flex;
}

.contentTopLeft {
  flex: 1;
  height: 0.75rem;
  line-height: 0.75rem;
  margin-right: 0.05rem;
  border-radius: 0.1rem;
  text-align: center;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 0.2rem;
  cursor: pointer;
  overflow: hidden;
}

.contentBottom {
  margin-top: 0.2rem;
  display: flex;
}

.contentBottomLeft {
  flex: 1;
  height: 0.75rem;
  line-height: 0.75rem;
  margin-right: 0.05rem;
  border-radius: 0.1rem;
  text-align: center;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 0.2rem;
  cursor: pointer;
  overflow: hidden;
}

.contentBottomRight {
  flex: 1;
  height: 0.75rem;
  line-height: 0.75rem;
  border-radius: 0.1rem;
  text-align: center;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 0.2rem;
  cursor: pointer;
  overflow: hidden;
}

.menuArea_list {
  width: 100%;
}

.menuArea_list .toMenu {
  width: 49.2%;
  height: 0.75rem;
  line-height: 0.75rem;
  border-radius: 0.1rem;
  text-align: center;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 0.2rem;
  float: left;
  margin-top: 0.2rem;
  cursor: pointer;
  overflow: hidden;
}

.hiddenMenu {
  height: 0.4rem;
  line-height: 0.3rem;
  position: absolute;
  top: 49%;
  right: 0;
  cursor: pointer;
}

.parkEnterprise {
  width: 3.5rem;
  height: 98%;
  position: absolute;
  top: 0.1rem;
  left: 0;
  z-index: 100;
  border-radius: 0.08rem;
  background-color: #fff;
}

.parkEnterprise .title {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  padding: 0 0.2rem;
  color: #3f9ef7;
  font-size: 0.2rem;
  font-weight: bold;
  background-color: #ebf2f2;
  border-radius: 0.08rem 0.08rem 0 0;
  border-bottom: 1px solid #ccc;
}

.parkEnterprise .parkInfo {
  width: 100%;
  height: calc(100% - 0.4rem);
  padding: 0 0.2rem;
  box-sizing: border-box;
  overflow-y: scroll;
}

.parkEnterprise .parkInfo .parkInfo_name {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  border-bottom: 1px solid #e8e2e2;
  box-sizing: border-box;
  cursor: pointer;
}

.businessInfoArea {
  width: 3.5rem;
  height: 70%;
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  z-index: 100;
  border-radius: 0.08rem;
  background-color: #fff;
}

.businessInfoArea .title, .parkCount .title {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  padding: 0 0.2rem;
  color: #3f9ef7;
  font-size: 0.2rem;
  font-weight: bold;
  background-color: #ebf2f2;
  border-radius: 0.08rem 0.08rem 0 0;
  border-bottom: 1px solid #ccc;
}

.closeMind {
  font-size: 0.2rem;
  float: right;
  cursor: pointer;
}

.businessInfoArea .infoDisplay {
  width: 100%;
  height: calc(100% - 0.4rem);
  padding: 0.2rem 0.1rem;
  box-sizing: border-box;
  overflow-y: scroll;
}

.parkCount {
  width: 3.5rem;
  height: 1.7rem;
  position: absolute;
  bottom: 0.2rem;
  right: 0.1rem;
  z-index: 100;
  border-radius: 0.08rem;
  background-color: #fff;
}

.el-row {
  width: 100%;
  height: 1.3rem;
}

.el-row .circle {
  width: 0.64rem;
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: center;
  margin: 0 auto;
}

.circle-title {
  text-align: center;
}

.circle-blue {
  color: #1163dd;
  background: url('../assets/images/blue.png') no-repeat;
}

.circle-green {
  color: #52c41a;
  background: url('../assets/images/green.png') no-repeat;
}

.circle-red {
  color: #ff8400;
  background: url('../assets/images/red.png') no-repeat;
}

.el-col-8 {
  width: 33.33%;
  height: 0.15rem;
  padding-top: 0.13rem;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 0.1rem;
}

::-webkit-scrollbar-track-piece {

  background-color: #ebf2f2

}

.h-img{
  width: 100%;
  height: 100%;
}
</style>
