<template>
  <div class="home-div">
    <!--导航栏-->
    <div class="d1">
      <!--主题-->
      <div class="title-div">
        <span class="gradient-text gradient-text-one">经营管控平台系统</span>
      </div>

      <!--菜单-->
      <div class="menucol">
        <div class="mfont">安全服务<span class="span-date">{{serverday}}</span>天</div>
        <div class="colname">
          <div v-if="pagetitleshow.home" @click="toNewPage('home')" :class="{click:pageshow.home,noclick:!pageshow.home}">首页</div>
          <div v-if="pagetitleshow.user" @click="toNewPage('user')" :class="{click:pageshow.user,noclick:!pageshow.user}">用户</div>
          <div v-if="pagetitleshow.services" @click="toNewPage('services')" :class="{click:pageshow.services,noclick:!pageshow.services}">客服</div>
          <div v-if="pagetitleshow.safe" @click="toNewPage('safe')" :class="{click:pageshow.safe,noclick:!pageshow.safe}">安检</div>
          <div v-if="pagetitleshow.monitor" @click="toNewPage('monitor')" :class="{click:pageshow.monitor,noclick:!pageshow.monitor}">监控</div>
          <div v-if="pagetitleshow.net" @click="toNewPage('net')" :class="{click:pageshow.net,noclick:!pageshow.net}">管网</div>
        </div>
      </div>
    </div>
    <!--正文-->
    <div class="d2">

      <!--&lt;!&ndash;首页&ndash;&gt;-->
      <!--<home class="d3" v-if="pageshow.home" :key="1" :loaddata="loaddata"-->
      <!--:drillshow="drillshow"></home>-->
      <!--&lt;!&ndash;用户&ndash;&gt;-->
      <!--<use-home v-ref:usehome class="d3" :loaddata="loaddata" v-if="pageshow.user" :key="2"-->
      <!--:drillshow="drillshow"></use-home>-->
      <!--&lt;!&ndash;客服&ndash;&gt;-->
      <!--<service-home class="d3" :loaddata="loaddata" v-if="pageshow.services" :key="3"-->
      <!--:drillshow="drillshow"></service-home>-->
      <!--&lt;!&ndash;安检&ndash;&gt;-->
      <!--<check-home class="d3" :loaddata="loaddata" v-if="pageshow.safe" :key="4"></check-home>-->
      <!--&lt;!&ndash;监控&ndash;&gt;-->
      <!--<monitor-home class="d3" :loaddata="loaddata" v-if="pageshow.monitor" :key="5"-->
      <!--:drillshow="drillshow"></monitor-home>-->
      <!--&lt;!&ndash;管网&ndash;&gt;-->
      <!--<net-home class="d3" :loaddata="loaddata" v-if="pageshow.net" :key="6"></net-home>-->
      <component v-for="s in modulename" :is="s" :key="$index"
                 :drillshow="drillshow" class="d3" v-if="pageshow[pagename1[$index]]&&pagetitleshow[pagename1[$index]]"></component>
    </div>
    <loading v-if="initdatashow"></loading>
  </div>
</template>

