<template>
    <div class="dashboard-container">
      <!-- 1 -->
      <div class="dashboard-row">
        <div class="dashboard-col wide">
          <div class="allarea">
            <AllArea @year-change="handleYearChange" />
          </div>
        </div>
        <div class="dashboard-col narrow">
          <div class="itemhead">
            <span>消息通知</span>
          </div>
          <div class="mainarea">
            <Message />
          </div>
        </div>
      </div>
  
      <!-- 2区-->
      <div class="dashboard-rowtwo">
        <div class="dashboard-col wide bgcicon">
          <MapArea />
        </div>
        <div class="dashboard-col narrow">
          <div class="itemhead" style="margin: .5rem 0 0 0;">
            <span>功能区</span>
          </div>
          <div class="relaitem">
            <FunctionArea :years="years" />
          </div>
  
          <div class="itemhead" style="margin: 0;">
            <span>投资主体</span>
          </div>
          <div class="relaitem">
            <InvestArea :years="years" />
          </div>
        </div>
      </div>
  
      <!-- 3 -->
      <div class="dashboard-row">
        <div class="dashboard-col">
          <div class="itemhead">
            <span>产业数据分析</span>
          </div>
          <div class="relaitem">
            <Cyeshuju />
          </div>
        </div>
        <div class="dashboard-col">
          <div class="itemhead">
            <span>产业导向目录分析</span>
          </div>
          <div class="relaitem">
            <Cydxml />
          </div>
        </div>
        <div class="dashboard-col">
          <div class="itemhead">
            <span>产业导向细分产业分析</span>
          </div>
          <div class="relaitem">
            <Cydxxfgl />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import AllArea from '@/views/components/analysis/all.vue'
  import FunctionArea from '@/views/components/analysis/function.vue'
  import InvestArea from '@/views/components/analysis/invest.vue'
  import Message from '@/views/components/analysis/message.vue'
  import ProjectList from '@/views/components/analysis/projectList.vue'
  import MapArea from '@/views/components/analysis/map.vue'
  import Cyeshuju from '@/views/components/analysis/chanyeshuju.vue'
  import Cydxml from '@/views/components/analysis/chanyedxml.vue'
  import Cydxxfgl from '@/views/components/analysis/chanyexfgl.vue'
  import { investall, fungong } from '@/api/ManageApi/index'
  
  export default {
    components: {
      AllArea,
      FunctionArea,
      InvestArea,
      Message,
      ProjectList,
      MapArea,
      Cyeshuju,
      Cydxml,
      Cydxxfgl
    },
    data() {
      return {
        years: new Date().getFullYear().toString(),
        allnumber: {
          touzinumber: 0
        },
        functionnumber: {
          functionnumber: 0
        }
      };
    },
    methods: {
      handleYearChange(years) {
        this.years = years;
        console.log("index.vue: handleYearChange called with years:", years); 
      },
      async getData() {
        const response = await investall();
        if (response && response.data) {
          const totalCount = response.data.reduce((sum, item) => sum + item.count, 0);
          this.allnumber = {
            touzinumber: totalCount
          };
        }
      },
      async getfuncdata() {
        const response2 = await fungong();
        if (response2 && response2.data) {
          const totalCount2 = response2.data.reduce(
            (sum, item) => sum + item.count, 0
          );
          this.functionnumber = {
            functionnumber: totalCount2
          }
        }
      }
    },
    created() {
      this.getData();
      this.getfuncdata();
    }
  };
  </script>
  
  
  <style scoped>
  .dashboard-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5rem;
    gap: 0.5rem;
    box-sizing: border-box;
    overflow: auto;
  }
  
  .dashboard-row {
    display: flex;
    flex: 1;
    gap: 0.5rem;
  
  }
  
  .dashboard-rowtwo {
    display: flex;
    height: auto;
    gap: 0.5rem;
  
  }
  
  .dashboard-col {
    flex: 1;
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .dashboard-col.wide {
    flex: 2;
  }
  
  .dashboard-col.narrow {
    flex: 1;
  }
  
  .itemhead {
    width: 100%;
    border-left: 0.25rem solid #2B62F1;
    margin: 0.5rem 0;
    margin: 0.5rem 0;
    height: 1.25rem;
    display: flex;
    align-items: center;
  }
  
  .relaitem {
    flex: 1;
    position: relative;
  }
  
  .itemsall {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 33%;
    left: 23%;
    z-index: 1;
  }
  
  .itemsall span:nth-child(1) {
    font-family: DINbold;
    font-weight: 500;
    font-size: 1.25rem;
    color: #292C33;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  
  .itemsall span:nth-child(2) {
    font-family: alibold;
    font-weight: 400;
    font-size: 0.68rem;
    color: #9E9E9E;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  
  .itemhead span {
    margin-left: 1rem;
    font-family: alibold;
    font-weight: 600;
    font-size: 1rem;
    color: #3D424C;
    line-height: 1.69rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  
  .mainarea {
    flex: 1;
    padding: 0 0 0 .5rem;
    overflow: auto;
  }
  
  .allarea {
    flex: 1;
    padding: 0rem 1rem 0 1rem;
    display: flex;
    flex-direction: column;
  }
  
  .bgcicon {
    padding: 0 !important;
  }
  
  
  </style>