<template>
  <div class="summary-line-box">
    <div
      class="summary-item"
      :style="getDotColor(colors[index % colors.length])"
      v-for="(item, index) in paramList"
      :key="item.param"
    >
      <!-- <el-popover
        placement="bottom-start"
        popper-class="warning-popover"
        width="300"
        trigger="hover"
        :content="item.content"
        v-if="item.desc"
      >
        <span class="line-name" slot="reference">{{ item.name }}：</span>
      </el-popover>
      <span class="line-name" v-else>{{ item.name }}</span> -->
      <span class="line-name">{{ item.name }}</span>
      <span class="line-num">
        {{ examPropData[item.param] }}{{ item.unit }}
      </span>
    </div>
  </div>
</template>

<script>
import summaryLineMixin from "../../common/mixins/summaryLineMixin";
export default {
  name: "SummaryLineFull",
  mixins: [summaryLineMixin],
  data() {
    return {
      colors: [
        ["#35BBFF", "#1886FE"],
        ["#98E6FD", "#5FC9FA"],
        ["#B9A9FF", "#8370FF"],
        ["#3CEACF", "#1CD1A1"],
        ["#FF919C", "#FE5863"],
      ],
    };
  },
  methods: {
    getDotColor([startColor, endColor]) {
      return {
        "--dot-color": `linear-gradient(180deg,${startColor} 0%, ${endColor} 100%)`,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.summary-line-box {
  display: flex;
  align-items: center;
  .summary-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 16px 16px 16px 40px;
    background: #3f444d;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    user-select: none;
    &:not(:last-child) {
      margin-right: 10px;
    }
    .line-name {
      font-weight: bold;
      margin-right: 40px;
    }
    .line-num {
      font-size: 16px;
    }

    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 16px;
      top: 50%;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      background: var(--dot-color);
      transform: translate(0, -50%);
    }
    &:after {
      top: calc(50% + 4px);
      opacity: 0.5;
      filter: blur(4px);
      z-index: 1;
    }
  }
}
</style>
