<template>
  <div class="custom-detailsInfo">
    <div v-for="(row, index) in config" :key="index" class="detailsInfo">
      <template v-if="Array.isArray(row)">
        <el-row :gutter="20">
          <el-col
            v-for="rowItem in row"
            :key="rowItem.label"
            :span="rowItem.span || 24 / row.length"
          >
            <el-row :gutter="20">
              <el-col
                v-for="item in rowItem"
                :key="item.label"
                :span="item.span"
                :class="
                  item.flag === 'label'
                    ? 'labelcol'
                    : !item.isslot
                    ? 'detailcol'
                    : ''
                "
              >
                <template v-if="item.flag === 'label'">
                  <span class="required">{{ item.value }}</span>
                </template>
                <template v-else>
                  <div class="detail ellipsisText">
                    <slot v-if="item.isslot" :name="item.value"></slot>
                    <el-tooltip
                      v-else
                      class="box-item"
                      effect="light"
                      popper-class="tooltipLight"
                      :content="model[item.value] + ''"
                      :disabled="
                        model[item.value] && model[item.value].length < 10
                      "
                      placement="top"
                    >
                      <span class="information">
                        {{ model[item.value]
                        }}<span v-if="model[item.value]">{{ item.unit }}</span>
                      </span>
                    </el-tooltip>
                  </div>
                </template>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    model: Object,
    config: Array,
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    console.log(this.config);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.custom-detailsInfo {
  color: #fff;
  .labelcol {
    text-align: right;
    height: 36px;
  }
  .detailcol {
    height: 36px;
  }
  .required {
    font-size: 14px;
    font-weight: 400;
    color: #babdc1;
    height: 39px;
    line-height: 39px;
  }
  .ellipsisText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .information {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    height: 39px;
    line-height: 39px;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
  }
}
</style>
