<script setup>
import ContentList from './ContentList.vue';
import TitleBar from './TitleBar.vue';
import { computed } from "vue"
/* export default {
  props: {
    style: Object,
    panelData: Object,
    sideline: Boolean
  },
  components: {
    ContentList,
    TitleBar,
  },
  computed: {
    columnWidth() {
      return this.style.width / this.panelData.title.length;
    },
    separatorColor() {
      return 'rgba(142,175,153,1)'
    }
  },
} */

const props = defineProps({
  style: Object,
  panelData: Object,
  sideline: Boolean
})
const columnWidth=computed(()=>{
  return props.style.width / props.panelData.title.length;
})
const separatorColor=computed(()=>{
  return 'rgba(142,175,153,1)'
})
</script>

<template>
  <div :style=props.style>
    <!-- 分隔线 -->
    <div v-if=props.sideline>
      <div :style="{ width: props.style.width, height: 1, backgroundColor: separatorColor }" />
      <div :style="{ top: props.style.height, width: props.style.width, height: 1, backgroundColor: separatorColor }" />
      <div :style="{ left: 0, width: 1, height: props.style.height, backgroundColor: separatorColor }" />
      <template v-for="(_, idx) in props.panelData.title" :key="idx">
        <div
          :style="{ left: columnWidth * (idx + 1), width: 1, height: props.style.height, backgroundColor: separatorColor }" />
      </template>
    </div>

    <TitleBar :style="{ width: columnWidth }" :titleData=props.panelData.title />
    <div :style="{ top: 20 }">
      <ContentList v-for="(_, idx) in props.panelData.contentList.length" :key=idx
        :style="{ left: columnWidth * idx, width: columnWidth, height: props.style.height - 20 }" :startIndex=idx
        :contentData=props.panelData.contentList[idx] />
    </div>
  </div>
</template>

<style scoped></style>