<template>
  <div style="overflow: auto">
    <div class="container1" v-show="tableShow" :class="{ 'zoom': zoom }">
      <button class="close1" @click="toggleZoom()">{{ !zoom ? '＋' : '－'}}</button>
      <div class="box">
        <new-exploration-user :dataname="'民用报建'"></new-exploration-user>
      </div>
    </div>

    <div class="container1" v-show="tableShow2" :class="{ 'zoom': zoom2 }">
      <div class="close1" @click="toggleZoom2">{{ !zoom2 ? '＋' : '－'}}</div>
      <div class="box">
        <new-exploration-user :dataname="'非民用报建'"></new-exploration-user>
      </div>
    </div>

    <div class="container1" v-show="tableShow3" :class="{ 'zoom': zoom3 }">
      <div class="close1" @click="toggleZoom3">{{ !zoom3 ? '＋' : '－'}}</div>
      <div class="box">
        <new-exploration-user :dataname="'设备变更'"></new-exploration-user>
      </div>
    </div>

    <div class="container1" v-show="tableShow4" :class="{ 'zoom': zoom4 }">
      <div class="close1" @click="toggleZoom4">{{ !zoom4 ? '＋' : '－'}}</div>
      <div class="box">
        <new-exploration-user :dataname="'改线业务'"></new-exploration-user>
      </div>
    </div>

    <div class="container1" v-show="tableShow5" :class="{ 'zoom': zoom5 }">
      <div class="close1" @click="toggleZoom5">{{ !zoom5 ? '＋' : '－'}}</div>
      <div class="box">
        <new-exploration-user :dataname="'设备拆除'"></new-exploration-user>
      </div>
    </div>

    <div class="container1" v-show="tableShow6" :class="{ 'zoom': zoom6 }">
      <div class="close1" @click="toggleZoom6">{{ !zoom6 ? '＋' : '－'}}</div>
      <div class="box">
        <new-exploration-user :dataname="'分户挂表'"></new-exploration-user>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  title: '报建流程',
  data () {
    return {
      zoom: false,
      zoom2: false,
      zoom3: false,
      zoom4: false,
      zoom5: false,
      zoom6: false,
      tableShow: true,
      tableShow2: true,
      tableShow3: true,
      tableShow4: true,
      tableShow5: true,
      tableShow6: true
    }
  },
  methods: {
    toggleZoom () {
      this.zoom = !this.zoom
      this.tableShow2 = !this.tableShow2
      this.tableShow3 = !this.tableShow3
      this.tableShow4 = !this.tableShow4
      this.tableShow5 = !this.tableShow5
      this.tableShow6 = !this.tableShow6
    },
    toggleZoom2 () {
      this.zoom2 = !this.zoom2
      this.tableShow = !this.tableShow
      this.tableShow3 = !this.tableShow3
      this.tableShow4 = !this.tableShow4
      this.tableShow5 = !this.tableShow5
      this.tableShow6 = !this.tableShow6
    },
    toggleZoom3 () {
      this.zoom3 = !this.zoom3
      this.tableShow2 = !this.tableShow2
      this.tableShow = !this.tableShow
      this.tableShow4 = !this.tableShow4
      this.tableShow5 = !this.tableShow5
      this.tableShow6 = !this.tableShow6
    },
    toggleZoom4 () {
      this.zoom4 = !this.zoom4
      this.tableShow2 = !this.tableShow2
      this.tableShow3 = !this.tableShow3
      this.tableShow = !this.tableShow
      this.tableShow5 = !this.tableShow5
      this.tableShow6 = !this.tableShow6
    },
    toggleZoom5 () {
      this.zoom5 = !this.zoom5
      this.tableShow2 = !this.tableShow2
      this.tableShow3 = !this.tableShow3
      this.tableShow4 = !this.tableShow4
      this.tableShow = !this.tableShow
      this.tableShow6 = !this.tableShow6
    },
    toggleZoom6 () {
      this.zoom6 = !this.zoom6
      this.tableShow2 = !this.tableShow2
      this.tableShow3 = !this.tableShow3
      this.tableShow4 = !this.tableShow4
      this.tableShow5 = !this.tableShow5
      this.tableShow = !this.tableShow
    }
  },
  watch: {}
}
</script>
<style scoped>
.container1 {
  max-width: 49%;
  width: 100%;
  height: 50%;
  position: relative;
  display: inline-block;
  margin: 3px;
  cursor: pointer;
  padding: 4px;
  background: #666666
}

.box {
  width: 100%;
  height: 100%;
}

.zoom {
  max-width: 99%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 0px solid #1e1f22;
}

.close1 {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 19px;
  font-size: 25px;
  font-weight: bold;
  background-color: #00a3f0;
  color: #000;
  border-radius: 50%;
  cursor: pointer;
}
</style>
