<template>
  <div id="unit" class="flex-row binary">
    <div class="three-left" :style="{width:'18%'}">
    <div class="flex">
      <report-items-special @select-type="showReportType" :inindex="index"></report-items-special>
      <!--<report-history @select-changed="showReport" v-ref:history></report-history>-->
    </div>
    </div>
    <!-- 使用动态页签
    <dynamic :comps='[]' name='report'></dynamic> -->
    <!-- 使用路由切换 -->
    <div :style="{width:'82%'}">
      <div class="flex" v-if="$refs.route.cards.length === 0">
        <echarts-box></echarts-box>
      </div>
      <route  v-ref:route @save-success="$refs.history.search" v-show="!($refs.route.cards.length === 0)"></route>
    </div>
  </div>
</template>

<script>
export default {
  title: '报表汇总',
  data () {
    return {
      comp: [],
      index:''
    }
  },
  methods: {
    // 根据选择的数据直接显示保存的报表
    showReport (row) {
      this.$refs.route.init(row.val.f_component_name, {data: row.val})
    },
    // 根据报表的类型选择显示报表
    showReportType (index,row) {
      let m=document.getElementsByName('style')
      console.log(m.length)
      for(let i=0; i < m.length; i++){
        m[i].style.backgroundColor="#ffffff"
        m[i].style.borderColor="#000000"
        m[i].style.color="#000000"

        if(i==index){
          m[i].style.backgroundColor="#0688ce"
          m[i].style.borderColor="#0688ce"
          m[i].style.color="#ffffff"
        }
      }
      this.index=index
      this.$refs.route.init(row.f_report_path, {data: row})
    }
  }
}
</script>
<style>
. mystyle{
  background-color: #05c3c7;
}
</style>
