<template>
  <div class="ps-steps-item">
    <div :class="['ps-steps-item--head', isImplement && 'is-implement',(icon && isComplete) && 'is-edit', isComplete && 'is-complete']">
      <div class="ps-steps-item--head-icon">
        <font>{{stepsNumber}}</font><i :class="[icon ? icon : 'ps-icon-bianji']"></i>
      </div>
      <div class="ps-steps-item--head-desc">{{label}}</div>
      <div v-if='$parent.direction === "horizontal"' class="ps-steps-line"></div>
    </div>
    <div :class="['ps-steps-item--body', isImplement && 'is-implement', isChecked && 'is-checked']">
      <div class="body-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PsStepsItem",
  props: {
    label: {
      type: String,
      default: null,
    },
    icon: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      stepsNumber: null,
      isImplement: false,//判断步骤条是否已执行到该步骤
      isComplete: false,//判断步骤条是否已完成
      isChecked: false,//判断步骤条是否选中状态
    };
  },
  created() {},
  mounted() {
    this.operaGetParentParams();
  },
  methods: {
    operaGetParentParams(){
      let parentObj = this.$parent || {};
      console.log(parentObj.isEdit)
    },
    operaSetImplement(){
      this.isImplement = true;
    },
    operaCloseImplement(){
      this.isImplement = false;
    },
    operaSetComplete(){
      this.isComplete = true;
    },
    operaCloseChecked(){
      this.isChecked = false;
    },
    operaSetStepsNumber(val){
      this.stepsNumber = val;
    },
    operaCheckShow(){
      if(this.isEdit && this.isComplete){
        this.isChecked = true;
      }
    }
  },
};
</script>

<style>
</style>
