<script setup>
import { computed } from "vue"
/* export default {
  props: {
    index: Number,
    style: Object,
    title: String,
  },
  computed: {
    blockOpacity() {
      return 0.4 * ((this.index % 3) + 1) / 3;
    }
  },
  data() {
    return {
      titleStyle: { 
        lineHeight: 18,
        width: this.style.width, height: 18,
        backgroundColor: 'rgba(142,175,153,1)',
        textAlign:'center'
      }
    }
  }

} */
const props = defineProps({
  index: Number,
  style: Object,
  title: String,
})

const blockOpacity = computed(() => {
  return 0.4 * ((props.index % 3) + 1) / 3;
})

const titleStyle = {
  lineHeight: 18,
  width: props.style.width, height: 18,
  backgroundColor: 'rgba(142,175,153,1)',
  textAlign: 'center'
}

</script>

<template>
  <div :style=props.style>
    <div class="container-config" :style=titleStyle>
      {{ title }}
    </div>
    <div class="content-config" :style="{
      top: titleStyle.lineHeight,
      width: props.style.width, height: props.style.height - 18,
      backgroundColor: 'rgba(0,0,0,' + blockOpacity + ')'
    }">
      <slot />
    </div>
  </div>
</template>

<style>
/* css文件要单独放到没有scoped设置的style标签中，规避css属性redefine的warning */
@import "./FontConfig.css";
</style>  