<template>
  <div class="stepsViewScroll">
    <div class="recordBox" v-for="item in 7">
      <div class="leftMsg">
        <div class="msgHeader">
          <div class="titleText">外围尺寸</div>
          <div class="describeText">单位：cm</div>
        </div>
        <div class="msgFooter">
          <div class="describeText">单位：cm</div>
          <div class="describeText">单位：cm</div>
          <div class="describeText">单位：cm</div>
        </div>
      </div>
      <div class="rightOperate">
        <!-- 占位div -->
        <div></div>
        <div class="operate">
          <div class="describeText operateText">结果</div>
          <div class="operateBox">
            <div class="operateBtn" :style="setBoxStatus('qualified')">
              合格
            </div>
            <div class="operateBtn" :style="setBoxStatus('unqualified')">
              不合格
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: "Dianjian" });
const setBoxStatus = (status: string) => {
  let style = "";
  switch (status) {
    case "qualified":
      style = "background-color: #64BB5C;color: white;";
      break;
    case "unqualified":
      style = "background-color: #E84026;color: white;";
      break;
    default:
      style = "background-color: #00000015;color: white;";
      break;
  }
  return style;
};
</script>

<style lang="scss" scoped>
.titleText {
  font-size: $f24;
  font-weight: $Medium;
}

.describeText {
  font-size: $f20;
  color: $font-default-60;
  line-height: 25px;
}

.recordBox {
  width: 600px;
  height: 210px;
  background-color: white;
  border-radius: 16px;
  display: flex;
  padding: $p20;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .leftMsg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170px;
  }

  .rightOperate {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .operate {
      .operateText {
        margin-bottom: $p5;
      }

      .operateBox {
        width: 290px;
        height: 70px;

        border-radius: 16px;
        display: flex;
        justify-content: space-between;

        .operateBtn {
          width: 130px;
          height: 70px;
          background-color: #00000015;
          border-radius: 16px;
          text-align: center;
          line-height: 70px;
          font-size: $f24;
          font-weight: $Medium;
        }
      }
    }
  }
}
</style>
