<template>
  <el-card>
    <div class="progress-container">
      <ul>
        <li
          v-for="(item, index) in stepList"
          :key="index"
          :class="{ active: active >= index }"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.taskTypeName"
            placement="top"
          >
            <p>{{ item.taskTypeName }}</p>
          </el-tooltip>
          <div
            class="progress-box"
            :style="`backgroundImage:linear-gradient(to top, var(--color-primary), var(--color-primary) ${item.percent},#fff ${item.percent}, #fff);`"
          ></div>
          <p class="num">{{ item.number }}</p>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
  export default {
    props: {
      // active: {
      //   type: [Number, String],
      //   default: 3
      // },
      list: {
        type: Array,
        default: []
      },
      total: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        stepList: [],
        active: -1
      };
    },
    watch: {
      list: {
        handler() {
          if (this.list.length) {
            this.stepList = this.list;
            this.stepList.map((item, index) => {
              item.percent = (item.number / this.total) * 100 + '%';
            });
            const active = this.stepList.findIndex((item) => item.number === 0);
            if (active == -1) {
              this.active = this.stepList.length - 1;
            } else {
              this.active = active - 1;
            }
          }
        },
        immediate: true
      }
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .progress-container {
    width: 100%;
    overflow-x: auto;
    ul {
      list-style: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex: 1;
        position: relative;
        min-width: 110px;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 1px;
          background-color: #ccc;
        }
        &:first-of-type::after {
          left: 50%;
        }
        &:last-of-type::after {
          right: 50%;
        }
        &.active {
          &::after {
            background-color: var(--color-primary);
          }
          .progress-box {
            border-color: var(--color-primary);
          }
        }
        .el-tooltip {
          width: 100%;
          text-align: center;
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 显示省略号 */
        }
        .num,
        .text {
          width: 100%;
          text-align: center;
        }
        .progress-box {
          position: relative;
          z-index: 1;
          width: 32px;
          height: 32px;
          margin: 10px 0;
          border-radius: 50%;
          // background-color: #fff;
          border: 1px solid #ccc;
        }
      }
    }
  }
</style>
