<template>
  <div class= "auto">
    <div style="text-align:center">欢迎</div>
    <div style="text-align:center">
      <span>{{orgCrumb}}</span>
      <img src="../../assets/mute.png" width="32" height="32" @click="mute"></img>
    </div>
    <route :comp="{name: 'attendance-tally'}" name="master-router"></route>
    <footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
      <table width="100%" height="30px">
        <tr>
          <td @click="go2('attendance-tally')">考勤<td>
          <td @click="go2('track-state')">状态跟踪<td>
          <td @click="trackPlan">任务跟踪<td>
          <td @click="go2('system-setting')">设置<td>
          <td @click="go2('check-notice')">公告<td>
          <td @click="go2('phone-book')">通讯录<td>
        </tr>
      </table>
    </div>
    </footer>
    <menu :show.sync="showModal" small>
      <div slot="modal-body" class="modal-body">
        <table align="center">
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('checker-annual')">安检员年度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('checker-monthly')">安检员月度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('plumber-annual')">维修员年度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('plumber-monthly')">维修员月度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
        </table>
      </div>
    <menu>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '所长界面',
  data() {
    return {
      orgs : Vue.orgs,
      showModal: false
    }
  },
  computed: {
    orgCrumb: function() {
      let oc = []
      if(this.orgs) {
        this.orgs.filter((item) => {
          return item.level != 4
        }).forEach(function(org) {
            oc.push(org.name)
        })
      }
      return oc.join('--')
    }
  },
  methods: {
    go2: function(widget, param) {
      this.$goto(widget, {}, 'master-router')
    },
    mute: function() {
      HostApp.mute()
    },
    trackPlan: function() {
      this.showModal = true
    }
  },
}
</script>
