<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,tab.navigate)">
          <div class="badge" v-show="tab.name == '维修派发' && isShowRedNum && isShowRedNum == 'true'">
            <div class="badge-content">{{ pointNum ? pointNum : 0 }}</div>
          </div>
          <div class="badge" v-show="tab.name == '抄表待办' && isShowRedNum && isShowRedNum == 'true'">
            <div class="badge-content">{{ meterNum ? meterNum : 0 }}</div>
          </div>
          <div class="badge" v-show="tab.name == '信息公告' && isShowRedNum && isShowRedNum == 'true'">
            <div class="badge-content">{{ infoNum ? infoNum : 0 }}</div>
          </div>
          <img class="imgs" :src="imgback(tab.name)" alt="">
          <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'
  import {HttpResetClass} from "vue-client";

  export default {
    title: '在线业务导航',
    data() {
      return {
        titleName: '在线业务',
        isMenu: true,
        tabs: this.getTabs(),
        text: '导航组件this',
        isShowRedNum:this.$appdata.getSingleValue('手机端获取任务条数'),
        beforeName: '在线业务',
        sourcet: '竖屏',
        pointNum: null,
        infoNum: null,
        meterNum: null
      }
    },
    ready() {
      this.getRepairNum()
      this.getInfoNum()
      this.getmeterNum()
    },
    methods: {
      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 == 'online-manage') {
            return Vue.functions[funs].children
          }
        }
        this.getRepairNum()
        this.getInfoNum()
        this.getmeterNum()
      },
      getmeterNum() {
        if (!this.isShowRedNum || this.isShowRedNum != 'true') {
          return
        }
        this.timeOutGetmeterNum()
      },
      getInfoNum() {
        if (!this.isShowRedNum || this.isShowRedNum != 'true') {
          return
        }
        this.timeOutGetInfoNum()
      },
      getRepairNum() {
        if (!this.isShowRedNum || this.isShowRedNum != 'true') {
          return
        }
        this.timeOutGetRepairNum()
      },
      timeOutGetRepairNum() {
        let condition = `1 = 1  and f_workorder_type = '报修单' and f_state = null `
        let val = {
          condition: {
            condition: condition,
            sign: '1 = 1'
          },
          userid: Vue.user.name
        }
        let http = new HttpResetClass()
        http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/path/operatorServiceAndroid`, {data: val}, {
          resolveMsg: null,
          rejectMsg: null
        }).then((res) => {
          this.pointNum = res.data.length
        })
      },
      timeOutGetInfoNum() {
        let condition = " 1 = 1 and (f_enddate >= '" + Util.toStandardTimeString() + "' or f_state = '公告中') "
        let val = {
          items: "count(*) as count_num",
          tablename: "T_STOPGAS",
          orderitem: "1",
          condition: condition,
          f_orgstr: `'${Vue.user.orgid}'`
        }
        let http = new HttpResetClass()
        http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: val}, {
          resolveMsg: null,
          rejectMsg: null
        }).then((res) => {
          this.infoNum = res.data[0].count_num
        })
      },
      timeOutGetmeterNum() {
        let val = {
          items: "count(*) as count_num",
          tablename: "t_handplan",
          orderitem: "1",
          condition: `1=1 and f_inputtor = '${Vue.user.name}' and f_hand_state = '有效' and f_meter_state = '未抄表'`,
          f_orgid: `'${Vue.user.orgid}'`
        }
        let http = new HttpResetClass()
        http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: val}, {
          resolveMsg: null,
          rejectMsg: null
        }).then((res) => {
          this.meterNum = res.data[0].count_num
        })
      },
      imgback(val) {
        return require('../../assets/' + val + '.png')
      },
      // 返回主界面
      back() {
        this.titleName = '主界面'
        this.isMenu = true

      },
      gotopage(param, title, navigate) {
        console.log('进入子组件')
        var prpdata = {
          _this: this,
          title: title,
          safe: false
        }
        this.$dispatch('gotoson', prpdata)
        if (navigate) {
          this.$goto('embbed-page', {domainName: navigate, title: title, compName: param, login: Vue.user})
        } else {
          this.$goto(param, {sourcet: '竖屏', tabname: title},'self',this.getTabs)
        }
      },
      mute() {
        HostApp.mute()
      }
    },
  }
</script>
<style lang="less">
  .badge-content {
    color: #fff;
    box-sizing: border-box;
    min-width: 8px;
    font-size: 9px;
    line-height: 12px;
    white-space: nowrap;
    font-weight: 400;
    text-align: center;
  }

  .badge {
    top: 6px;
    position: absolute;
    max-height: 13px;
    min-height: 8px;
    right: 0;
    display: inline-flex;
    vertical-align: middle;
    box-sizing: content-box;
    border-radius: 100px;
    background-color: red;
  }

  .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;
  }

  .imgs {
    width: 35px;
    height: 39px;
    margin-top: 15px;
  }

  .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>
