<template>
  <div class="dof-col" :style="{ paddingLeft: padding, paddingRight: padding }">
    <slot></slot>
    <div
      v-if="isShowBorderRight && !isLast"
      class="borderRight"
      :style="{ top: borderRightPadding + 'px', bottom: borderRightPadding + 'px' }"
    ></div>
    <div
      v-if="isShowBorderBottom"
      class="borderBottom"
      :style="{
        left: isFirst ? borderBottomPadding + 'px' : '0px',
        right: isLast ? borderBottomPadding + 'px' : '0px'
      }"
    ></div>
    <div v-if="isShowDelta" class="delta"></div>
  </div>
</template>

<script>
import { mixChild } from '../utils/mix-child.js'
export default {
  mixins: [mixChild('dof-row')],
  computed: {
    style() {
      const res = {}
      return res
    },
    borderRightPadding() {
      return this.$parent.borderRightPadding
    },
    borderBottomPadding() {
      return this.$parent.borderBottomPadding
    },
    isShowBorderRight() {
      return this.$parent.isShowBorderRight
    },
    isShowBorderBottom() {
      return this.$parent.isShowBorderBottom
    },
    isShowDelta() {
      return this.$parent.isShowDelta
    },
    padding() {
      return `${this.$parent.paddingHorizontal}px`
    }
  }
}
</script>

<style scoped>
.dof-col {
  flex: 1;
  flex-direction: column;
  /* background: rgba(177, 193, 234, 0.05); */
  position: relative;
  overflow: hidden;
}
.borderRight {
  position: absolute;
  width: 2px;
  background-color: #f2f2f2;
  right: 0;
}
.borderBottom {
  position: absolute;
  height: 2px;
  background-color: #f2f2f2;
  bottom: 0;
}
.delta {
  width: 26px;
  height: 26px;
  background-color: #f2f2f2;
  position: absolute;
  right: -13px;
  bottom: -13px;
  transform: rotate(45deg);
}
</style>
<style scoped src="./colmo.css"></style>
