<template>
  <div class="container max-w max-h">
    <div class="header-container">
      <!-- <img  src="/public/images/headerbanner.png" /> -->
    </div>
    <div class="flex nav-container jc-c">
      <div class="flex max-h common-w">
        <div class="flex flex-1 fz-22 fw-b cursor nav-li fc-w ai-c jc-c" v-for="(item,index) in navsArr" :class="navsIndex==index?'active':''" @click="navsClick(index)">
          <div :class="navsIndex==index?'nav-active':''">{{item}}</div>
        </div>
      </div>
    </div>
    <div class="flex section-container jc-c" >
      <!-- 首页 -->
      <HomePage v-if="navsIndex==0" @moreclick="moreclick" @godetails="godetails" @newsClick="newsClick" @bfcgClick="bfcgClick"></HomePage>
      <!-- 商品 -->
      <GoodsPage :detail="roleInfo.listDetailData" v-if="navsIndex==1"></GoodsPage>
      <!-- 供需 -->
      <SupplyPage :detail="roleInfo.listDetailData" v-if="navsIndex==2"></SupplyPage>
      <!-- 金融服务 -->
      <FinancialService :detail="roleInfo.listDetailData" v-if="navsIndex==4"></FinancialService>
      <!-- 新闻 -->
      <NewsPage :lisdata="roleInfo.newsDetail" v-if="navsIndex==100"></NewsPage>
      <!-- 帮扶成果下级 -->
      <goodsWay v-if="navsIndex==200"></goodsWay>
    </div>
    <!-- <div class="footer-container">
      <footerBox></footerBox>
    </div> -->
  </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import HomePage from "../HomePage/index.vue";
import GoodsPage from "../GoodsPage/index.vue";
import SupplyPage from "../SupplyPage/index.vue";
import FinancialService from "../FinancialService/index.vue";
import NewsPage from "../NewsPage/index.vue";
import footerBox from "./widget/footer.vue";
import mapBox from "../Map/index.vue";
import goodsWay from "../goodsWay/index.vue";

export default defineComponent({
  name: "Index",
  components: {
    HomePage,
    GoodsPage,
    SupplyPage,
    goodsWay,
    FinancialService,
    NewsPage,
    footerBox,
    mapBox
  },
  setup() {
    let data = reactive({
      navsIndex: 0,
      navsArr: ["首页","商品","供需", "财务系统","金融服务","地图大屏"],
      roleInfo:{
        listDetailData:'',
        newsDetail: ''
      }
    });
    const route = useRoute();
    const router = useRouter();
    watch(
      () => router.currentRoute.value,
      (newValue) => {
        data.navsIndex = newValue.query.navIndex
      },
      { immediate: true }
    )
    onMounted(() => {
      if(route.query.navIndex){
        data.navsIndex = route.query.navIndex;
      }else{
        data.navsIndex = 0
      }
    });
    let methods = {
      navsClick(index){
        if(index == 3){
          window.open('http://111.16.49.213:8030/new/#/login', '_blank')
        }else if(index == 5){
          window.open('/#/map', '_blank')
        }else{
          data.navsIndex = index
          router.push({
            path: '/',
            query: {
              navIndex: index,
              type: 1,
            }
          })  
        }
        
      },
      newsClick(e){
        data.roleInfo.newsDetail = e
        data.navsIndex = 100
      },
      bfcgClick(){
        data.navsIndex = 200
      },
      moreclick(e){
        if(e == "maps"){
          window.open('/#/map', '_blank')
        }else{
          data.navsIndex = e
          router.push({
            path: '/',
            query: {
              navIndex: e,
              type: 1,
            }
          })
        }
      },
      godetails(e){
        console.log('oooobbb', e)
        data.navsIndex = e.index
        data.roleInfo.listDetailData = e.record
        router.push({
            path: '/',
            query: {
              navIndex: e.index,
              type: 2,
            }
          })
      }
    };
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped>
  .common-w{
    width: 1280px;
  } 
  .container{
    background: #F4F5F9;
  }
  .header-container{
    width: 100%;
    height: 242px;
    background: url("/public/images/headerbanner.png") no-repeat center;
  }
  .nav-container{
    width: 100%;
    height: 56px;
    background: #B91410;
  }
  .nav-active{
    padding-bottom: 5px;
    border-bottom: 2px solid #fff;
  }
  .nav-li.active{
    background: #8C0000;
  }
  .nav-li:hover{
    background: #8C0000;
  }
  .section-container{
    width: 1280px;
    padding: 30px 0;
    min-height: 700px;
    margin: 0 auto;
  }
  .footer-container{
    width: 100%;
  }

</style>