<template>
  <div :id="moduleId" class="line-module">
    <div class="line-module-bg">
    <div class="dot" :style="{
      boxShadow: `0 ${dotShadow1}vw ${dotShadow2}vw 0 rgba(73, 166, 182, 0.8)`,
      backgroundColor: end ? '#65e7f6' : '#49a6b6'
      }"></div>
    <div :id="lineId" class="line"></div>
    </div>
    <div class="line-module-content">
      <div class="content-prefix">
        <div class="state">{{state}}</div>
        <div class="time">{{time}}</div>
      </div>
      <div class="content-data">
        <div class="text" v-if="!isImage">{{content}}</div>
        <div class="img" v-else>
          <img src="@/assets/images/bg1.png" />
          <img src="@/assets/images/bg2.png" />
        </div>
      </div>
      <div class="content-dept">{{dept}}</div>
    </div>
  </div>
</template>

<script>

function guid() {
  return 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
  });
}


export default {
  props: {
    end: {
      type: Boolean,
      default: false
    },
    state: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    isImage: {
      type: Boolean,
      default: false
    },
    dept: {
      type: String,
      default: ''
    }
  },
  data: () => ({
    moduleId: `module-${guid()}`,
    lineId: `line-${guid()}`,
  }),
  mounted() {
    this.initLineHight();
  },
  computed : {
    dotShadow1() {
      return this.end ?  0.2 : 0;
    },
    dotShadow2() {
      return this.end ? 0.6 : 0;
    }
  },
  methods: {
  /**
   * 初始化线条的长度
   */
    initLineHight() {
      if (this.end) return;
      const moduleEl = document.getElementById(this.moduleId)
      const lineEl = document.getElementById(this.lineId)
      lineEl.style.height = `${moduleEl?.clientHeight - 5}px`
    }
  }
}
</script>

<style scoped lang="less">
@import url("@/assets/styles/common.less");
@font-color: #75faf6;
.line-module {
  font-size: 17px;
  color: #fff;
  position: relative;
  margin: 1.5vh 0px;
  min-height: 9vh;
  .line-module-bg {
    position: absolute;
    top: .8vh;
    left: 0;
    height: 1005;
    .dot {
      position: absolute;
      top: 0;
      left: 0;
      width: .5vw;
      height: .9vh;
      border-radius: 50%;
    }
    .line {
      position: absolute;
      top: 1.5vh;
      left: .16vw;
      width: .1vw;
      background-color: #49a6b650;
      border-radius: .1vw;
    }
  }

  .line-module-content {
      padding: 0vh 1vw;
    .content-prefix {
      .flex(space-between, flex-end);
      .state {
        color: #e3b75c;
        font-size: 1vw;
      }
    }
    .content-data {
      .text {
        .ellipsis();
        font-size: 14px;
        color: @font-color;
      }
      .img {
        .flex(flex-start);
        img {
          margin-right: .6vw;
          width: 4.3vw;
          height: 4.2vh;
        }
      }
      padding: .9vh 0vw;
      margin-bottom: .8vh;
      border-bottom: .1vh solid #197bb5;
    }
  }
}
</style>
