<template>
  <div class="flex-row">
    <div class="baobiao">
      <tab-button v-ref:list :active="0">
        <tabs header="市场开发部月度报表" v-if="gettRolesnames('市场部报装')">
          <apply-stair-kaifa  v-ref:paperfeimain></apply-stair-kaifa>
        </tabs>
        <tabs header="每月安装收入明细表" v-if="gettRolesnames('营业厅报装')">
          <apply-stair-anzhuang  v-ref:papermain></apply-stair-anzhuang>
        </tabs>
        <tabs header="用户管理部通气月报表" v-if="gettRolesnames('用户管理部报装')">
          <apply-stair-tongqi  v-ref:paperfeimain></apply-stair-tongqi>
        </tabs>
        <tabs header="用户管理部未通气月报表" v-if="gettRolesnames('用户管理部报装')">
          <apply-stair-wtongqi  v-ref:paperfeimain></apply-stair-wtongqi>
        </tabs>
        <tabs header="工程部安装户数月报表" v-if="gettRolesnames('工程部派工')">
          <apply-gongchengbu  v-ref:paperfeimain></apply-gongchengbu>
        </tabs>
      </tab-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import {HttpResetClass} from 'vue-client'
export default {
  title: '报表明细',
  data () {
    return {
      showRight: false,
      type: null,
      selectdata: null,
      show: []
    }
  },
  methods: {
    gettRolesnames (str) {
      return this.$login.f.rolesnames.includes(str)
    }
  },
  events: {
    'handleOrder' (type, row) {
      this.showRight = false

      this.type = type
      this.selectdata = row

      this.$nextTick(() => {
        this.showRight = true
      })
    },
    'search' () {
      this.selectdata = null
      this.showRight = false
      this.type = null

      this.$refs.query.$refs.cp.$refs.cri.search()
    }
  },
  watch: {
  }
}
</script>
<style>
.baobiao {
  padding: 1%;
  margin: 1%;
  width: 99%;
  height: auto;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0px 1px 10px 0px rgba(2, 56, 104, 0.13);
}

.baobiao-right {
  padding:  1%;
  margin: 1% 1% 1% 0;
  width: 58%;
  height: auto;
  background-color: #ffffff;
  box-shadow: 0px 1px 10px 0px rgba(2, 56, 104, 0.13);
  border-radius: 14px;
}
</style>
