<template>
  <div class="new-divider" id="divider">
    <div v-if="type == '0'">
      <svg-divider :svgStyle="svgStyle"></svg-divider>
    </div>
    <div v-else-if="type == '1'">
      <img v-if="svgUrl != ''" :style="{ width: '1120px', height: '40px' }" :src="define.comUrl + '/' + svgUrl" alt="" />
      <div v-else style="height: 30px"></div>
    </div>
  </div>
</template>

<script>
import svgDivider from './divider.vue'
export default {
  components: {
    svgDivider
  },
  props: {
    defaultVal: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#FF5240'
    },
    fontStyle: {
      type: Object,
      default: {
        color: '#000',
        size: 14,
        spacing: 4,
        weight: false
      }
    },
    type: {
      type: String,
      default: '0'
    },
    svgModel: {
      type: String,
      default: '1'
    },
    svgUrl: {
      type: String,
      default: ''
    }
  },
  name: 'new-divider',
  computed: {
    svgStyle() {
      return {
        bgColor: this.bgColor,
        svgModel: this.svgModel,
        text:this.defaultVal,
        ...this.fontStyle
      }
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.new-divider {
  display: flex;
  position: relative;
  .text {
    position: absolute;
  }
}
</style>
