<script setup lang="ts">
import { guid } from '@/utils/common';
import { onMounted } from 'vue';
interface LineModuleProp {
  end?: boolean // 是否是结尾
  state: string // 状态
  time: string // 时间
  isImage: boolean // 是否是图片
  content: any // 内容 图片数组或消息
  dept: string
}
// 获取参数
const props = withDefaults(defineProps<LineModuleProp>(), {
  end: false
})

const dotBg = props.end ? "#65e7f6" : "#49a6b6"
const dotShadow1 = props.end ? 0.2 : 0
const dotShadow2 = props.end ? 0.6 : 0

const moduleId= `module-${guid()}`
const lineId= `line-${guid()}`

/**
 * 初始化线条的长度
 */
function initLineHight() {
  if (props.end) return;
  const moduleEl = document.getElementById(moduleId) as HTMLDivElement
  const lineEl = document.getElementById(lineId) as HTMLDivElement
  lineEl!.style.height = `${moduleEl?.clientHeight - 5}px`
}


onMounted(() => {
  initLineHight();
})

</script>

<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)`}"></div>
     <div :id="lineId" class="line"></div>
    </div>
    <div class="line-module-content">
      <div class="content-prefix">
        <div class="state">{{props.state}}</div>
        <div class="time">{{props.time}}</div>
      </div>
      <div class="content-data">
        <div class="text" v-if="!props.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">{{props.dept}}</div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");
@font-color: #75faf6;
.line-module {
  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;
      background-color: v-bind(dotBg);
      border-radius: 50%;
    }
    .line {
      position: absolute;
      top: 1.5vh;
      left: .13vw;
      width: .2vw;
      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: .82vw;
        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>
