<template>
  <div class="height100" style="position: relative;">
    <div
      class="height100"
      v-for="(item, index) in menu"
      :key="index"
      style="background: #fff; position: absolute; left: 0; top: 0; width: 100%;"
      :style="{ opacity: item.id == params.id ? '1':'0', 'pointer-events': item.id == params.id ? '':'none', 'z-index': item.id == params.id ? '10':'1' }"
    >
      <reportFormPrn v-if="show == true" :params="item" :key="'page' + index" :ref="'customModF' + index"></reportFormPrn>
    </div>
  </div>
</template>

<script>
import reportFormPrn from './customMod/reportFormPrn'

export default {
  name: 'customMod',
  components: {
    reportFormPrn
  },
  data: function() {
    return {
      show: true,
      menu: [],
      nowPage: {},
      params: {}
    }
  },
  created () {
    this.params = this.paramsFn()
    this.menu.push(this.params)
  },
  mounted () {
  },
  methods: {
    // 地址参数获取
    paramsFn (url) {
      let _url = url || sessionStorage.getItem("openUrl")
      let href = _url.split('?')
      let params = this.$utils.getparames(_url)
      if (href[0].indexOf('_') > -1) {
        href = href[0].split('_')
      }
      if (params.id === 'mergemenu') {
        params.mid = href[1]
      } else {
        params.id = href[1]
      }
      return params
    }
  },
  watch: {
    '$route' (to, from) {
      let state = true
      let index = 0
      this.params = this.paramsFn()
      this.menu.forEach((v, i) => {
        if (v.id === this.params.id) {
          state = false
          index = i
        }
      })
      if (state === true) {
        this.menu.push(this.params)
      }
      // this.$nextTick(() => {
      //   this.$refs['customModF' + index][0].refresh()
      // })
    },
    '$store.state.bi.closePageObj': {
      handler (n, o) {
        let params = this.paramsFn(n.url)
        for (let i in this.menu) {
          if (this.menu[i].id === params.id) {
            this.menu.splice(i, 1)
            break
          }
        }
      },
      deep: true
    }
  }
}
</script>

<style>
</style>
