<template>
  <div class="progress-wrapper">
    <div v-for="(step, index) in dict.type.project_progress"
         :key="step.value"
         :class="{'progress-current': progress === step.value, 'progress-finished': index < curProgressIndex}"
         class="progress-item" @click="!readonly && stepItemClick(step.value, index)"
    >
      <span v-if="index <= curProgressIndex" class="el-icon-circle-check"></span>
      <span v-else class="step-icon">{{ index + 1 }}</span>
      <span class="progress-text">
                              <span>{{ step.label }}</span>
                              <span>({{ step.value }})</span>
                            </span>
      <span class="arrow el-icon-arrow-right"></span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ProjectProgress',
  dicts: ['project_progress'],
  props: {
    value: {
      type: String|null,
      default: '',
      required: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    // 二次确认
    confirm: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      progress: this.value
    }
  },
  computed: {
    curProgressIndex() {
      return this.dict.type.project_progress.findIndex(item => item.value === this.progress)
    }
  },
  mounted() {
    // console.log('project_progress:', this.dict.type.project_progress)
    // console.log('progress:', this.progress)
    // console.log('value:', this.value)
  },

  watch: {
    value(val) {
      // console.log('watch：：value:', val)
      this.progress = val
    }
  },

  methods: {
    async stepItemClick(value, index) {
      if (this.confirm) {
        const originProgress = this.progress
        this.progress = value === this.progress ? '' : value
        try {
          // $t('import.sucMsg',[uploadResult.successList.length])
          await this.$modal.confirm(this.$t('project.progressUpdateConfirm'))
          this.emits()
        } catch (e) {
          this.progress = originProgress
        }
      } else {
        this.progress = value === this.progress ? '' : value
        this.emits()
      }
    },

    // 赋值 assign
    emits() {
      this.$emit('change', this.progress)
      this.$emit('input', this.progress)
    }
  }
}

</script>

<style lang="scss" scoped>

.progress-wrapper {
  display: flex;
  align-items: center;
  //justify-content: space-between;
  justify-content: space-evenly;

  background-color: #F5F7FA;
  overflow-x: auto;
  border-radius: 4px;


  .progress-item {
    align-self: stretch;
    padding: 10px 14px;
    //min-height: 54px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    // 手型
    cursor: pointer;

    .el-icon-circle-check {
      font-size: 18px;
    }

    .progress-text {
      word-break: break-all;
      line-height: 16px;
      font-size: 12px;
      //display: inline-block;
      max-width: 9ch; /* 字符宽度单位 */
      display: flex;
      flex-direction: column;
      align-items: center;
      // 文字居中
      text-align: center;
    }

    .arrow {
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
    }


    // 数字 icon 的样式
    .step-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: .11rem solid #909399;
      color: #909399;
      display: flex;
      justify-content: center;
      align-items: center;

      // 防止变形
      flex-shrink: 0; /* 防止缩小 */
      box-sizing: border-box; /* 边框计算在内 */
      overflow: hidden; /* 隐藏溢出部分 */
    }
  }

  .progress-current {
    background-color: #E70618;
    color: #fff;
  }


  // 当前进度之后的进度的样式
  .progress-current ~ div {
    background-color: #F5F7FA;
  }

  // 排除最后一个元素的箭头
  .progress-item:last-child {
    .arrow {
      display: none;
    }
  }

  // 已经完成的进度的样式
  .progress-finished {
    background-color: rgba(211, 16, 23, 0.1);
  }
}

</style>
