<template>
  <div>
    <div class="info-list" v-for="(list, index) in labelData" :key="`warn-${index}`">
      <div class="info-item" v-for="(item, i) in list" :key="`warn-${index}-${i}`">
        <div class="label">
          {{ item.label }}
        </div>
        <div class="value">
          <span v-if="item.prop == 'status'">
            <span class="status" :class="`status-${valueData.status}`"></span>
            <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
          </span>
          <span v-else>
            {{ valueData[item.prop] }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { STATUS_OBJ } from "./env.js"

const props = defineProps({
  labelData: {
    type: Array,
    default: () => ({}),
  },
  valueData: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<style lang="scss" scoped>
.info-list {
  display: flex;
  align-items: center;
  border-top: 1px solid #dadee7;
  border-left: 1px solid #dadee7;
  &:last-of-type {
    border-bottom: 1px solid #dadee7;
  }
  .info-item {
    display: flex;
    align-items: center;
    flex: 1;
    height: 48px;
    line-height: 46px;
    font-size: 14px;
    color: #404a62;
    .label {
      height: 100%;
      width: 144px;
      background-color: #f7f7f9;
      border-right: 1px solid #dadee7;
      padding: 0 16px;
    }
    .value {
      height: 100%;
      flex: 1;
      border-right: 1px solid #dadee7;
      padding: 0 16px;
      display: flex;
      align-items: center;
      .status {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 8px;
        $statusObj: (
          success: #48ad97,
          error: #d75138,
        );
        @each $status, $color in $statusObj {
          &-#{$status} {
            background-color: $color;
          }
        }
      }
    }
  }
}
</style>
