<template>
  <hr :style="settingStyle" />
</template>

<script>
import { getDividerData } from '@/views/book/courseware/data/divider';
import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'DividerPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getDividerData(),
    };
  },
  computed: {
    settingStyle() {
      return {
        margin: `${this.data.property.height / 2}px 0`,
        borderTopStyle: this.data.property.line_type,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
hr {
  border: none;
  border-top-color: #ebebeb;
  border-top-width: 1px;
}
</style>
