标签： element-ui

<template>
  <div class="stage-container">
    <el-popover
      v-for="(stage) in stageList" :key="stage.id"
      width="200"
      trigger="hover"
    >
      <div slot="reference" :class="stageState(stage)" class="stage">
        <div class="stage-title">{{ stage.name }}</div>
        <div :class="stageState(stage)" class="stage-side stage-left"/>
        <div :class="stageState(stage)" class="stage-side stage-right"/>
      </div>
      <div class="label-list">
        <div v-for="(label) in stage.labels" :key="label.id">
          <el-link :underline="false" :type="labelState(label)" class="label" @click="selectLabel(label)">{{ label.name }}</el-link>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { customerStages } from '@/api/admin/crm'
export default {
  props: {
    stageId: Number,
    stageLabelId: Number
  },
  data() {
    return {
      stageList: []
    }
  },
  computed: {
    stageState() {
      return stage => {
        if (!this.currentStage.order) {
          return 'not-active'
        }
        return stage.order > this.currentStage.order ? 'not-active' : ''
      }
    },
    labelState() {
      return label => {
        return this.stageLabelId == label.id ? 'primary' : 'info'
      }
    },
    currentStage() {
      for (const stage of this.stageList) {
        if (stage.id == this.stageId) {
          return stage
        }
      }
      return {}
    }
  },
  async mounted() {
    const res = await customerStages()
    this.stageList = res.data
  },
  methods: {
    selectLabel(label) {
      this.$emit('selectLabel', label)
    }
  }
}
</script>

<style lang="scss">
.stage-container {
  margin-left: 50px;
  display: flex;
}

.stage-side {
  height: 38px;
  width: 38px;
  top: 0px;
  position: absolute;
  transform: rotate(45deg) scale(0.707);
  &.stage-left {
    z-index: 5;
    left: -19px;
    background-color: white;
  }
  &.stage-right {
    z-index: 10;
    right: -18px;
    background-color: $xr-color-primary;
  }
  &.not-active {
    background-color: white;
    border-top: 2px solid $xr-color-primary;
    border-right: 2px solid $xr-color-primary;
    top: -2px;
  }
}

.stage {
  color: #fff;
  position: relative;
  padding: 10px 20px 10px 37px;
  margin: 28px 2px;
  height: 38px;
  background-color: $xr-color-primary;
  cursor: pointer;
  &.not-active {
    color: $xr-color-primary;
    background-color: white;
    border-top: 2px solid $xr-color-primary;
    border-bottom: 2px solid $xr-color-primary;
  }
}

.label {
  padding: 5px;
  font-size: 13px;
  width: 100%;
}
</style>