<template>
  <cr-cell-group
    class="compact-cell-group"
    :class="{
      'compact-cell-text_bold': textBold,
      'compact-cell-text_noval': noVal
    }"
  >
    <cr-cell
      v-for="(item, index) in cellData"
      :key="index"
      :title="item.title.tpl || item.title"
      :value="item.value.tpl || item.value"
      :class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }"
      @click="cellClick(item)"
    >
      <template v-if="item.title.needSlot" slot="title">
        <div v-html="item.title.tpl"></div>
      </template>
      <template v-if="item.value.needSlot">
        <div v-html="item.value.tpl"></div>
      </template>
    </cr-cell>
  </cr-cell-group>
</template>

<script>
const CELL_CLICK_EVENT = "click";
export default {
  name: "CompactCellGroup",
  props: {
    cellData: {
      type: Array,
      default() {
        return [];
      }
    },
    textBold: {
      type: Boolean,
      default: false
    },
    noVal: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    cellClick(e) {
      if (e.title.needSlot || e.value.needSlot) {
        this.$emit(CELL_CLICK_EVENT, e);
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
.sub-text-mixins {
  font-size: @font-size-12;
  color: @gray-4;
  line-height: @line-height-sm;
}
.compact-cell {
  &-group {
    background: @gray-1;
    border-radius: @border-radius-md;
    padding: @padding-md;
    @{deep} .cr-cell {
      &-group {
        &::after {
          display: none;
        }
      }
      &__title {
        color: @gray-5;
      }
      &__value {
        color: @black;
      }
    }
  }
  background-color: @gray-1;
  font-size: @font-size-12;
  color: @black;
  padding: 0;
  &::after {
    display: none;
  }
  &-text_bold {
    @{deep} .cr-cell__title {
      color: @black;
    }
    @{deep} .cr-cell__value {
      color: @black;
      font-weight: @font-weight-bold;
    }
  }
  &-text_noval {
    @{deep} .cr-cell__value {
      display: none;
    }
  }
  &_br {
    @{deep} .cr-cell__value {
      flex: none;
      width: 70%;
    }
  }
}
</style>
