/**
* Description: 描述列表
*
* Created by longyihuang on 2019/11/1
* E-Mail: 475865662@qq.com
*/

<template>
  <div>
    <el-row :gutter="gutter" style="padding: 8px 0px" v-for="row in rowSize" :key="row">
      <el-col :span="span" v-for="(col, i) in descriptions.slice((row-1) * columns, row * columns)" :key="i">
        <slot v-if="$scopedSlots.custom" name="custom" :data="col"></slot>
        <div v-else style="display: flex; justify-content: center; ">
          <label class="item-label">{{ col['label'] }}: </label>
          <span class="item-value">{{ col['value'] }}</span>
        </div>
      </el-col>
    </el-row>
    <slot name="after"></slot>
  </div>
</template>

<script>
	export default {
		name: "ContentDescriptions",
		props: {
			columns: {
				type: Number,
				default: function () {
					return 3;
				}
			},
			descriptions: {
				type: Array,
				default: function () {
					return []
				}
			},
			gutter: {
				type: Number,
				default: 24
			}
		},


		computed: {
			rowSize() {
				return Math.ceil(this.descriptions.length / this.columns);
			},

			span() {
				return parseInt(24 / this.columns);
			}
		}
	}
</script>

<style lang='scss' scoped>
  .item-label {
    display: inline-block;
    white-space: nowrap;
    margin-right: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    text-align: right;
  }

  .item-value {
    display: block;
    flex: 1;
    font-size: 14px;
    color: #333333;
  }
</style>