<template>
  <view class="ComCss">
    <u-navbar class="navBarCss" :title="reportData1.reportName"
      :titleStyle="{'fontSize':'36rpx','color':'#333333','fontWeight':'700'}" leftClick="leftClick" :autoBack="true"
      safeAreaInsetTop placeholder />
    <view class="topCss">
      <u-tabs :list="tabList" @click="modifyCur" :current="current" lineColor="#f56c6c" :activeStyle="{
                     color: '#cf000d',
                     fontWeight: 'bold',
                     transform: 'scale(1.1)',
                     fontSize:'32rpx'
                 }" itemStyle="height: 78rpx;padding:22rpx 34rpx">
      </u-tabs>
    </view>
    <view class="bodyCss">
      <reportModule1 v-if="current == 0" :reportData="reportData1"></reportModule1>
      <reportModule2 v-if="current == 1"></reportModule2>
      <reportModule3 v-if="current == 2"></reportModule3>
      <reportModule4 v-if="current == 3"></reportModule4>
      <reportModule5 v-if="current == 4"></reportModule5>
    </view>
  </view>
</template>

<script>
  import {
    getOrganize,
    getGeneralOverview,
    getGeneralOverviewAttach,
    getBusinessAnalyze,
    getNewBuildingInfo,
    getNewBuildingItem,
    getDevelopmentPlan,
    getTargetSuggestion
  } from '@/api/organize.js'
  import reportModule1 from "./components/reportModule1.vue"
  import reportModule2 from "./components/reportModule2.vue"
  import reportModule3 from "./components/reportModule3.vue"
  import reportModule4 from "./components/reportModule4.vue"
  import reportModule5 from "./components/reportModule5.vue"
  export default {
    components: {
      reportModule1,
      reportModule2,
      reportModule3,
      reportModule4,
      reportModule5
    },
    props: {

    },
    data() {
      return {
        current: 0,
        reportNo:null,
        reportData1:{},
        reportData2:{},
        reportData3:{},
        reportData4:{},
        reportData5:{},
        tabList: [{
          name: '组织实施落实'
        }, {
          name: '天燃气市场总体概况',
        }, {
          name: '重点业务市场分析'
        }, {
          name: '未来发展规划、 所需资源配置 '
        }, {
          name: '目标思路建 '
        }],
      }
    },
    computed: {

    },
    onLoad(data) {
      if(data){
        this.reportNo = data.reportNo;
      }
      console.log(this.reportNo);
      this.initData()
    },
    methods: {
      modifyCur(data){
        this.current = data.index;

      },
      initData(){
        getOrganize(this.reportNo).then(res =>{
          if(res.code === 200){
            this.reportData1 = res.data;
          }
          console.log(this.reportData1);
        })
        getGeneralOverview(this.reportNo).then(res =>{
          if(res.code === 200){
            this.reportData2 = res.data;
          }
          console.log(this.reportData2);
        })
        // getGeneralOverview()
        // getGeneralOverviewAttach
        // getBusinessAnalyze
        // getNewBuildingInfo
        // getNewBuildingItem
        // getDevelopmentPlan
        // getTargetSuggestion
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ComCss {
    background: #f2f4f3;
  }
  .topCss{
    background: #fff;
  }
  .bodyCss {

  }
</style>
