<template>
    <div>
      <div class="big">
        <div class="bigImg" :style="{opacity: fatherRow.status == 0  ?  1: 0.7}" >
          <img v-show="fatherRow.status == 0" src="/src/assets/images/furnaceComplete.png" alt="" >
          <img v-show="fatherRow.status != 0" src="/src/assets/images/preparation.png" alt="" class="imgHei">
          <div class="hearth">{{fatherRow.lfNo}}</div>
          <div class="stateBig" >
            <div class="state" v-show="fatherRow.status == 0">
            <svg-icon icon-class="Vector" class="sidebar-logo"/>
            浇铸完成</div>
            <div class="state" v-show="fatherRow.status != 0">
            <svg-icon icon-class="countdown" class="sidebar-logo"/>
            浇铸准备</div>
          </div>
        </div>
        <div class="bigArrow">
          <svg-icon icon-class="guideBig" class="sidebar-logo"/>
        </div>
        <div class="bigBoxTop">
          <div class="oneBox">
            <div class="twoBox boxLeft">炉号</div>
            <div class="twoBox boxRight" style="color:#FFDE4D">{{fatherRow.lfNo}}</div>
            <div class="twoBox boxLeft">兑钢时间</div>
            <div class="twoBox boxRight">{{fatherRow.mixTime}}</div>
            <div class="twoBox boxLeft">计划进站时间</div>
            <div class="twoBox boxRight boxRightBottom">{{fatherRow.plannedEntryTime}}</div>
          </div>
          <div class="oneBox">
            <div class="twoBox boxLeft">钢种</div>
            <div class="twoBox boxRight">{{fatherRow.steelGrade}}</div>
            <div class="twoBox boxLeft">真空进站时间</div>
            <div class="twoBox boxRight">{{fatherRow.vacuumEntryTime}}</div>
            <div class="twoBox boxLeft">实际进站时间</div>
            <div class="twoBox boxRight boxRightBottom">{{fatherRow.actualEntryTime}}</div>
          </div>
          <div class="oneBox">
            <div class="twoBox boxLeft">包号</div>
            <div class="twoBox boxRight">{{fatherRow.intermedNo}}</div>
            <div class="twoBox boxLeft">真空出站时间</div>
            <div class="twoBox boxRight">{{fatherRow.vacuumExitTime}}</div>
            <div class="twoBox boxLeft">进站温度</div>
            <div class="twoBox boxRight boxRightBottom">{{fatherRow.arrivalTemp}}</div>
          </div>
          <div class="oneBox">
            <div class="twoBox boxLeft">计划钢水量</div>
            <div class="twoBox boxRight">{{fatherRow.steelWaterYield}}</div>
            <div class="twoBox boxLeft">冶炼结束时间</div>
            <div class="twoBox boxRight">{{fatherRow.lfEndDate}}</div>
            <div class="twoBox boxLeft">浇铸钢水量</div>
            <div class="twoBox boxRight boxRightBottom">{{fatherRow.lfSteelWgt}}</div>
          </div>
          <div class="oneBox oneBoxBottom">
            <div class="twoBox boxLeft">实际钢水量</div>
            <div class="twoBox boxRight">{{fatherRow.materialWgt}}</div>
            <div class="twoBox boxLeft">出钢温度</div>
            <div class="twoBox boxRight">{{fatherRow.tapTemp}}</div>
            <div class="twoBox boxLeft"></div>
            <div class="twoBox boxRight boxRightBottom"></div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script setup>
const props = defineProps({
    fatherRow: {
      type: Object,
      default: "",
    },
})

  </script>
  <style lang="scss" scoped>
  .big{
    width: w(1400);
    height: h(240);
    display: flex;
    justify-content: space-between;
    .bigImg{
      width: w(170);
      text-align: center;
      .imgHei{
        margin-top: h(30);
        width: w(100);
        height: h(100);
        margin-bottom: h(32);
      }
      img{
        margin-top: w(5);
        width: w(140);
        height: h(140);
      }
      .hearth{
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
        font-size: w(18);
        margin-top: w(-15);
        text-shadow: 5px 5px 5px rgba(0, 133, 255, 0.3);
      }

      .stateBig{
        margin-top: w(5);
        width: 100%;
        display: flex;
        justify-content: center;
        .state{
          background: rgba(0, 255, 255, 0.2);
          width: w(82);
          height: h(24);
          line-height: h(24);
          font-size: w(12);
          color: rgba(0, 255, 255, 1);
          border: h(1) solid rgba(0, 255, 255, 1);
          border-radius: w(4);
          .sidebar-logo{
          font-size: w(12);
          }
      }
      }
    }
    .bigArrow{
      line-height:h(300);
      width: w(140);
      .sidebar-logo{
        font-size: w(72);
      }
    }
    .bigBoxTop{
      width: w(1146);
      height: h(240);
      background: rgba(0, 43, 81, 1);
      font-size: w(14);
      .oneBox{
        display: flex;
        width: 100%;
        height: h(48);
        border-bottom: w(1) solid rgba(0, 138, 255, 0.4)
        ;
        .twoBox{
          width: w(191);
          height: h(48);
          border-right:w(1) solid rgba(0, 138, 255, 0.4);
          line-height: h(48);
          text-align: center;
        }
        .boxLeft{
          background: rgba(0, 138, 255, 0.2);
          color:rgba(194, 227, 255, 1) ;
        }
        .boxRight{
          color: #fff;
          // color: rgba(194, 227, 255, 1);
        }
      }
      .oneBoxBottom{
        border-bottom:0 ;
      }
      .boxRightBottom{
        border-right: 0 !important;
      }

    }
  }


  </style>
