<template>
  <div class="order-box" :style="{ padding: '0 ' + 16 * beilv + 'px', fontSize: 14 * beilv + 'px'}">
    <!-- 小块 -->
    <div
      v-for="(item,index) in orderMsg"
      :key="index"
      :style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
        + 'px', height: 168 * beilv + 'px'}"
      class="box"
    >
      <p class="line1">
        <span>工单编号：<span class="light-color">{{ item.code }}</span></span>
        <span class="fr">
          状态：
          <span class="state">{{ item.state }}</span>
        </span>
      </p>
      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
        <span>产品名称：<span class="light-color">{{ item.name }}</span></span>
        <span class="fr">
          产线：
          <span class="light-color" :style="{marginRight: 25 * beilv + 'px'}">{{ item.line }}</span>
        </span>
      </p>
      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
        <span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
      </p>
      <div :style="{ paddingLeft: 15 * beilv + 'px'}">
        <span v-if="item.percentage === '100%'" class="blue-color">√ 订单进度</span>
        <span v-else class="light-color">订单进度</span>
        <span class="light-color fr">{{ item.percentage }}</span>
        <div class="progress-box">
          <div
            class="progress"
            :style="{height: 8 * beilv + 'px', width: item.percentage}"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'WorkOrder',
  props: {
    orderMsg: {
      type: Array,
      default: () => []
    },
    beilv: {
      type: Number,
      default: 1
    }
  }
}
</script>
<style lang='scss' scoped>
.order-box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  .box {
    width: 49.5%;
    margin-bottom: 8px;
    background-image: url('../../../../assets/img/cockpit/module-back.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: auto;
    .light-color {
      opacity: 0.5;
    }
    .blue-color {
      color: #3E6AE9;
    }
    .line1::before {
      display: inline-block;
      content: "";
      width: 4px;
      height: 14px;
      border-radius: 2px;
      margin-right: 8px;
      vertical-align: middle;
      background-color: #4BFFC8;
    }
    .state {
      display: inline-block;
      color: #70F97F;
      padding: 2px 4px;
      border-radius: 2px;
      background: #366F5D;
    }
  }
}
.progress-box {
  border-radius: 5px;
  background: #1E2D45;
  .progress {
    text-align: right;
    line-height: 18px;
    border-radius: 5px;
    padding-right: 5px;
    margin-top: 10px;
    background: linear-gradient(270deg, #47F8DC 0%, #4573FE 100%);
  }
}

</style>
