<template>
  <div class="page-style">
    <div class="section-header">
      <div class="screen-title">科技大脑智慧服务平台</div>
    </div>
    <div class="section-container">
      <div class="container-left">
        <card title="地区专利数量（项）" :heightPercentage="31">
          <barChart :chartHeight="containerHeight" :key="containerHeight"></barChart>
        </card>
        <card title="科技资源排行" :heightPercentage="31">
          <rank></rank>
        </card>
        <card title="热点科技词云" :heightPercentage="31">
          <WordCloud :words="keywords" height="280px"/>
        </card>
      </div>
      <div class="container-middle">
        <MapProvincial class="map-card"></MapProvincial>
        <card title="科技信息" :heightPercentage="31">
          <lineChart :key="containerHeight"></lineChart>
        </card>
      </div>
      <div class="container-right">
        <card title="专利转化潜力值排行" :heightPercentage="64.5">
          <div class="overview-card">
            <div class="rank-unit">单位（个）</div>
            <div class="rank-title">
              <div class="rank-title-name">排名</div>
              <div class="rank-title-name" style="flex: 4">专利名称</div>
              <div class="rank-title-name">潜力值</div>
            </div>
            <rank2></rank2>
          </div>
        </card>
        <card title="科技人才分类" :heightPercentage="31" :is-show-select="true" :select-options="peopleList">
          <div class="pie-block">
            <pieChart :chartHeight="containerHeight" :key="containerHeight" style="width: 50%"></pieChart>
            <div class="pie-legend-block">
              <div class="pie-legend-container" v-for="item in pieList" :key="item.id">
                <div class="pie-legend-icon" :style="{background: item.color}"></div>
                <div class="pie-legend-name">{{ item.name }}</div>
                <div class="pie-legend-num"><span style="font-weight: bold">{{ item.value }}</span>个</div>
              </div>
            </div>
          </div>
        </card>
      </div>
    </div>
  </div>
</template>

<script>
import card from './../components/card/index'
import barChart from '../components/bar/3DIndex.vue'
import barChart2 from '../components/bar/3DIndex2.vue'
import lineChart from '../components/line/index.vue'
import lineChart2 from '../components/line/index2.vue'
import pieChart from '../components/pie/index.vue'
import pieChart2 from '../components/pie/index2.vue'
import rank from '../components/scroll/index.vue'
import rank2 from '../components/scroll/index2.vue'
import WordCloud from '../components/wordCloud/index.vue'
import MapProvincial from '../components/map/mapProvincial.vue'

