<template>
  <div class="define-descriptions">
    <dl>
      <div
        v-for="item in items"
        :key="item.key"
        class="item"
        :class="{ 'item-width': item.width > 0 }"
        :style="{ width: `${item.width}px` }"
      >
        <dt>{{ item.label }}</dt>
        <dd>{{ itemsData[item.field] }}</dd>
      </div>
    </dl>
  </div>
</template>
<script>

export default {
  name: 'DefineDescriptions',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    itemsData: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="less" scoped>
.define-descriptions {
    width: 100%;
    dl {
        display: flex;
        height: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 0;
        margin-bottom: 15px;
        border: 1px solid #e8eaec;
        .item {
            flex: 1;
            height: auto;
            border-right: 1px solid #e8eaec;
            &:last-child {
                border-right: none;
            }
            &.item-width {
                flex: 0 0 auto;
            }
        }
    }
    dt {
        height: 38px;
        background-color: #f2f6fc;
        padding: 10px 0;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #e8eaec;
    }
    dd {
        line-height: 1.5;
        padding: 6px;
        margin-left: 0;
        text-align: center;
    }
}
</style>
