<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,
        'compact-cell_divider': item.divider,
        'compact-cell_inline': item.inline
      }"
      @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-divider :hairline="false" :style="{ color: '#ECE9E9' }" v-if="item.divider" />
    </cr-cell>
  </cr-cell-group>
</template>

<script>
/**
 * @description: cr-cell样式调整版，缩小了间距
 * @param {type}
 * @return:
 */
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 {
      justify-content: space-between;
      &-group {
        &::after {
          display: none;
        }
      }
      &__title {
        color: @gray-5;
        flex: none;
      }
      &__value {
        color: @black;
        flex: none;
      }
    }
  }
  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%;
    }
  }
  &_divider {
    height: 32px;
    overflow: initial;
    @{deep} .cr-cell__value {
      width: 100%;
      overflow: initial;
    }
    .cr-divider {
      position: absolute;
      top: 0;
      left: -15px;
      width: calc(100% + 30px);
    }
  }
  &_inline {
    @{deep} .cr-cell__title {
      color: @gray-4 !important;
      font-size: @font-size-12 !important;
      margin-bottom: 10px;
    }
  }
}
</style>
