<template>
  <div class="big">
    <div class="topTitle">
      <el-tooltip class="box-item" effect="dark" :content="BilletTracking.billetNumber" placement="top-start">
        <div class="charactersLeftTop" style="font-size:14px">
          <svg-icon style="font-size: 20px;" icon-class="BilletNo" class="sidebar-logo" />
          <span>铸坯编号：</span>
          <span v-show="BilletTracking.billetNumber != 0"
            class="charactersRightTopDescribe">{{ BilletTracking.billetNumber }}</span>
          <span v-show="BilletTracking.billetNumber == 0" class="charactersRightTopDescribe"
            style="color:#B3B7BE;font-weight:400">暂无</span>
        </div>
      </el-tooltip>
      <div class="charactersLeft">
        <svg-icon icon-class="billetDiameter" class="sidebar-logo" style="color:black" />
        直径：
        <span v-show="BilletTracking.diameter != 0" class="charactersRight">{{ BilletTracking.diameter }}mm</span>
        <span v-show="BilletTracking.diameter == 0" class="charactersRight"
          style="color:#B3B7BE;font-weight:400">暂无</span>
      </div>
      <div class="charactersLeft">
        <svg-icon icon-class="billetLength" class="sidebar-logo" style="color:black" />
        目标长度：
        <span v-show="BilletTracking.lineVal != 0" class="charactersRight">{{ BilletTracking.lineVal }}m</span>
        <span v-show="BilletTracking.lineVal == 0" class="charactersRight" style="color:#B3B7BE;font-weight:400">暂无</span>
      </div>
      <div class="charactersLeft">
        <svg-icon icon-class="billetPouring" class="sidebar-logo" style="color:black" />
        浇铸长度：
        <span v-show="BilletTracking.realityVal != 0" class="charactersRight">{{ BilletTracking.realityVal }}m</span>
        <span v-show="BilletTracking.realityVal == 0" class="charactersRight"
          style="color:#B3B7BE;font-weight:400">暂无</span>
      </div>
    </div>
    <div class="boxBig">
      <div class="zeroTop">
        <div class="zeroSize">0</div>
      </div>
      <div class="zeroBottom">
        <div class="zeroSize">0</div>
      </div>
      <img src="/src/assets/icons/svg/kachi.svg" alt="">
      <div class="bigColumn">
        <div class="reality" :style="{ height: `${BilletTracking.realityVal * 20}px` }">
          <div class="realityBig"></div>
        </div>
        <div class="dimension" :style="{ top: `${BilletTracking.realityVal * 20 - 10}px` }"></div>
        <div class="dimensionTitle" :style="{ top: `${BilletTracking.realityVal * 20 - 10}px` }">
          {{ BilletTracking.realityVal }}m</div>
        <div class="line" :style="{ top: `${BilletTracking.lineVal * 20}px` }"></div>
      </div>
    </div>
    <div class="BottomTitle">{{ BilletTracking.alias }}</div>
  </div>
</template>
  
<script setup>
const props = defineProps({
  BilletTracking: {
    type: Object,
    default: "",
  },
});
</script>
  
<style lang="scss" scoped>
.big {
  margin-left: 15px;

  .topTitle {
    margin-bottom: 20px;
    margin-left: 9px;

    .charactersLeftTop {
      color: #0B182D;
      font-weight: 600;
      line-height: 22px;
      height: 22px;
      margin-bottom: 5px;
      width: 220px;
      /* 限制容器宽度 */
      white-space: nowrap;
      /* 不换行 */
      overflow: hidden;
      /* 隐藏溢出部分 */
      text-overflow: ellipsis;

      /* 显示省略号 */
      .sidebar-logo {
        vertical-align: middle;
        margin-right: 4px;
      }
    }

    .charactersLeft {
      font-size: 13px;
      color: #7B828E;
      height: 21px;
      line-height: 21px;
    }

    .charactersRight {
      color: #0B182D;
    }
  }

  .BottomTitle {
    margin-top: 10px;
    margin-left: 72px;
    font-size: 14px;
  }

  .boxBig {
    display: flex;
    position: relative;

    .zeroTop {
      position: absolute;
      color: #B3B7BE;
      top: -15px;
      left: 7px;
      transform: rotate(90deg);

      .zeroSize {
        transform: scale(0.6)
      }
    }

    .zeroBottom {
      position: absolute;
      color: #B3B7BE;
      bottom: -6px;
      left: 7px;
      transform: rotate(90deg);

      .zeroSize {
        transform: scale(0.6)
      }
    }

    img {
      position: relative;
      top: -7px;
      margin-right: 20px;
    }

    .bigColumn {
      width: 48px;
      height: 400px;
      background: #EBEDEE;
      border-radius: 4px;
      position: relative;

      .reality {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom: 2px dotted #FFFFFF;
        position: relative;
        overflow: hidden;

        .realityBig {
          background-image: linear-gradient(90deg, rgba(252, 154, 39, 0.50) 0%, rgba(252, 154, 39, 0.00) 52.5%), linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, #E83333 0%, #EC5858 37.46%, #C52B2B 100%);
          ;
          height: 400px;
        }
      }

      .dimension {
        position: absolute;
        top: 190px;
        right: -10px;
        width: 10px;
        height: 10px;
      }

      .dimension::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-right: 10px solid #E83333;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid transparent;
      }

      .dimensionTitle {
        position: absolute;
        top: 190px;
        right: -35px;
        width: 10px;
        height: 10px;
      }

      .line {
        border: 1px solid #000000;
        background: #000;
        display: inline-block;
        width: 70px;
        position: absolute;
        left: -12px;
        z-index: 999;
      }
    }
  }
}</style>