<template>
  <div class="follow-header margin-top-32">
    <div class="stage-content">
      <div class="follow-stages-content">
        <div ref="scrollX">
          <!-- 以下是循环的步骤 -->
          <div class="popover-content">
            <div
              class="stage-item"
              @click="selectStage(item, index)"
              v-for="(item, index) in list"
              :key="index"
            >
              <span class="item">
                <i class="stage-icon"></i>
                <span style="flex: none">
                  {{ item }}
                </span>
              </span>
              <i class="stage-next"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="scroll-btn-content">
        <div class="filter-content"></div>
        <div class="scroll-btn">
          <div class="btn left" @click="scrollEvent('prev')"></div>
          <div class="btn right" @click="scrollEvent('next')"></div>
        </div>
      </div>
      <!---->
      <div class="next-stage-btn">进入下一阶段</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sen-steps",
  data() {
    return {
      fixedMove: 100, //每次固定移动的距离标识
      move: 0, //每次移动的距离
      scrollWidth: 0, //滚动条的宽度
      clientWidth: 0, //容器的宽度
      scrollAbleWidth: 0, //可滚动的距离
      leftOverWith: 0, //剩下的距离
      scrollLeft: 0, //滚动条最左边的距离
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollEvent("prev");
    });
  },
  computed: {
    list() {
      return Array.from({ length: 8 }, (_, index) => {
        return "步骤" + index;
      });
    },
  },
  methods: {
    scrollEvent(type) {
      let e = this.$refs.scrollX;
      this.scrollWidth = e.scrollWidth;
      this.clientWidth = e.clientWidth;
      this.scrollLeft = e.scrollLeft;
      this.scrollAbleWidth = this.scrollWidth - this.clientWidth;
      if (type == "prev") {
        this.prevScroll();
      } else if (type == "next") {
        this.nextScroll();
      }
    },
    prevScroll() {
      if (!this.scrollLeft) {
        this.move = 0;
        return;
      }
      if (this.scrollAbleWidth <= this.fixedMove) {
        this.move = 0;
      }
      if (this.scrollLeft <= this.fixedMove) {
        this.move = 0;
      } else {
        if (this.scrollAbleWidth == this.scrollLeft) {
          this.move = this.scrollAbleWidth - this.fixedMove;
        } else if (this.fixedMove <= this.scrollLeft < this.scrollAbleWidth) {
          this.move = this.scrollLeft - this.fixedMove;
        }
      }
      this.$refs.scrollX.scrollTo(this.move, 0);
    },
    nextScroll() {
      if (!this.scrollLeft) {
        if (this.scrollAbleWidth <= this.fixedMove) {
          this.move = this.scrollAbleWidth;
        } else {
          this.move = this.fixedMove;
        }
      } else {
        if (this.scrollLeft <= this.fixedMove < this.scrollAbleWidth) {
          this.move = this.scrollLeft + this.fixedMove;
          this.leftOverWith = this.scrollAbleWidth - this.move;
        } else if (this.leftOverWith <= this.fixedMove) {
          this.move = this.scrollAbleWidth;
        }
      }
      this.$refs.scrollX.scrollTo(this.move, 0);
    },
  },
};
</script>
<style lang="scss" scoped>
@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(2, 84, 236, 0.39);
    border-radius: 2px;
  }
}
.follow-header {
  padding: 24px 32px;
  background: #f8f9fb;
  &.margin-top-32 {
    margin-top: 32px;
  }
  .stage-content {
    display: flex;
    height: 40px;
    .follow-stages-content {
      flex: 1;
      background: #fff;
      position: relative;
      // &::after{
      //   content: '';
      //   display: inline-block;
      //   width: 28px;
      //   height: 28px;
      //   background: #fff;
      //   -webkit-transform: rotate(45deg);
      //   transform: rotate(45deg);
      //   position: absolute;
      //   right: -15px;
      //   top: 6px;
      // }
      > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        overflow-x: auto;
        padding-bottom: 16px;
        z-index: 9;
        @include scrollbar;
        > div {
          display: flex;
        }
      }
      .popover-content {
        display: flex;
        align-items: center;
        height: 40px;
        .stage-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-right: 30px;
          .item {
            display: flex;
            align-items: center;
            padding: 0 32px;
            &.active-item {
              position: relative;
              &::before {
                position: absolute;
                width: 100%;
                height: 3px;
                background: #5189fb;
                border-radius: 2px;
                display: inline-block;
                content: "";
                top: 28px;
                left: 0;
                border-radius: 4px;
              }
              &::after {
                display: inline-block;
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border-top: 6px solid #5189fb;
                border-right: 6px solid transparent;
                border-left: 6px solid transparent;
                bottom: -16px;
                left: calc(50% - 3px);
              }
            }
            &.active-item-nofinally {
              position: relative;
              &::before {
                position: absolute;
                width: 100%;
                height: 3px;
                background: #5189fb;
                border-radius: 2px;
                display: inline-block;
                content: "";
                top: 28px;
                left: 0;
                border-radius: 4px;
              }
            }

            .stage-icon {
              display: inline-block;
              width: 16px;
              height: 16px;
              background-image: url("./business-details/stage-done.png");
              background-position: center;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              margin-right: 4px;
              &.stage-1 {
                background-image: url("./business-details/stage-1.png");
              }
              &.stage-2 {
                background-image: url("./business-details/stage-2.png");
              }
              &.stage-3 {
                background-image: url("./business-details/stage-3.png");
              }
              &.stage-4 {
                background-image: url("./business-details/stage-4.png");
              }
              &.stage-5 {
                background-image: url("./business-details/stage-5.png");
              }
              &.stage-6 {
                background-image: url("./business-details/stage-6.png");
              }
              &.stage-7 {
                background-image: url("./business-details/stage-7.png");
              }
              &.stage-8 {
                background-image: url("./business-details/stage-8.png");
              }
              &.stage-9 {
                background-image: url("./business-details/stage-9.png");
              }
              &.stage-10 {
                background-image: url("./business-details/stage-10.png");
              }
              &.stage-active-1 {
                background-image: url("./business-details/stage-active-1.png");
              }
              &.stage-active-2 {
                background-image: url("./business-details/stage-active-2.png");
              }
              &.stage-active-3 {
                background-image: url("./business-details/stage-active-3.png");
              }
              &.stage-active-4 {
                background-image: url("./business-details/stage-active-4.png");
              }
              &.stage-active-5 {
                background-image: url("./business-details/stage-active-5.png");
              }
              &.stage-active-6 {
                background-image: url("./business-details/stage-active-6.png");
              }
              &.stage-active-7 {
                background-image: url("./business-details/stage-active-7.png");
              }
              &.stage-active-8 {
                background-image: url("./business-details/stage-active-8.png");
              }
              &.stage-active-9 {
                background-image: url("./business-details/stage-active-9.png");
              }
              &.stage-active-10 {
                background-image: url("./business-details/stage-active-10.png");
              }
            }
            .stage-text {
              display: inline-block;
              font-size: 14px;
              font-weight: 500;
              color: #606266;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              cursor: default;
              &.will-done-text {
                color: #a4a7ac;
              }
              &.stage-text-active {
                color: #5189fb;
              }
            }
          }

          .stage-next {
            background-image: url("./business-details/stage-next.png");
            display: inline-block;
            width: 16px;
            height: 16px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .caption {
            margin-bottom: 0;
            .select {
              .label {
                font-size: 14px;
                font-weight: 500;
                color: #a4a7ac;
              }
            }
          }
        }
      }
    }

    .scroll-btn-content {
      display: flex;
      width: 32px;
      padding-left: 20px;
      height: 40px;
      background-color: #fff;
      position: relative;
      align-items: center;
      justify-content: center;
      &::after {
        content: "";
        display: inline-block;
        width: 28px;
        height: 28px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        right: -15px;
        top: 6px;
      }
      .filter-content {
        flex: 1;
        flex: 0 0 20px;
        width: 20px;
        height: 16px;
        position: absolute;
        left: 0;
        height: 100%;
        box-shadow: -9px 0px 10px -6px rgba(64, 64, 64, 0.1);
      }
      .scroll-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 16px;
        position: absolute;
        z-index: 99;
        background-image: url("./business-details/jiaonnag.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .btn {
          flex: 1;
          height: 16px;
          text-align: center;
          line-height: 16px;
          cursor: pointer;
          background-position: center;
          background-size: 10px 10px;
          background-repeat: no-repeat;
          &.left {
            background-image: url("./business-details/left.png");
          }
          &.right {
            background-image: url("./business-details/right.png");
          }
          &:hover {
            &.left {
              background-image: url("./business-details/left-active.png");
            }
          }
          &:hover {
            &.right {
              background-image: url("./business-details/right-active.png");
            }
          }
        }
      }
    }
    .change-stage {
      display: inline-block;
      width: 80px;
      height: 40px;
      line-height: 40px;
      margin: 0 30px;
      cursor: pointer;
      position: relative;
      text-align: right;
      .change-stage-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url("./business-details/change-stage.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 12px;
        left: 0;
      }
    }
    .next-stage-btn {
      display: inline-block;
      box-sizing: border-box;
      width: 116px;
      height: 40px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #5189fb;
      font-weight: 400;
      font-size: 14px;
      color: #5189fb;
      line-height: 38px;
      text-align: center;
      margin-left: 64px;
      cursor: pointer;
      &:hover {
        background: rgba(81, 137, 251, 0.1);
      }
    }
  }

  .feedback-content {
    .tabs-content {
      display: flex;
      align-items: center;
      width: 176px;
      padding: 4px;
      background-color: #fff;
      border-radius: 4px;
      height: 40px;
      box-sizing: border-box;
      margin: 16px 0;
      .tab {
        flex: 1;
        font-size: 14px;
        font-weight: 400;
        color: #606266;
        height: 32px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        background: #fff;
        border-radius: 4px;
        transition: background-color 0.35s;
        margin-right: 4px;
        &:last-child {
          margin-right: 0;
        }
        &:hover {
          background-color: rgba(81, 137, 251, 0.1);
        }
        &.active {
          background: rgba(81, 137, 251, 0.1);
          color: #5189fb;
        }
      }
    }
    .feedback-list {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303133;
      max-height: 150px;
      overflow: auto;
      @include scrollbar;
      .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
        &.requirement {
          height: 40px;
          background: #eceff5;
          border-radius: 4px;
          padding: 0 8px;
          line-height: 40px;
          border-radius: 4px;
          margin-bottom: 8px;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
      // &:last-child{
      //   margin-bottom: 0;
      // }
    }
  }
}
</style>
