<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)">
          <div class="badge"
               v-show="isshowTag&&tab.num&&tab.num>0"
          ><div class="badge-content">{{tab.num>99?'99+':tab.num}}</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">{{ safeckNum?safeckNum:0 }}</div>
          </div>
          <div class="badge" v-show="tab.name == '维修待办' && isShowRedNum && isShowRedNum == 'true'">
            <div class="badge-content">{{ repairNum?repairNum:0 }}</div>
          </div>
          <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>
    <validator name="v">
      <modal
        v-if="showModal"
        :show.sync="showModal"
        backdrop="false"
        title="工程类型"
        cancel-text="取消"
        ok-text="确认"
        :callback="apply"
      >
        <div class="form-horizontal" slot="modal-body">
          <div class="row form-group app-input" style="margin: 10px auto">
            <label class="">报建类型：</label>
            <div class="col-sm-8">
              <v-select
                v-model="applyType"
                placeholder='请选择需要发起的工程类型'
                :value.sync="applyType"
                :options='applyTypes'
                :value-single="true"
                class="select select_list"
                :search="false"
                close-on-select ></v-select>
            </div>
          </div>
        </div>
      </modal>
    </validator>
    <modal :show.sync="shownotices" backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h3 style="text-align: center;">新公告提醒</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <div  class="auto app-text" style="margin-top: 5px;">
          <div class="panel" style="padding: 10px 10px 5px 10px;">
            <div class="panel-body panel-self">
              <div class="col-xs-12">
                <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>标题:</b></p>
                <p class="panel-title col-xs-5 text-left input-font" style="width: 74%">{{notices.f_title}}</p>
              </div>
              <div class="col-xs-12">
                <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>内容:</b></p>
                <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ notices.f_explain }}</p>
              </div>
              <div class="col-xs-12">
                <p class="panel-title text-left font" style="width: 23%;float: left"><b>状态:</b></p>
                <p class="panel-title text-left input-font" style="width: 77%">{{notices.f_state}}</p>
              </div>

              <div class="col-xs-12">
                <p class="panel-title text-left font" style="width: 30%;float: left"><b>发布时间:</b></p>
                <p class="panel-title text-left input-font" style="width: 100%">{{notices.f_date}}</p>
              </div>
              <div class="col-xs-12">
                <p class="panel-title text-left font" style="width: 30%;float: left"><b>结束时间:</b></p>
                <p class="panel-title text-left input-font" style="width: 100%">{{notices.f_enddate}}</p>
              </div>
              <div class="col-xs-12">
                <p class="panel-title text-left font" style="width: 30%;float: left"><b>操作人:</b></p>
                <p class="panel-title text-left input-font" style="width: 100%">{{notices.f_operator}}</p>
              </div>
              <div class="col-xs-12">
                <p class="panel-title text-left font" style="width: 30%;float: left"><b>紧急公告:</b></p>
                <p class="panel-title text-left input-font" style="width: 100%">{{notices.f_urgency ? '是' : '否'}}</p>
              </div>
              <div class="col-xs-12">
                <img-self :width="300" :height="400"  alt="无照片！！！" :src="notices.f_downloadfile.split(':')[1]"></img-self>
              </div>
              <div class="col-xs-12">
                <button type="button" name="button" class="btn btn-primary" style="background-color:#499edf;float: right" @click="closeshowModal()">确认</button>
              </div>
            </div>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>
</template>

