<!--
  @description: 统计报表-总汇组件
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/27  04/25 加边框
-->
<template>
  <div>
    <el-scrollbar class="statistics-crud_scrollbar">
      <ul
        v-for="(el, ind) in list"
        :key="ind"
        class="statistics-crud"
        :style="{ width: el.groupWidth }"
      >
        <!-- :style="{ width: 'calc( 100% / ' + list.length + ' )' }" -->
        <!-- :id="index" -->
        <li
          v-for="(item, index) in el.groupData"
          :key="index"
          :style="{ width: item.width }"
        >
          <!-- icon -->
          <div class="statistics-crud_icon">
            <i :class="'iconfont ' + item.icon" />
          </div>
          <dl>
            <dt>
              <!-- 值 -->
              <span class="statistics-crud_value">
                {{ item.value }}
              </span>
              {{ item.suffix }}
            </dt>
            <!-- 标题 -->
            <dd>
              {{ item.name }}
            </dd>
          </dl>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>
<script>
/**
 * {
 *  name:"", 标题
 *  suffix:"",单位/后缀
 *  width:""//宽度
 *  value:"",值
 *  code:"",编码（可有可无）
 *  icon:"",// icon-font
 * }
 */
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./reportChart.public.less";
@crud-ighlight: @text-ighlight; //统计文字高亮
@crud-H: 4.4375rem; //crud高度
@crud-B: 0.3125rem; //crud下边距
/*样式颜色边距修改-在上面的变量修改即可*/
.statistics-crud_scrollbar {
  width: 100%;
  margin-bottom: @crud-B;
  background: @highlight-bg;
  /deep/ .el-scrollbar__wrap {
    white-space: nowrap;
  }
}

.statistics-crud {
  margin-bottom: @main_M;
  background: @highlight-bg;
  height: @crud-H;
  //   min-width: 89.5625rem;
  margin-top: @main_M;
  border: 1px solid #ddd;
  display: inline-block;
  margin-right: 2%;
  li {
    float: left;
    height: 100%;
    text-align: center;
    height: @crud-H;
    padding: 0.625rem 1.25rem;
    background: url(~@/assets/img/procurement/statisticalManagement/u170.png)
      center right no-repeat;
    &:last-of-type {
      background: none;
    }
    .statistics-crud_icon {
      float: left;
      line-height: @crud-H - 1.75rem;
      font-size: 0.75rem;
    }
    dl {
      display: inline-block;
      font-size: 0.8125rem;
      dt {
        .statistics-crud_value {
          font-size: 1.25rem;
          color: @crud-ighlight;
        }
      }
    }
  }
}
</style>
