<template>
  <div class="nav-bgcolor">
    <img src="../../assets/通用背景图.png" style="height: 20vh; width: 96vw; margin: 8px 0 0 8px; border-radius: 10px">
    <div class="auto">
      <div class="row nav-bgcolor" >
        <div class="col-xs-6  manbiankuang" v-for="tab in tabs" @click="gotopage(tab.link,tab.name)">
          <img class="imgs" :src="imgback(tab.name)">
          <p></p>
          <p class="pagesfoot">{{tab.name}}</p>
          <!--<p class="pagesfoot">{{tab.name}}&nbsp;{{tab.icon}}</p>-->
          <p></p>
        </div>
      </div>
      <!--<div class="row" style="overflow:auto;">-->
      <!--<repair-first v-show="componentName == 'repair-first'" worktype="报修单"  :sourcet="sourcet" tabname="维修待办" v-on:changesum="changesum"></repair-first>-->
      <!--<zhihuan-first v-show="componentName == 'zhihuan-first'" worktype="置换通气单"  :sourcet="sourcet" tabname="置换待办" v-on:changesum="changesum"></zhihuan-first>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script scoped>
  import Vue from 'vue'
  export default {
    title: '已办工作导航',
    data () {
      return {
        titleName:'已办工作',
        isMenu:true,
        tabs: this.getTabs(),
        text: '导航组件this',
        beforeName:'已办工作',
        sourcet:'竖屏'
      }
    },
    ready () {
      // this.getModelSum()
    },

    methods: {
      // 查询本地所有待办
      getModelSum(){
        for(var i = 0;i<this.tabs.length;i++){
          if(this.tabs[i].link == 'completed-zhihuan' ){
            this.getZhihuan()
          }
          if(this.tabs[i].link == 'completed-repair' ){
            this.getRepair()
          }
          if(this.tabs[i].link == 'area-plan' ){
            this.getSafeCheck()
          }
        }

      },
      getRepair(){
        var _this = this;
        this.timeoutRepair = window.setInterval(function() {
          let result = _this.$androidUtil.path({'alias':`getCompletedInfo`, 'data': {f_workorder_type: '报修单',condition:'1 = 1'}})
          if (result.code === 200) {
            console.log('查询得到的代办2' + JSON.stringify(result))
            var crv = {
              title: '维修已办',
              sum: result.data.length
            }
            _this.changesum(crv)
          }
        }, 6000)
      },
      getSafeCheck(){
        var _this = this;
        this.timeoutRepair = window.setInterval(function() {
          let result = _this.$androidUtil.path({'alias':`getSafecheckCompletedInfo`, 'data': {condition:'1 = 1'}})
          if (result.code === 200) {
            console.log('查询得到的安检已办' + JSON.stringify(result))
            var crv = {
              title: '安检已办',
              sum: result.data.length
            }
            _this.changesum(crv)
          }
        }, 6000)
      },
      getZhihuan(){
        var _this = this;
        this.timeoutZhihuan = window.setInterval(function() {
          let result = _this.$androidUtil.path({'alias':`getCompletedInfo`, 'data': {f_workorder_type: '置换通气单',condition:'1 = 1'}})
          if (result.code === 200) {
            console.log('查询得到的代办2' + JSON.stringify(result))
            var crv = {
              title: '置换已办',
              sum: result.data.length
            }
            _this.changesum(crv)
          }
        }, 6000)
      },
      changesum(titdata){
        for(var i = 0;i<this.tabs.length;i++){
          if(this.tabs[i].name == titdata.title){
            this.tabs[i].icon = titdata.sum + '单'
            console.log(JSON.stringify(this.tabs[i].icon))
            return
          }
        }
      },
      getTabs(){
        for(let funs in Vue.functions){
          if(Vue.functions[funs].link == 'already-service'){
            return Vue.functions[funs].children
          }
        }
      },
      imgback(val){
        return require('../../assets/'+val+'.png')
      },
      // 返回主界面
      back(){
        this.titleName = '主界面'
        this.isMenu = true

      },
      gotopage(param,title) {
        console.log('进入子组件')
        var prpdata = {
          _this:this,
          title:title,
          safe:false
        }
        this.$dispatch('gotoson',prpdata)
        this.$goto(param,{sourcet:'竖屏',tabname:title})
      },
      mute () {
        HostApp.mute()
      }
    },
  }
</script>
<style lang="less">
  .tab-befor-img  {
    content: '';
    background-size: 30px;
    display: inline-block;
    margin-right: 8px;
    height: 30px;
    width: 30px;
    vertical-align: -35%;
  }
  .pageskuang{
    vertical-align:middle;
    display:table-cell;
    width: 32%;
    top:-50%;
    margin-top: 1%;
    margin-left: 1%;
    border:1px solid #e3e3e3;
    text-align: center;
    background-color: #ffffff;
  }
  .pgesfoot{
    font-size: 14px;
    color: #666666;
    /*    font-family: "Pingfhs";*/
  }
  .imgs{
    width: 35px;
    margin-top: 15px;
    height: 39px;
  }
  .pages-bgcolor{
    text-align: center;
    background-color: #f0f0ef;
  }
  img[src=""],img:not([src]){
    opacity: 0;
    border:none;
    visibility: hidden;
    max-width: none;
  }

  .manbiankuang{
    width: 44%;
    margin-top: 15px;
    margin-left: 4%;
    border:1px solid #e3e3e3;
    border-radius:10px 10px 10px 10px;
    text-align: center;
    background-color: #ffffff;
  }

  .nav-bgcolor{
    background-color: #ffffff;
  }
</style>
