<template>
  <div class="index">
    <!--标题-->
    <mt-header title="首页"/>
    <!--内容-->
    <div class="index-container">
      <div class="index-func-div">
        <div class="index-func-btn-div">
          <div class="func-btn" @click="changetab('well')">
            <div class="btn-icon"><img :src="iconWell" slot="icon"></div>
            <div class="btn-title">闸井管理</div>
          </div>
        </div>
        <div class="index-func-btn-div">
          <div class="func-btn" @click="changetab('job')">
            <div class="btn-icon"><img :src="iconAlarm" slot="icon"></div>
            <div class="btn-title">告警工单</div>
          </div>
        </div>
        <div class="index-func-btn-div">
          <div class="func-btn" @click="openBfcf">
            <div class="btn-icon"><img :src="iconGuard" slot="icon"></div>
            <div class="btn-title">布防撤防</div>
          </div>
        </div>
      </div>
      <div class="index-static-div">
        <!--闸井布防撤防数量统计-->
        <div class="index-card">
          <div class="card-header">闸井监控</div>
          <div class="card-body divid3">
            <div v-for="item in wellCount" :key="item.name" class="static-span" @click="clickWellManage(item.name)">
              <div :class="item.type">
                {{item.count}}
              </div>
              <div class="span-desn">
                {{item.name}}
              </div>
            </div>
            <div class="clear-float"></div>
          </div>
        </div>
        <!--工单数量统计-->
        <div class="index-card">
          <div class="card-header">工&nbsp;&nbsp;&nbsp;&nbsp;单</div>
          <div class="card-body divid4">
            <div v-for="item in jobCount" :key="item.name" class="static-span" @click="clickJobManage(item.name)">
              <div :class="item.type">
                {{item.count}}
              </div>
              <div class="span-desn">
                {{item.name}}
              </div>
            </div>
            <div class="clear-float"></div>
          </div>
        </div>
      </div>
    </div>
    <tabbottom activeTabItem="MAIN"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import { plusReady } from 'assets/js/plusReady'
  import { MyLocalStorage, checkADFlag, checkLoginFlag } from 'assets/js/utils'
  import { LOGIN_FLAG, AD_FLAG, INDEX_ACTIVETAB } from 'assets/js/storageConst'
  import { countByBfzt } from '@/api/well'
  import { countByJobStatus } from '@/api/job'
  import { registerGetui } from '@/api/login'

  export default {
    name:'layout',
    data () {
      return {
        iconWell: require('@/assets/icons/icon-well.png'),
        iconAlarm: require('@/assets/icons/icon-alarm.png'),
        iconGuard: require('@/assets/icons/icon-guard.png'),
        wellCount:[
          {
            count:'--',
            name:'已撤防',
            type:'span-count alarm'
          },
          {
            count:'--',
            name:'已布防',
            type:'span-count warning'
          },
          {
            count:'--',
            name:'全部',
            type:'span-count success'
          }
        ],
        jobCount:[
          {
            count:'--',
            name:'待处理',
            type:'span-count alarm'
          },
          {
            count:'--',
            name:'待确认',
            type:'span-count warning'
          },
          {
            count:'--',
            name:'处理中',
            type:'span-count primary'
          },
          {
            count:'--',
            name:'已完成',
            type:'span-count success'
          }
        ]
      }
    },
    created () {
      console.log("created")
      plusReady(this.plusReady)
      // this.setLocalStorage()  // 储存本地存储
      this.fetchData()
    },
    activated(){
      const cid = this.$store.getters.cid
      console.log('cid:'+cid)
      if(cid && cid!=''){
        registerGetui(cid).then(res=>{
          if(res.code==200){
            console.log('registerGetui success!')
          }
        })
      }
      this.fetchData()
    },
    methods: {
      resumeCallback () {
        Toast({
          message: '欢迎回来',
          position: 'bottom',
          duration: 3000
        })
        let login_flag = checkLoginFlag()
        if (login_flag) {
          this.login()
        } else {
          MyLocalStorage.Cache.set(LOGIN_FLAG, true, 999999) // 切换回来登陆保持时长无限
        }
      },
      pauseCallback () {
        setTimeout(() => {
          MyLocalStorage.Cache.set(LOGIN_FLAG, true, 6000) // 切换至后台登陆保持10分钟
        }, 1000)
      },
      //获取数据
      fetchData(){
        //统计布防撤防井数
        countByBfzt().then(response => {
          this.wellCount = [
            {
              count:response.data.cfWell,
              name:'已撤防',
              type:'span-count alarm'
            },
            {
              count:response.data.bfWell,
              name:'已布防',
              type:'span-count warning'
            },
            {
              count:response.data.total,
              name:'全部',
              type:'span-count success'
            }
          ]
        })
        countByJobStatus().then(response => {
          this.jobCount = [
            {
              count:response.data.beforeGet,
              name:'待处理',
              type:'span-count alarm'
            },
            {
              count:response.data.beforeConfirm,
              name:'待确认',
              type:'span-count warning'
            },
            {
              count:response.data.inHandle,
              name:'处理中',
              type:'span-count primary'
            },
            {
              count:response.data.over,
              name:'已完成',
              type:'span-count success'
            }
          ]
        })
      },
      changetab(tabName){
        if(tabName=='well'){
          this.$router.push({name: 'wellManage'})
        }else if(tabName=='job'){
          this.$router.push({name: 'job', query:{tab:'1'}})
        }
      },
      openBfcf(){
        this.$router.push({name: 'wellBfcf', query:{bfzt:'', bfztName:'全部'}})
      },
      clickWellManage(name){
        if(name == '已布防'){
          this.$router.push({name: 'wellBfcf', query:{bfzt:'1', bfztName:'布防'}})
        }else if(name=='已撤防'){
          this.$router.push({name: 'wellBfcf', query:{bfzt:'0', bfztName:'撤防'}})
        }else{
          this.$router.push({name: 'wellBfcf', query:{bfzt:'', bfztName:'全部'}})
        }

      },
      clickJobManage(name){
        if(name=='待处理'){
          this.$router.push({name: 'job', query:{tab:'1'}})
        }else if(name=='待确认'){
          this.$router.push({name: 'job', query:{tab:'2'}})
        }else if(name=='处理中'){
          this.$router.push({name: 'job', query:{tab:'3'}})
        }else if(name=='已完成'){
          this.$router.push({name: 'job', query:{tab:'4'}})
        }
      }

    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .index-container{
    width 100vh
    .index-func-div{
      height 15vh
      padding 3vh 12.5vw
      background-color #fdfdfd
      border-bottom 1px solid #e8e8e8
      .index-func-btn-div{
        width 25vw
        float left
        text-align center
        .btn-icon{
          height 17vw
          width 17vw
          position relative
          margin 2vw auto
          background-color #1d55c6
          vertical-align: middle
          -webkit-border-radius: 17vw
          -moz-border-radius: 17vw
          border-radius: 17vw
        }
        .btn-icon img{
          width 12vw
          height 12vw
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          vertical-align: middle
          margin auto
        }
        .btn-title{
          font-size 0.9em
        }
      }
    }
    .index-card{
      width 97vw
      height 25vh
      margin 1.5vh 1.5vw
      background-color #ffffff
      border: 1px solid #f0f0f0
      border-radius 4px
      .card-header{
        margin-top:3vh
        margin-left: 20vw
        margin-right: 20vw
        padding-bottom 4px
        border-bottom 1px solid #f0f0f0
        text-align center
      }
      .card-body{
        margin-top:3vh
        padding 0vw 2vw
        .static-span{
          float: left;
          text-align center
          margin:2vw 0vw
          .span-count{
            font-size 2.2rem
            margin-bottom 1vh
            font-family: agencry
          }
        }
      }
      .divid3 {
        padding:0vw 11vw
        .static-span{
          width:24vw
        }
      }
      .divid4 .static-span{
        width:22.5vw
      }
    }
    .success{
      color: #13ad00
    }
    .warning{
      color: #ffca18
    }
    .alarm{
      color: #ff6f70
    }
    .primary{
      color: #1d55c6
    }
  }
</style>