export default {
  name: 'generalPage',
  components: {
    card,
    barChart,
    barChart2,
    lineChart,
    lineChart2,
    pieChart,
    pieChart2,
    rank,
    rank2,
    WordCloud,
    MapProvincial
  },
  watch: {
    windowHeight(newValue) {
      console.log('触发')
      if (newValue >= 1000) {
        this.containerHeight = '240px'
      } else {
        this.containerHeight = '190px'
      }
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowHeight; // 通过 computed 访问 Vuex state
    }
  },
  data() {
    return {
      containerHeight: '220px',
      pieList: [
        {id: 1, value: 60, name: '信息技术', color: '#37FFC9'},
        {id: 2, value: 23, name: '生物医药', color: '#0084FF'},
        {id: 3, value: 16, name: '能源环境', color: '#19D6FF'},
        {id: 4, value: 4, name: '工业制造', color: '#FFE777'},
        {id: 5, value: 3, name: '食品工业', color: '#FF7908'}
      ],
      peopleList: [
        {id: 1, label: '行业应用'},
        {id: 2, label: '工作性质'}
      ],
      pieLegendList: [
        { iconClass: 'pie-chart-legend-icon1', des: '6个月及以下', num: 123 },
        { iconClass: 'pie-chart-legend-icon2', des: '12个月及以下', num: 456 },
        { iconClass: 'pie-chart-legend-icon3', des: '36个月及以下', num: 789 },
        { iconClass: 'pie-chart-legend-icon4', des: '36个月以上', num: 321 }
      ],
      selectedBanks: [],
      keywords: [
        'Digital Humans', 'Deep Learning', 'VR', 'AR', 'IoT',
        'Decentralization', 'Sustainability', 'Data Mining',
        'Autonomous Driving', 'MR'
      ]
    }
  },
  mounted() {
    if (this.windowHeight < 1000) {
      this.containerHeight = '190px'
    }
  },
  beforeDestroy() {
    clearInterval(this.interval); // 组件销毁时清除定时器
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>

.page-style {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  background: linear-gradient(270deg,
          #081B34 0%,   /* 深海军蓝 (≈原 #0A362A) */
          #0D2A50 35%,  /* 略亮一点，增加层次 */
          #113667 54%,  /* 主“亮点”，对应原 #0F4433 */
          #0D2A50 70%,  /* 对称回落 */
          #081B34 100%  /* 与首色呼应 */
  );
}

.section-header {
  position: relative;
  width: 100%;
  height: 80px;
  background: url("./../assets/images/screen1/blockTop/header_bg2.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.screen-title {
  position: absolute;
  width: 100%;
  height: 80px;
  line-height: 65px;
  text-align: center;
  top: 0;
  left: 0;
  font-family: YouSheBiaoTiHei;
  font-size: 40px;
  color: white;
  text-shadow: 0px 2px 3px #1E736C, 0px 0px 15px rgba(228, 239, 255, 0.1);
  font-style: normal;
  text-transform: none;
}

.section-container {
  position: relative;
  width: 100%;
  height: calc(100% - 80px);
  display: flex;
  justify-content: center;
  gap: 25px;
}

.container-left, .container-right {
  position: relative;
  width: 529px;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  flex-direction: column;
}

.container-middle {
  position: relative;
  width: 750px;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  flex-direction: column;
}

.map-card{
  position: relative;
  width: 700px;
  height: 59.5vh;
}

.bar-chart-top-block {
  position: relative;
  width: calc(100% - 30px);
  margin-left: 30px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.bar-unit-block {
  color: #85B6BC;
  margin-top: 10px;
}

.bar-point {
  position: relative;
  width: 200px;
  height: 25px;
  display: flex;
  justify-content: flex-end;
  color: white;
}

.bar-point-block {
  position: relative;
  width: 100px;
  display: flex;
  justify-content: center;
}

.bar-point-name {
  position: relative;
  width: 80px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 14px;
}

.pie-block {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}


.pie-legend-block {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.pie-legend-container {
  position: relative;
  width: 90%;
  height: 30px;
  background: url("./../assets/images/bg/pie_chart_legend_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  line-height: 30px;
  color: #DFF2F2;
}

.pie-legend-icon {
  position: relative;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

.pie-legend-name {
  flex: 1;
  text-align: left;
  font-size: 14px;
}

.pie-legend-num {
  font-size: 14px;
  margin-right: 10px;
}

.preview-main {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}


.overview-card{
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}
.rank-unit {
  position: relative;
  width: calc(100% - 40px);
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  display: flex;
  justify-content: flex-start;
  color: #8CAFE0;
}

.rank-title {
  position: relative;
  width: calc(100% - 40px);
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  display: flex;
  justify-content: space-between;
  background-color: #0D2847;
  color: #CBE2FF;
  font-size: 16px;
  font-weight: bold;
}

.rank-title-name{
  flex: 1;
  text-align: center;
}

.project-main{
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  justify-content: flex-start;
}
.tip-card{
  position: relative;
  width: calc(100% - 80px);
  margin-left: 40px;
  height: 20px;
  line-height: 35px;
  display: flex;
  justify-content: space-between;
  color: #37D3A5;
  font-size: 14px;
  font-weight: bold;
}

.tip-info{
  position: relative;
  width: 47.5%;
  height: 20px;
  display: flex;
  justify-content: space-between;
}

.pie-chart{
  width: 50%;
  position: relative;
  display: flex;
  justify-content: center;
}
.pie-chart-canvas{
  width: 60%;
}
.pie-chart-legend{
  width: 40%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.pie-chart-legend-container{
  position: relative;
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #DFF2F2;
  gap: 5px;
}

.pie-chart-legend-num{
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.pie-chart-legend-icon1, .pie-chart-legend-icon2, .pie-chart-legend-icon3, .pie-chart-legend-icon4{
  width: 6px;
  height: 6px;
  background-color: #159AFF;
  margin-top: 6px;
}
.pie-chart-legend-icon2{
  background-color: #76FAB3;
}
.pie-chart-legend-icon3{
  background-color: #65DFDD;
}
.pie-chart-legend-icon4{
  background-color: #FCC779;
}

.pie-chart-legend-des{
  text-align: left;
  width: 120px;
}

.bar-chart{
  width: 50%;
}

.bar-chart-canvas{
  position: relative;
  width: 100%;
  background: url("./../assets/images/bg/bar_bottom_bg.png") no-repeat;
  background-size: 100% auto;
  background-position: center calc(100% - 22px);
}

</style>
<style>
@media (max-width: 1919px) {
  .container-left, .container-right {
    width: 470px !important;
  }

  .container-middle {
    width: 700px !important;
  }

  .section-container {
    gap: 10px !important;
  }
}

</style>
