<template>
  <div class="row nav-bgcolor" >
    <!--<div class="row auto" style="background-color: #4C647A; padding-top: 40px;">-->
      <!--<p class="text-left" style="padding-left: 20px;">-->
        <!--<img src="../../assets/燃气缴费 (2).png" style="width: 60px;border: 2px solid white;border-radius: 4%;"  alt="燃气缴费">-->
        <!--<span style="color: white;font-size: 20px;">&nbsp;&nbsp;&nbsp;手机抄表系统</span>-->
        <!--<span style="color: white;font-size: 14px;display: block;padding-left: 80px;">-->
          <!--抄表员：{{userInfo.name}} （{{userInfo.id}}）-->
        <!--</span>-->
      <!--</p>-->
    <!--</div>-->
    <div class="row auto" style="padding-bottom: 1em">
      <div class="col-xs-4 text-center pageskuang" @click="goPage('计划下载')">
        <img src="../../assets/计划下载.png" class="imgs" alt="">
        <p class="text-center name" style="margin: 10px 0;">计划下载</p>
      </div>
      <div class="col-xs-4 text-center pageskuang" @click="goPage('抄表管理')">
        <img src="../../assets/抄表管理.png" class="imgs" alt="">
        <p class="text-center name" style="margin: 10px 0;">抄表管理</p>
      </div>
      <div class="col-xs-4 text-center pageskuang"  @click="goPage('抄表记录')">
        <img src="../../assets/抄表记录.png" class="imgs" alt="">
        <p class="text-center name" style="margin: 10px 0;">抄表记录</p>
      </div>
      <div class="col-xs-4 text-center pageskuang"  @click="goPage('临时周检')">
        <img src="../../assets/抄表管理.png" class="imgs" alt="">
        <p class="text-center name" style="margin: 10px 0;">临时周检</p>
      </div>
      <div class="col-xs-4 text-center pageskuang" @click="goPage('表单上传')">
      <img src="../../assets/表单上传.png" class="imgs" alt="">
      <p class="text-center name" style="margin: 10px 0;">表单上传</p>
    </div>
    </div>
  </div>
</template>

<script>
  import AppData from '../../stores/AppData'
  import Vue from 'vue'
  export default {
    title: '底部导航',
    data () {
      return {
        userInfo: {}
      }
    },
    props: {
      menus: {
        type: Array,
        default: function () {
          return [
            {name: '计划下载', imgpath: '../../assets/下载 (2).png'},
            {name: '抄表管理', imgpath: '../../assets/报表.png'},
            {name: '抄表记录', imgpath: '../../assets/历史 (2).png'},
            {name: '表单上传', imgpath: '../../assets/上传 (4).png'}
          ]
        }
      }
    },
    ready () {
      console.log()
      this.userInfo = Object.assign({}, this.userInfo, Vue.user)
    },
    methods: {
      goPage (page) {
        this.$dispatch('menu', page)
      }
    }
  }
</script>
<style>
  .plan {
    border-bottom: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .meter{
    border-bottom: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .info{
    border-bottom: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .upload{
    border-top: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .space1{
    border-top: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .space2{
    border-top: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .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;
  }
  .name{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .imgs{
    width: 60px;
    margin-top: 15px;
  }
</style>
