<template>
  <div class="process">
    <div class="process-view">
      <div
        v-for="(item, index) in newNodeList"
        :key="index"
        :class="processClassName(item, index)"
      />
    </div>
    <div class="process-info">
      <div
        v-for="(item, index) in nodeList"
        :key="index"
        :class="['process-info-text', nodeTextConfig[item.nodeStatus]]"
      >
        {{ item.nodeName }}
      </div>
    </div>
  </div>
</template>
<script>
const nodeStatusConfig = {
  1: 'circular', // 已完成该节点
  2: 'circular', // 当前节点
  3: '' // 尚未进入此节点
};

const nodeStyleConfig = {
  1: 'circular', // 普通激活节点
  2: 'success', // 售后成功节点
  3: 'fail' // 售后失败节点
};

const nodeTextConfig = {
  1: '',
  2: 'red',
  3: 'gray'
};

export default {
  props: {
    nodeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      nodeTextConfig,
      newNodeList: []
    };
  },
  watch: {
    nodeList: {
      handler(list) {
        this.newNodeList = (list || []).reduce((origin, item) => {
          origin.push({ type: 1, ...item });
          origin.push({ type: 0, ...item });
          return origin;
        }, []);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    processClassName(item, index) {
      if (!index) return 'hide';
      const classArray = [];
      if (item.type) {
        classArray.push('process-view-line');
        classArray.push(nodeStatusConfig[item.nodeStatus]);
      } else {
        classArray.push('process-view-block');
        classArray.push(nodeStyleConfig[item.nodeStyle]);
      }
      return classArray;
    }
  }
};
</script>
<style lang="less" scoped>
.process {
  &-view {
    padding: 0 10px;
    display: flex;
    align-items: center;
    &-block {
      width: 12px;
      height: 12px;
      margin: 4px;
      background-color: @gray-7;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      &.circular {
        background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
        display: flex;
        align-items: center;
        justify-content: center;
        &::after {
          content: '';
          display: block;
          width: 4px;
          height: 4px;
          background-color: @white;
          border-radius: 50%;
        }
      }
      &.success {
        background-image: url(~@/assets/images/refund/success.png);
      }
      &.fail {
        background-image: url(~@/assets/images/refund/fail.png);
      }
    }
    &-line {
      flex: 1;
      height: 2px;
      background-color: @gray-7;
      &.circular {
        background-color: @border-red;
      }
    }
  }

  &-info {
    .text-size(12);
    padding-top: 4px;
    display: flex;
    justify-content: space-between;

    &-text {
      &.red {
        color: @border-red;
      }
      &.gray {
        color: @gray-4;
      }
    }
  }
}
</style>
