<template>
  <el-steps
    v-bind="$attrs"
    :active="defaultActive"
    class="es-steps"
    :finishStatus="finishStatus"
  >
    <el-step
      v-for="(item, indexs) in content"
      v-bind="handleExclAttribute({ data: item, attr: ['title'] })"
      :key="indexs"
      :title="
        typeof item.title === 'string' && (!showNumber || !item.showNumber)
          ? item.title
          : undefined
      "
      :showNumber="false"
      :position="position"
      :class="{
        'es-line-dotted': indexs === active - 1,
        'es-is-click': isClick
      }"
      @click="
        () => {
          handleClick(item, indexs);
        }
      "
    >
      <template
        slot="title"
        v-if="(showNumber || item.showNumber) && typeof item.title === 'string'"
      >
        <span class="es-step-title_number">{{
          (prepose ? prepose : '') + (indexs + 1)
        }}</span>
        <span class="es-step-title_text">{{ item.title }}</span>
      </template>
      <template v-else-if="typeof item.title === 'object'" slot="title">
        <template v-if="Array.isArray(item.title)">
          <span
            v-for="(ele, index) in item.title"
            :class="'es-step-title_' + index"
            >{{ ele }}</span
          >
        </template>
        <template v-else>
          <span
            class="es-step-title_number"
            v-if="Object.prototype.hasOwnProperty.call(item.title, 'number')"
            >{{ item.title.number }}</span
          >
          <span
            class="es-step-title_text"
            v-if="Object.prototype.hasOwnProperty.call(item.title, 'text')"
            >{{ item.title.text }}</span
          >
          <span
            class="es-step-title_icon"
            v-if="Object.prototype.hasOwnProperty.call(item.title, 'icon')"
            >{{ item.title.icon }}</span
          >
        </template>
      </template>
    </el-step>
  </el-steps>
</template>
<script>
import util from 'eoss-ui/src/utils/util.js';
import { debounce } from 'throttle-debounce';
export default {
  name: 'EsSteps',
  inheritAttrs: false,
  inject: {
    esForm: {
      default: ''
    }
  },
  props: {
    method: String,
    prepose: String,
    active: {
      type: Number,
      default: 0
    },
    finishStatus: {
      type: String,
      default: 'success'
    },
    url: String,
    param: Object,
    contents: Array,
    showNumber: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'top'
    },
    finish: Boolean,
    isClick: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: null
    };
  },
  computed: {
    content() {
      return this.list ? this.list : this.contents;
    },
    defaultActive() {
      return this.finish ? this.content.length : this.active;
    }
  },
  watch: {
    url() {
      this.getData();
    },
    param: {
      deep: true,
      handler() {
        if (this.url) {
          this.getData();
        }
      }
    }
  },
  beforeCreate() {
    this.getData = debounce(500, () => {
      this.getDatas();
    });
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getDatas() {
      if (this.url) {
        let param = this.param ? this.param : {};
        util
          .ajax({
            method: this.method,
            url: this.url,
            data: param,
            params: param
          })
          .then((res) => {
            if (res.rCode === 0) {
              if (this.esForm) {
                this.esForm.stepContent = JSON.parse(
                  JSON.stringify(res.results)
                );
              } else {
                this.list = JSON.parse(JSON.stringify(res.results));
              }
            }
          })
          .catch((err) => {
            if (err.message && err.message !== 'canceled') {
              this.$message.error(err.message);
            }
          });
      }
    },
    handleClick(item, index) {
      this.$emit('click', { type: 'step', ...item }, index);
    },
    handleExclAttribute({ data, attrs }) {
      return util.exclAttribute({
        data: data,
        attrs: attrs
      });
    }
  }
};
</script>
