<template>
  <div class="height100 flexYbox">
    <!-- 合并页 -->
    <ul class="m-tabs__header mrgb5" v-if="params.id == 'mergemenu'">
      <li class="font12" :class="{ active: pagesACV == item.id }" v-for="(item, index) in pageConfig" :key="index" @click="pagesCutFn(item.id)"><span class="text fl transition__all_3s">{{ item.title }}</span></li>
    </ul>
    <div class="flex hidden" v-if="params.id == 'mergemenu'">
      <div class="mergemenu__fixed" :class="{ active: pagesACV == item.id }" v-for="(item, index) in ids" :key="index">
        <reportForms :params="item" :key="'pm' + index"></reportForms>
      </div>
    </div>
    <reportForms :params="params" v-if="params.id != 'mergemenu'"></reportForms>
  </div>
</template>

<script>
import reportForms from './reportForms'

export default {
  name: 'reportFormPrn',
  components: {
    reportForms
  },
  props: {
    value: {
      type: [String, Number, Object],
      default: function () {
        return {}
      }
    },
    params: {
      type: [String, Number, Object],
      default: function () {
        return {}
      }
    }
  },
  data: function() {
    return {
      initState: false,
      postData: {},
      source: {},
      pagesACV: '',
      pageConfig: [],
      ids: []
    }
  },
  created () {
    if (this.params.id === 'mergemenu') {
      this.mergeMenu()
    }
  },
  mounted () {
  },
  methods: {
    // 合并菜单
    mergeMenu () {
      const _this = this
      this.$api({
        url: '/ts-query/api/user/combine/page/' + this.params.mid,
        method: 'get',
        data: {
          query: true
        }
      }).then(function (res) {
        if (res.success === true) {
          let d = []
          _this.pageConfig = JSON.parse(res.object.pageConfig || '[]')
          _this.pageConfig.forEach((v, i) => {
            let _d = JSON.parse(JSON.stringify(_this.params))
            _d.id = v.id
            if (i == 0) {
              _this.pagesACV = v.id
            }
            d.push(_d)
          })
          _this.ids = d
        } else {
          _this.$utils.msg(_this, res.message ||'数据加载失败！' ,'error')
        }
      })
    },
    // 切换
    pagesCutFn (id) {
      this.pagesACV = id
    }
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
.mergemenu__fixed{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1;
}
.mergemenu__fixed.active{
  z-index: 10;
}

.m-tabs{
    height: 300px;
}
.m-tabs__outbox{
    height: calc(100% - 2px);
    border: 1px #e8e8e8 solid;
    overflow: hidden;
}
.m-tabs__header{
    height: 30px;
    background-color: #fff;
    padding-bottom: 3px;
}
.m-tabs__header li{
  height: 26px;
  float: left;
  line-height: 26px;
  padding: 4px 0 3px 0;
  margin: 0 10px;
  /* background: #fcfcfc url(../images/mtas_03.jpg) no-repeat right top; */
  position: relative;
  cursor: pointer;
  font-size:14px ;
}
.m-tabs__header li.active{
    border-bottom: 2px solid var(--theme_color);
  color: var(--theme_color);
}
.m-tabs__header li .text:hover{
   color: var(--theme_color);
}
.m-tabs__header li .icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  overflow: hidden;
  line-height: 16px;
  border-radius: 100%;
  /* background-color: #d9dadc; */
  color: #999;
  position: absolute;
  right: 8px;
  top: 5px;
  cursor: pointer;
}
.m-tabs__header li .icon:hover{
    color: var(--base-black);
}
.m-tabs__header li.active{
    color: var(--base-acv);
}


li:first-child{
  margin: 0 10px 0 5px;
}

.m-tabs__box{
    /* width: calc(100% - 14px);
    height: calc(100% - 43px); */
    width: 100%;
    height: calc(100% - 30px);
    position: relative;
    /* padding: 6px; */
    overflow: hidden;
}
.m-tabs__con{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    overflow: hidden;
    overflow-y: auto;
    background-color: #fff;
}
.m-tabs-con__item{
    height: 100%;
    display: none;
}
.m-tabs-con__active{
    display: block;
}
</style>
