<template>
  <section class="boardPanel"
:style="panelStyle">
    <slot />
  </section>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { ObjectInterface } from '../../script/index'
export default defineComponent({
  name: 'Panel',
  props: {
    title: {
      type: String,
      default: ''
    },
    config: {
      type: Object,
      default: () => { }
    }
  },
  setup (props) {
    const panelClass = 'panel'
    const cardStyle: ObjectInterface = reactive({
      margin: '20px',
      boxShadow: '0px 2px 4px 2px rgb(0 0 0 / 10%)',
      borderRadius: '4px'
    })
    const panelStyle = reactive({})
    const initPanelStyle = () => {
      if (props.config && props.config.card) {
        Object.assign(panelStyle, cardStyle)
      } else if (props.config && props.config.customStyle) {
        Object.assign(panelStyle, props.config.customStyle)
      }
    }
    initPanelStyle()
    return { panelClass, cardStyle, panelStyle }
  }
})
</script>
<style lang="scss">
.boardPanel {
  background: var(--bg-color);
  box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, 0.1);
  padding: 14px;
}
</style>
