<template>
  <div class="audit-steps">
    <ElSteps direction="vertical">
      <ElStep class="audit-steps__step-item" v-for="(item, index) in value" :key="index">
        <div slot="icon">{{index + 1}}</div>
        <div :class="{'el-name-box': item.id}" slot="description">
          <span :class="[ 'audit-steps__step-order', {first: index===0} ]">{{index + 1}}</span>
          <ElSelect
            :value="item.employees"
            @input="val => handleEditCandidate(val, index)"
            multiple
            :multiple-limit="maxSelect"
            placeholder="请选择">
            <ElOption
              v-for="v in candidates"
              :key="v.id"
              :label="v.name"
              :value="v.id" />
          </ElSelect>
          <i class="el-name" v-if="item.id">{{item.miniName}}</i>
          <i class="el-icon-delete" v-if="index" @click="handleDeleteStep(index)" ></i>
        </div>
      </ElStep>
    </ElSteps>
    <ElButton v-if="isAdd" type="text" class="audit-steps__add" icon="circle-plus" @click="handleAddStep">添加审核环节</ElButton>
  </div>
</template>

<script>
export default {
  name: 'AuditSteps',
  props: {
    candidates: {
      type: Array
    },
    value: {
      type: Array,
      default () {
        return []
      }
    },
    maxSelect: {
      type: Number,
      default: 3
    },
    stepNum: {
      type: Number,
      default: 2
    }
  },
  computed: {
    isAdd () {
      return this.value.length < this.stepNum
    }
  },
  methods: {
    syncSteps (modification) {
      const _steps = [ ...this.value ]
      this.$emit('input', modification(_steps))
    },
    handleEditCandidate (val, index) {
      this.syncSteps(_steps => {
        _steps[index].employees = val
        return _steps
      })
    },
    handleDeleteStep (i) {
      this.syncSteps(_steps => {
        _steps.splice(i, 1)
        return _steps
      })
    },
    handleAddStep () {
      this.syncSteps(_steps => {
        return _steps.concat([{ employees: [] }])
      })
    },
    // 判断是不是每一个步骤都选有审核人
    isValidateSteps () {
      return !this.value.some(_steps => _steps.employees.length <= 0)
    }
  }
}
</script>

<style lang="less">
.audit-steps {
  width: 612px;

  .el-step__head {
    display: none;
  }

  &__step-item {
    min-height: 43px;
    max-height: 43px;
    margin-bottom: 35px;

    .el-select {
      width: 400px;
    }

    .el-icon-delete {
      margin-left: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }

  &__step-order {
    cursor: default;
    margin-right: 8px;
    position: relative;
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #aaa;
    background: #aaa;
    color: #fff;

    &:not(.first):before{
      position: absolute;
      content: '';
      display: block;
      width: 1px;
      height: 60px;
      background: #aaa;
      top: -60px;
      left: 50%;
    }
  }

  &__add {
    margin-top: -10px;
  }
}
</style>

