<template>
  <div :class="[`dz-divider-${type}`]" :style="{backgroundColor: bgColor}">
    <div :class="[`opacity-line-${type}`]" :style="{ backgroundColor: `linear-gradient(45deg, ${gradientColorStart} 0%, ${gradientColorEnd} 100%)`, borderColor: bgColor}"></div>
  </div>
</template>

<script  lang="ts" setup name="DzDashDevider">
const props = withDefaults(defineProps<{
  type?: 'horizontal' | 'vertical',
  bgColor?: string,
  gradientColorStart?: string,
  gradientColorEnd?: string,
}>(),
{
  type: 'horizontal',
  bgColor: 'red',
  gradientColorStart: 'blue',
  gradientColorEnd: 'green',
})
</script>
<style lang='less' scoped>
  .dz-divider-horizontal {
    position: relative;
    height: 10px;
    .opacity-line-horizontal {
      width: 100%;
      height: 0px;
      background: linear-gradient(46deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.04) 100%);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      // 景色从边框开始填充
      background-origin: border-box;
      // 边框颜色与容器背景色一致
      border-bottom: 2px dotted red;
    }
  }
  .dz-divider-vertical {
    position: relative;
    width: 10px;
    height: 100%;
    .opacity-line-vertical {
      width: 0px;
      height: 100%;
      background: linear-gradient(46deg, rgba(255, 255, 255, 0.04) 0%,  rgba(255, 255, 255, 1) 100%);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      // 景色从边框开始填充
      background-origin: border-box;
      // 边框颜色与容器背景色一致
      border-left: 2px dotted red;
    }
  }
</style>
