<template>
  <view class="cv-block" 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: 'cvBlock',
  props: {
    col: {
      type: [String, Number],
      default: ''
    },
    margin: {
      type: Number,
      default: 5
    },
    marginRight: {
      type: Number,
      default: 0
    },
    marginLeft: {
      type: Number,
      default: 0
    },
    marginTop: {
      type: Number,
      default: 0
    },
    marginBottom: {
      type: Number,
      default: 0
    }
  },
  inject: {
    cvGroupCol: {
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      cvBoxStyle: '',
      cvBoxMainStyle: {}
    };
  },
  created() {
    this._dealStyle();
  },
  methods: {
    _dealStyle() {
      let col = this.col ? this.col : this.cvGroupCol;
      let marginLeft = this.marginLeft ? this.marginLeft : this.margin;
      let marginRight = this.marginRight ? this.marginRight : this.margin;
      let marginTop = this.marginTop ? this.marginTop : this.margin;
      let marginBottom = this.marginBottom ? this.marginBottom : this.margin;
      let cvBoxStyle = '';
      if (col > 0) {
        cvBoxStyle += 'width: calc(100% / ' + col + ' - ' + (marginLeft + marginRight) + 'px);';
        cvBoxStyle += 'margin-left:' + marginLeft + 'px;';
        cvBoxStyle += 'margin-right:' + marginRight + 'px;';
        cvBoxStyle += 'margin-top:' + marginTop + 'px;';
        cvBoxStyle += 'margin-bottom:' + marginBottom + 'px;';
      }
      this.cvBoxStyle = cvBoxStyle;
    }
  }
};
</script>
<style>
/* #ifdef MP-WEIXIN */
cv-block {
  display: contents;
}
/* #endif */

.cv-block {
  width: calc(100% - 10px);
  margin: 5px;
  display: inline-flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
</style>