<script>
  import * as Util from '../../stores/Util'
  import * as DataSql from '../../stores/DataSql'
  import co from 'co'

  export default {
    title: "经营管控",
    data() {
      return {
        pageshow: {  //页面显示控制数组
          home: true,        //主页
          user: false,       //用户
          services: false,   //客服
          safe: false,       //安全
          monitor: false,    //监控
          net: false,        //管网
        },
        loaddata: false,
        serverday: '',     //安全服务天数
        pagename: 'home',  //当前页面name
        listenheight: '',   //浏览器高度
        change: '',         //浏览器高度变化值
        drillshow: false,      //三级页面显示
        resdata: [],           //接收请求后台获取的安全服务开始时间
        modulename: ['home', 'use-home', 'service-home', 'check-home', 'monitor-home', 'net-home'],  //导入组件名
        pagename1: ['home', 'user', 'services', 'safe', 'monitor', 'net'], //权限控制显示模块名
        pagetitleshow: {  //页面显示控制数组
          home: true,
          user: true,
          services: true,
          safe: true,
          monitor: true,
          net: true,
        },
        initdatashow: true,  //加载数据展示控制
      }
    },
    methods: {
      toNewPage(index) {      //菜单选择
        if (index == this.pagename) {
          return
        }
        this.pageshow[index] = true;
        this.pageshow[this.pagename] = false;
        this.pagename = index;
        //控制加载图片显示
        this.initdatashow = true
      },
      heightchange() {    //监听浏览器窗口大小变化，并重绘图表
        setInterval(() => {
          if (this.listenheight !== window.innerHeight) {
            this.listenheight = window.innerHeight;
            this.change = this.listenheight + ''
          }
        }, 2000)
      },
      // changeresize(self) {
      //   window.addEventListener('resize', function () {
      //     self.resize()
      //   })
      // },
      //请求后台数据
      searchdata() {
        //获取安全服务天数
        let sqldata = DataSql.getData(this,'home',{}, 'resdata')
        co(sqldata)
      },
      //日期减法求日期之间的天数
      datedifference(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式
        console.log(sDate1)
        sDate1 = sDate1.toString().substring(0, 10)
        var aDate, oDate1, oDate2, iDays
        aDate = sDate1.split("-")
        oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为9-25-2017格式
        aDate = sDate2.split("-")
        oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
        iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数
        return iDays
      },
    },
    watch: {
      // 监听返回数据并进行绘图
      'startdate': {
        deep: true,
        handler(val) {

        }
      },
      'resdata': {
        deep: true,
        handler(val) {
          var s = Util.toStandardDateString()
          var s = s.toString().substring(0, 10)
          this.serverday = this.datedifference(this.resdata[0].startdate, s)
        }
      }
    },
    ready() {
      this.searchdata()
      // this.loaddata = !this.loaddata
      // this.heightchange()
    }
  }
</script>

<style scoped>
  /*经营管控全局页面样式*/
  .home-div {
    background-image: url('../../../static/ManageHomePic/背景.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*width: 2304px;*/
    /*height: 775px;*/
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  /*导航栏样式*/
  .d1 {
    position: absolute;
    top: 1%;
    width: 100%;
    /*height: 64px;*/
    height: 12%;
    /*background-color: #00b3ee;*/
  }

  /*正文内容样式*/
  .d2 {
    position: absolute;
    top: 13%;
    width: 100%;
    height: 88%;
    /*background-color: #880000;*/
  }

  /*分页面全局样式*/
  .d3 {
    position: relative;
    width: 100%;
    height: 100%;
    /*background-color: #880000;*/
  }

  /*菜单全局样式*/
  .menucol {
    float: right;
    width: 65%;
    height: 100%;
  }

  /*安全服务标题样式*/
  .mfont {
    margin-top: 2%;
    float: left;
    font-size: 2.25em;
    letter-spacing: 4px;
    color: #ffffff;
  }

  /*菜单列样式*/
  .colname {
    width: 63%;
    height: 90%;
    font-family: HanYi;
    color: #00f7ff;
    float: right;
  }

  /*主题背景样式*/
  .title-div {
    /*width: 274px;*/
    /*height: 64px;*/
    margin-top: 1%;
    margin-left: 3%;
    padding-top: 1%;
    float: left;
    width: 18%;
    min-width: 18%;
    height: 80%;
    max-height: 60px;
    text-align: center;
    background-image: url('../../../static/ManageHomePic/图层519.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /*主题字体样式*/
  .gradient-text {
    width: 100%;
    height: 100%;
    font-size: 1.75em;
    font-family: HanYi;
  }

  /*主题字体颜色渐变样式*/
  .gradient-text-one {
    background-image: -webkit-linear-gradient(bottom, #009ef1, #00f2fe, #00f7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /*安全服务天数样式*/
  .span-date {
    color: #f7cb32;
  }

  /*单个菜单样式*/
  .colname div {
    text-align: center;
    padding-top: 3%;
    width: 14%;
    float: left;
    height: 80%;
    max-height: 60px;
    letter-spacing: 0px;
    font-family: HanYi;
  }

  /*鼠标移入时菜单样式*/
  .colname div:hover {
    font-size: 1.625em;
    background-image: url('../../../static/ManageHomePic/椭圆2.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 6%;
  }

  /*未选中菜单的字体大小*/
  .noclick {
    font-size: 1.375em;
  }

  /*已选中菜单样式*/
  .click {
    font-size: 1.625em;
    background-image: url('../../../static/ManageHomePic/椭圆2.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 6%;
  }
</style>
