<template>
   <div class="linebox">
     <hr :style="{border:'0.55px '+(data.dashed?'dashed ':'solid ')+(data.lineColor||'#888888'), height:linesHeight,width:linesWidth,}">
     <!-- <div class="realline" :style="{background:data.lineColor||'#888888', width:linesWidth, height:linesHeight, transform:transformDirection}"></div> -->
  </div>
</template>
<script>
export default {
  name: 'lineBetween',
  props: {
    title: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    width: { type: [String, Number], default: 0 },
    height: { type: [String, Number], default: 0 },
    data: {
      type: Object,
      default: () => []
    }
  },
  data() {
    return {
      lineColor:'#888888',
      linesHeight:'100%',
      linesWidth:'1px',
      transformDirection:'rotate(0deg)'
    }
  },
  created() {},
  mounted() {
     this.initLine()
  },
  methods: {
    initLine() {
     this.linesHeight = '100%'
     this.linesWidth = this.data.linesWidth + 'px'
     if(this.data.direction == '90') {
        this.linesHeight = this.data.linesWidth + 'px'
        this.linesWidth = '100%'
     }
    //  this.transformDirection =  'rotate(' + this.data.direction + 'deg)'
    }
  },
  watch: {
      data: {
      handler(n) {
        this.data = n
        this.initLine()
      },
      deep: true
    },

  }
}
</script>
<style lang="less" scoped>
.linebox{
  width: 100%;
  height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    hr{
      box-sizing:border-box;
    }
    .realline{
      width: 1px;
      height: 100%;
      background: #999;
    }
  }
  
</style>
