<template>
  <div class="a">
    <div class="partTitleHM">
      降雨特征
      <div class="head-right" style="">
        <div
          class="head-item"
          v-for="(item, index) in yearList"
          :key="item"
          :class="activedname == item.name ? 'activedright' : ''"
          @click="yearclick(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="partContHM">
      <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现，且降雨量变化幅度大</div>
      <div class="HeadContent" v-else>年内降雨量分配不均匀，冬季干旱，雨雪稀少</div>
      <div class="box-body">
        <div style="height: 100%">
          <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh" v-if="activedname == '年际降雨变化'"></RainfallEcharts>
          <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import RainfallEcharts from '@/views/sponeScreen/Echarts/RainfallEcharts.vue'; //年际降雨变化

import RainfallLegend from '@/views/sponeScreen/Echarts/RainfallLegend.vue'; //年内降雨量

const chartData2 = ref({
  xAxis: [1985, 1900, 1995, 2000, 2005, 2010, 2015, 2020],
  yAxis: [700, 600, 750, 800, 750, 740, 780, 900],
  yAxis2: [7, 9, 10, 9, 11, 10, 12, 15],
  refresh: 1,
});
const chartData3 = ref({
  XName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  data1: [67, 97, 51, 338, 32, 11, 1, 51, 338, 32, 11, 1],

  data: [
    {
      coords: [
        ['1', 67],
        ['2', 97],
        ['3', 51],
        ['4', 338],
        ['5', 32],
        ['6', 11],
        ['7', 1],
        ['8', 51],
        ['9', 338],
        ['10', 32],
        ['11', 11],
        ['12', 1],
      ],
    },
  ],
  refresh1: 1,
});
const activedname = ref('年际降雨变化');

const ContentDetails = ref('');
const yearList = ref([
  { name: '年际降雨变化', value: 1 },
  { name: '年内降雨量', value: 2 },
]);
const a = ref('');
function yearclick(val) {
  console.log(val.name, 'val.name');
  activedname.value = val.name;
  console.log(activedname.value, 'activedname.value ');
}
const refresh = ref(1);
const refresh1 = ref(1);
</script>

<style lang="scss" scoped>
.a {
  height: 290px;
  // background: red;
  .HeadContent {
    width: 100%;
    height: 30px;
    background: #2270ff;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
  }
  .box-body {
    height: calc(100vh - 740px);
    padding-left: 5px;
    position: relative;
    overflow: auto;
  }
  .head-right {
    cursor: pointer;
    position: relative;
    font-size: 14px;
    left: 200px;
    top: -32px;
    color: #fffff;
    display: flex;
    max-width: 200px;
    overflow: hidden;
    overflow-x: auto;
    line-height: 18px;

    .head-item {
      margin-left: 10px;
      padding: 2px 3px;
      border: 1px solid transparent;
      background: #013a73;
      height: 23px;
      text-align: center;
      min-width: 42px;
      border: 1px solid #2270ff;
    }

    .activedright {
      border: 1px solid #2cfce9;
      color: #e4f5ff;
      background: #166f84;
    }
  }
}
</style>