<template>
  <div class="beta-gamma-spectrum" :class="{ 'has-max': isMax }">
    <roi-limit-item
      v-for="(_, index) in 4"
      :key="index"
      :title="`ROI${index + 1}`"
      :title-color="RoiTitleColors[index]"
      :roi-list="ROILists[index]"
      :analyze-result="ROIAnalyzeLists[index]"
      @toggle="handleToggle"
      @title-click="handleToggleROIRect(index)"
    />
  </div>
</template>

<script>
import CustomChart from '@/components/CustomChart/index.vue'
import RoiLimitItem from './components/RoiLimitItem.vue'
const RoiTitleColors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']

// 折线图配置
export default {
  components: {
    CustomChart,
    RoiLimitItem,
  },
  props: {
    ROILists: {
      type: Array,
      default: () => [],
    },
    ROIAnalyzeLists: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    this.RoiTitleColors = RoiTitleColors

    return {
      isMax: false,
    }
  },
  methods: {
    handleToggle(isMax) {
      this.isMax = isMax
    },

    // 切换ROI显隐
    handleToggleROIRect(index) {
      this.$bus.$emit('toggleROIRect', index)
    },
  },
}
</script>

<style lang="less" scoped>
.beta-gamma-spectrum {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 36px;
  row-gap: 11px;
  position: relative;
  overflow: hidden;

  &.has-max {
    grid-template-columns: 100%;
    grid-template-rows: 100%;

    .roi-limit-item:not(.is-max) {
      display: none;
    }
  }
}
</style>