<template>
  <view class="cv-box" v-bind:style="cvBoxStyle">
    <slot name="default" />
  </view>
</template>

<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvBox',
  props: {
    /* 预留参数 用于接收子级 cv-col间距参数 */
    gutter: {
      type: String,
      default: ''
    },
    margin: {
      type: String,
      default: ''
    },
    padding: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    col: {
      type: [String, Number],
      default: ''
    }
  },
  provide() {
    return {
      cvGroupCol: this.col
    };
  },
  data() {
    return {
      cvBoxStyle: {},
      cvBoxMainStyle: {}
    };
  },
  created() {
    this._dealStyle();
  },
  methods: {
    _dealStyle() {
      if (this.margin) {
        this.cvBoxStyle['marginLeft'] = this.margin + 'px';
        this.cvBoxStyle['marginRight'] = this.margin + 'px';
      }
      if (this.padding) {
        this.cvBoxStyle['padding'] = this.padding + 'px';
      }
      if (this.background) {
        this.cvBoxStyle['background'] = this.background;
      }
    }
  }
};
</script>
<style>
.cv-box {
  padding: 5px 0;
  overflow: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.cv-box:first-child {
  margin-top: 10px;
}
</style>
