<template>
  <div class="ai-wrapper">
    <ai-title class="w100" v-if="title" :title="title"/>
    <div class="ai-wrapper-content" :class="{border}">
      <slot/>
    </div>
  </div>
</template>

<script>
import AiTitle from "./AiTitle";

export default {
  name: 'AiWrapper',
  components: {AiTitle},
  componentName: 'AiWrapper',

  provide() {
    return {
      AiWrapper: this
    }
  },

  props: {
    'label-width': {
      type: String
    },

    columnsNumber: {
      type: Number,
      default: 2
    },
    border: Boolean,
    title: String
  },

  computed: {
    autoWidth() {
      return ((1 / this.columnsNumber) * 100).toFixed(2) + '%'
    },

    autoLableWidth() {
      return this.labelWidth
    }
  },
}
</script>

<style lang="scss" scoped>
.ai-wrapper {
  .w100 {
    width: 100%;
  }

  .ai-wrapper-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &.border {
      border-left: 1px solid #d0d4dc;
      border-top: 1px solid #d0d4dc;

      .ai-info-item {
        border-bottom: 1px solid #d0d4dc;
        border-right: 1px solid #d0d4dc;
        margin-bottom: 0;
        line-height: 32px;

        .ai-info-item__left {
          background: rgba(0, 0, 0, .03);
          padding-right: 16px;
          border-right: 1px solid #d0d4dc;
          margin-right: 16px;
        }

        .el-textarea__inner {
          border: none;
          padding-left: 0;
        }
      }
    }
  }

}
</style>
