/**
* Description: 租户管理 基本信息组件
*
* Created by sunHanshen on 2022/01/11
* E-Mail:740322902@qq.com
* Location: bj
*/

<template>
  <div class="ContentLayoutForm">
    <el-row :gutter="gutter">
      <template v-for="(col, index) in data">
        <el-col
          :span="col.span || span"
          :key="index"
        >
          <div class="col">
            <label
              class="item-label"
              :style="lebleStyle(col)"
            >{{ col['label'] }}: </label>
            <span class="item-value">{{ col['value'] }}</span>
          </div>
        </el-col>

        <slot
          name="back"
          v-if="$slots.back && isShowCustomView(index)"
        ></slot>
      </template>
    </el-row>
    <slot name="after"></slot>
  </div>
</template>

<script>
export default {
  name: 'ContentLayoutForm',

  props: {
    data: {
      type: Array,
      default: function () {
        return []
      }
    },

    span: {
      type: Number,
      default: function () {
        return 8
      }
    },

    gutter: {
      type: Number,
      default: function () {
        return 20
      }
    },

    labelWidth: {
      type: String,
      default: function () {
        return '100px'
      }
    },
  },

  data() {
    return {

    }
  },

  computed: {
    isShowCustomView() {
      return function (viewIndex) {
        let show = false
        let slotView = this.$slots.back
        if (slotView && slotView.length > 0) {
          const { index } = slotView[0].data.attrs
          if (viewIndex == index) {
            show = true
          }
        }
        return show
      }
    }
  },

  mounted() {

  },

  methods: {
    lebleStyle(item) {
      let style = {
        'width': item.width || '',
        'textAlign': item.align || ''
      };
      //过滤掉即删除掉空值的参数和数值
      for (var i in style) {
        style[i] == "" ? delete (style[i]) : 1
      }
      return style
    }

  }

}
</script>

<style lang="scss">
.ContentLayoutForm{
  .col{
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center
  }

  .item-label{
    white-space: nowrap;
    margin-right: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    text-align: right;
  }

  .item-value {
    flex: 1;
    font-size: 15px;
    color: #666666;
  }
}
</style>