<script scoped>
import Vue from 'vue'
import {HttpResetClass} from "vue-client";
export default {
  title: '待办工作导航',
  data() {
    return {
      titleName: '待办工作',
      showModal: false,
      isMenu: true,
      isshowTag:false,
      shownotices:false,
      tabs: [],
      safeckNum:0,
      repairNum:0,
      model:{},
      notices:{},
      weakPassword: false,
      modifyPassword: false,
      isShowStopGas:this.$appdata.getSingleValue('公告展示'),
      text: '导航组件this',
      beforeName: '待办工作',
      componentName: 'repair-first',
      sourcet: '竖屏',
      meterNum:null,
      isShowRedNum:this.$appdata.getSingleValue('手机端获取任务条数'),
      applyType: '',  // 报建类型
      // applyTypes:this.$appdata.getParam("手机报建类型"),
      applyTypes: [{label: '散户报建', value: '散户报建'}, {label: '工商户报建', value: '工商户报建'}, {
        label: '团购报建',
        value: '团购报建'
      }, {label: '改管报建', value: '改管报建'}, {label: '增容报建', value: '增容报建'}, {
        label: '退款报建',
        value: '退款报建'
      }, {label: '团购转散户', value: '团购转散户'}, {label: '报警器报建', value: '报警器报建'}, {label: '工商业报警器报建', value: '工商业报警器报建'}],

    }
  },
  ready () {
    this.getNoTagTabs()
    this.getmeterNum()
    this.getModelSum()
    this.searchStopGas()
    this.tabs.sort((a, b) => new Date(a.f_create_date) - new Date(b.f_create_date))
    console.log('this.tabs=', JSON.stringify(this.tabs))
  },
  methods: {
    closeshowModal(){
      this.shownotices = false
      this.saveIsShowStopGas()
    },
    searchStopGas(){
      if(!this.isShowStopGas || !this.isShowStopGas == 'true'){
        return
      }
      let http = new HttpResetClass()
      var condition = `1=1 and f_state = '公告中' and f_typeofreceipt = '手机端'`
      let data = {
        items: '*',
        tablename: 'T_STOPGAS',
        condition: condition,
        orderitem: 'id desc'
      }
      http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/singleTable_OrderBy`, {data: data}, {
        resolveMsg: null,
        rejectMsg: null
      }).then((res) => {
        this.notices = res.data[0]
        this.showStopGas(res.data[0].id,Vue.user.id)
      }).catch((e)=>{
      })
    },
    showStopGas(stopId,userid){
      let http = new HttpResetClass()
      var condition = `f_stopgas_id = '${stopId}' and f_user_id = '${userid}'`
      let data = {
        items: '*',
        tablename: 't_notice_notarize',
        condition: condition,
        orderitem: 'f_id desc'
      }
      http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/singleTable_OrderBy`, {data: data}, {
        resolveMsg: null,
        rejectMsg: null
      }).then((res) => {
        if (res.data.length === 0) {
          this.shownotices = true
        }else if (res.data[0].f_phstate !== '已确认' ){
          this.model.f_id = res.data[0].f_id
          this.shownotices = true
        } else {
          this.shownotices = false
        }
      }).catch((e)=>{
        console.log('报错了！！')
        console.error(e)
      })
    },
    saveIsShowStopGas(){
      this.model.f_stopgas_id = this.notices.id
      this.model.f_phstate = '已确认'
      this.model.f_user_id = Vue.user.id
      console.log('保存', this.model)
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/savenoticenotarize`, {data:this.model}).then((res) => {
        this.model.f_stopgas_id = ''
        this.model.f_user_id = ''
      }).catch((res) => {
        console.log('打印报错信息'+ res)
      })
    },
    click (row) {
      let _this = this
      this.$dispatch('gotoson', {
        _this: _this,
        title: row.defname,
        safe: true
      })
      this.$goto('app-service-control', {selectdata: row})
    },
    async getProcessId(processname) {
      let data = {
        workname: processname
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        `${this.$androidUtil.getProxyUrl()}/rs/logic/getProcessId`,
        {data: data},
        {resolveMsg: null, rejectMsg: '流程标识获取失败！！！'}
      )

      return res.data
    },
    async apply () {
      if (this.applyType === '' || this.applyType === null) {
        this.$showAlert('请选择需要发起的类型', 'warning', 3000)
        return
      }
      let data = {
        f_apply_type: this.applyType
      }
      if (this.applyType === '散户报建') {
        data.processname = '散户报建流程'
        data.defname = '报装申请'
      } else if (this.applyType === '工商户报建') {
        data.processname = '工商户报建流程'
        data.defname = '报装申请'
      } else if (this.applyType === '改管报建') {
        data.processname = '改管报建流程'
        data.defname = '报装申请'
      } else if (this.applyType === '增容报建') {
        data.processname = '增容报建流程'
        data.defname = '报装申请'
      } else if (this.applyType === '团购报建') {
        data.processname = '团购报建流程'
        data.defname = '报装申请'
      } else if (this.applyType === '退款报建') {
        data.processname = '退款报建流程'
        data.defname = '终止报建'
      } else if (this.applyType === '团购转散户') {
        data.processname = '团购转散户报建流程'
        data.defname = '信息确认'
      }else if (this.applyType === '报警器报建') {
        data.processname = '报警器报建流程'
        data.defname = '报装申请'
      }else if (this.applyType === '工商业报警器报建') {
        data.processname = '工商业报警器报建流程'
        data.defname = '报装申请'
      } else {
        this.$showMessage('暂无此类报装')
        return
      }

      data.f_sub_state = "新增"
      data.f_apply_source = "线下发起"
      data.f_process_id = await this.getProcessId(data.processname)

      // 调用ExplorationUser事件

      this.click(data)
      this.applyType = null
      this.showModal = false
    },
    // 查询本地所有待办
    getModelSum(){
      for(var i = 0;i<this.tabs.length;i++){
        if(this.tabs[i].link == 'zhihuan-first' ){
          this.getZhihuan()
        }
        if(this.tabs[i].link == 'repair-first' ){
          this.getRepair()
        }
        if(this.tabs[i].link == 'current-create' ){
          this.getSafeCheck()
        }
      }
    },
    getRepair(){
      if (!this.isShowRedNum || this.isShowRedNum != 'true') {
        return
      }
      var _this = this;
      let bbb = _this.$androidUtil.path({'alias':`getServiceMobile`,'data':{condition:'1 = 1'}})
      if (bbb.code === 200) {
        _this.repairNum = bbb.data.length
      }
    },
    getSafeCheck(){
      if (!this.isShowRedNum || this.isShowRedNum != 'true') {
        return
      }
      var _this = this;
      let aaa = _this.$androidUtil.path({'alias':`safecheckGetServiceMobile`,'data':{condition:'1 = 1'}})
      if (aaa.code === 200) {
        _this.safeckNum = aaa.data.length
      }
    },
    getZhihuan(){
      if (!this.isShowRedNum || this.isShowRedNum != 'true') {
        return
      }
    },
    changesum(titdata){
      for(var i = 0;i<this.tabs.length;i++){
        if(this.tabs[i].name == titdata.title){
          this.tabs[i].icon = titdata.sum + '单'
          return
        }
      }
    },
    getNoTagTabs(){
      for(let funs in Vue.functions){
        if(Vue.functions[funs].link == 'attend-manage'){
          this.$set('tabs',Vue.functions[funs].children)
        }
      }
      this.getTabs()
    },
    getTabs(){
      if (Vue.android) {
        if(Vue.config.telephone&&Vue.config.telephone.TipConfig&&Vue.config.telephone.TipConfig.data) {
          this.isshowTag = true
          const config = Vue.config.telephone.TipConfig.data
          const user = Vue.user
          console.log("Vue.android" + Vue.android)
          const result = this.$androidUtil.syncBzLogic("TipConfig", {data: {config, user}})
          if (result.code === 200) {
            for (var i = 0; i < this.tabs.length; i++) {
              result.result.forEach(ress => {
                if (this.tabs[i].link === ress.link) {
                  this.$set('tabs[' + i + '].num', ress.num)
                }
              })
            }
          }
        }
      } else {
        const result = {
          "code": 200,
          "result": [{"link": "repair-first", "num": 50}, {"link": "current-create", "num": 30}]
        }
        if (result.code === 200) {
          for (var i = 0; i < this.tabs.length; i++) {
            result.result.forEach(ress => {
              if (this.tabs[i].link === ress.link) {
                this.$set('tabs[' + i + '].num', ress.num)
              }
            })
          }
        }
      }
      this.getmeterNum()
      this.getModelSum()
    },
    getmeterNum() {
      if (!this.isShowRedNum || this.isShowRedNum != 'true') {
        return
      }
      this.timeOutGetmeterNum()
    },
    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) {
      if(title === '工程发起'){
        this.showModal = !this.showModal
      }else{
        var prpdata = {
          _this:this,
          title:title,
          safe:false
        }
        this.$dispatch('gotoson',prpdata)
        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;
  //transform: translate(50%,-50%);
  right:0;
  display: inline-flex;
  vertical-align: middle;
  box-sizing: content-box;
  border-radius: 100px;
  background-color: red;
}
.app-input {
  label {
    float: left;
  }
  .select {
    button {
      border: none;
      outline: none;
      text-align: left;
      .btn-placeholder {
        color: #ACA899
      }
    }
  }
  .datepicker {
    .form-control:focus {
      border: none!important;
      outline: none!important;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }
}
.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>
