<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">
          <div class="value-body">
            <slot :name="item.prop" :item="item" :valueData="valueData" v-if="slots[item.prop]" />
            <span v-else>
              <span v-if="item.prop == 'status'" class="status-body">
                <span class="status" :class="`status-${valueData.status}`"></span>
                <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
              </span>
              <span v-else>{{ valueData[item.prop] }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useSlots, computed } from "vue";
import { STATUS_OBJ } from "./env.js";
const slots = useSlots();

const props = defineProps({
  labelData: {
    type: Array,
    default: () => ({}),
  },
  valueData: {
    type: Object,
    default: () => ({}),
  },
  status_obj: {
    type: Object,
    default: null,
  },
});
const status_obj = computed(() => {
  return props.status_obj || STATUS_OBJ;
});
</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;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
    .value {
      height: 100%;
      flex: 1;
      border-right: 1px solid #dadee7;
      position: relative;
      .value-body {
        padding: 0 16px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        .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;
            }
          }
        }
        .status-body {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
