<template>
  <div class="time-line-container">
    <el-timeline>
      <el-timeline-item
        v-for="item,i in stampData"
        :key="i"
        :timestamp="item.timestamp"
        placement="top"
        hide-timestamp
        hollow
        type="danger"
      >
        <div class="timestamp">变化时刻：<span>{{ item.proTime }}</span></div>
        <div class="timestamp-content">
          <div>
            <div class="last-type">受包位：<span>{{ item.beforeLadle1Posb }}</span></div>
            <p class="svg-icon-box"><svg-icon icon-class="arrow-right" /></p>
            <div class="new-type">受包位：<span>{{ item.afterLadle1Posb }}</span></div>
          </div>
          <div>
            <div class="last-type">浇铸位：<span>{{ item.beforeLadle1Posa }}</span></div>
            <p class="svg-icon-box"><svg-icon icon-class="arrow-right" /></p>
            <div class="new-type">浇铸位：<span>{{ item.afterLadle1Posa }}</span></div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
const props = defineProps({
  stampData: {
    type: Array,
    default: () => []
  },
});
</script>

<style lang="scss" scoped>
.time-line-container{
  width: 100%;
  :deep(.el-timeline-item__tail){
    border-left: 2px dashed #F5A7A7;
  }
  .timestamp{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    >span{
      font-size: 14px;
      font-weight: 400;
      color: #E83333;
    }
  }
  .timestamp-content{
    display: flex;
    justify-content: space-between;
    >div{
      width: 45%;
      >div{
        width: 40%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        color: #7B828E;
        font-size: 14px;
        font-weight: 400;
        display: inline-block;
        border: 1px dashed;
        border-radius: 4px;
        >span{
          color: #0B182D;
        }
      }
      .last-type{
        background: #F5F7F9;
        border-color: #DFE1E4;
      }
      .new-type{
        background: #EBF8E8;
        border-color: #5DC63F;
      }
      .svg-icon-box{
        width: 20%;
        margin: 0;
        padding: 0;
        text-align: center;
        display: inline-block;
        >.svg-icon{
          width: 36px;
          height: 12px;
        }
      }
    }
  }
}
</style>