<!-- 这是竖显list -->
<template>
  <div class="list-no-active">
    <div
      v-for="(el, index) in list"
      :key="index"
      class="list-no-active-primary"
    >
      <div
        class="list-no-active-line"
        :class="{ 'back-line': index !== list.length - 1 }"
      >
        <span class="no-active-where">
          <div v-if="!icon" class="no-active-icon"></div>
          <slot v-else name="icon"></slot>
        </span>
      </div>
      <div class="content">
        <h5 style="text-overflow:ellipsis; overflow:hidden;white-space:nowrap;">
          {{ el.title }}
        </h5>
        <div class="content">
          <over-flow>
            <span v-if="!context">
              <!-- {{el[label]}} -->
              <p
                class="textcontent"
                v-for="(item, index) in el[label].split('\n')"
                :key="index"
              >
                {{ item }}
              </p>
            </span>
            <slot v-else slot="el"></slot>
          </over-flow>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OverFlow from "./OverFlow";
export default {
  name: "list-no-active",
  components: { OverFlow },
  props: {
    list: {
      type: Array,
      require: true,
    },
    label: {
      type: String,
      default: "label",
    },
    icon: {
      // 内容是否用icon 替代
      type: Boolean,
      default: false,
    },
    context: {
      // 内容是否自己用solt显示
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>
.list-no-active {
  background: white;
  padding-left: 50px;
  overflow: auto;
  height: 100%;
}
.list-no-active-primary {
  position: relative;
}
.list-no-active-line {
  width: 4px;
  height: 100%;
  position: absolute;
  top: 40px;
  left: -25px;
}
.back-line {
  background: #e7e7e7;
}
.no-active-where {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
.no-active-icon {
  width: 20px;
  height: 20px;
  background: #e7e7e7;
  border-radius: 50px;
}
.content h5 {
  font-size: 38px;
  line-height: 80px;
}
.content {
  padding: 10px 10px;
  font-size: 54px;
}
.textcontent {
  margin-bottom: 20px;
  width: 100%;
  text-align: left;
  text-indent: 2em;
  font-size: 32px;
  word-wrap: break-word;
  color: #999999;
  line-height: 46px;
}
</style>
