<template>
  <div class="home-div">
    <!--导航栏-->
    <div class="safe-navigation">
      <!--主题-->
      <div class="safe-title-div">
        <span class="safe-gradient-text safe-gradient-text-one">安全服务平台系统</span>
      </div>
      <!--菜单-->
      <div class="safe-menucol">
        <div class="safe-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 v-if="pagetitleshow.poor" @click="toNewPage('poor')" :class="{click:pageshow.poor,noclick:!pageshow.poor}">供销差</div>
          <div v-if="pagetitleshow.predict" @click="toNewPage('predict')" :class="{click:pageshow.predict,noclick:!pageshow.predict}">预测气量</div>
        </div>
      </div>
      <div class="new-manage" @click=goto()>经营管控平台</div>
      <div class="filiale"><img src="../../../static/NewManageHome/图层12.png"/>{{f_filiale}}</div>
    </div>
    <!--正文-->
    <div class="safe-text">
      <component v-for="s in modulename" :is="s" :key="$index" :f_filiale="f_filiale"
                 :drillshow="false" class="d3" v-if="pageshow[pagename1[$index]]&&pagetitleshow[pagename1[$index]]"></component>
    </div>
<!--    <loading v-if="initdatashow" :backurl="backurl"></loading>-->
  </div>
</template>

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

  export default {
    title: "经营管控",
    props: {
      homeflag:Boolean,
    },
    data() {
      return {
        backurl:'../../../static/NewManageHome/加载.gif',
        pageshow: {  //页面显示控制数组
          home: true,        //主页
          user: false,       //用户
          services:false ,   //客服
          safe: false,       //安全
          monitor: false,    //监控
          net: false,        //管网
          poor: false,       //供销差
          predict: false,       //供销差
        },
        f_filiale:'榆林.榆川天然气',
        dataindex:-1,
        loaddata: false,
        serverday: '',     //安全服务天数
        pagename: 'home',  //当前页面name
        listenheight: '',   //浏览器高度
        change: '',         //浏览器高度变化值
        drillshow: false,      //三级页面显示
        typemodel:'CS',
        resdata: [],           //接收请求后台获取的安全服务开始时间
        modulename: ['home', 'use-home', 'service-home', 'check-home', 'monitor-home', 'net-home','poor-home','predict-home'],  //导入组件名
        pagename1: ['home', 'user', 'services', 'safe', 'monitor', 'net','poor','predict'], //权限控制显示模块名
        pagetitleshow: {  //页面显示控制数组
          home: true,
          user: true,
          services: true,
          safe: true,
          monitor: true,
          net: true,
          poor: true,
          predict: 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格式
        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
      },
      goto(){
        console.log(this.$parent)
        this.$parent.homeflag=true
        console.log(this.$parent.homeflag)
      }
    },
    watch: {
      'f_filiale'(){
      },
      // 监听返回数据并进行绘图
      '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>

