"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _create = _interopRequireDefault(require("../utils/create"));

var _relation = require("../mixins/relation");

var _icon = _interopRequireDefault(require("../icon"));

var _default = (0, _create.default)({
  render: function render() {
    var _obj;

    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: ['vm-hairline', _vm.b([_vm.parents.direction, (_obj = {}, _obj[_vm.status] = _vm.status, _obj)])]
    }, [_c('div', {
      class: _vm.b('title', {
        active: _vm.active
      }),
      style: _vm.titleStyle,
      on: {
        "click": _vm.onClickStep
      }
    }, [_vm._t("default")], 2), _c('div', {
      class: _vm.b('circle-container'),
      on: {
        "click": _vm.onClickStep
      }
    }, [_vm.active ? _vm._t("active-icon", [_c('Icon', {
      class: _vm.b('icon', 'active'),
      attrs: {
        "name": _vm.parents.activeIcon,
        "color": _vm.parents.activeColor
      }
    })]) : _vm.parents.inactiveIcon || _vm.$slots['inactive-icon'] ? _vm._t("inactive-icon", [_c('Icon', {
      class: _vm.b('icon'),
      attrs: {
        "name": _vm.parents.inactiveIcon
      }
    })]) : _c('i', {
      class: _vm.b('circle'),
      style: _vm.lineStyle
    })], 2), _c('div', {
      class: _vm.b('line'),
      style: _vm.lineStyle
    })]);
  },
  components: {
    Icon: _icon.default
  },
  mixins: [(0, _relation.ChildrenMixin)("vmSteps")],
  name: "step",
  computed: {
    status: function status() {
      if (this.index < this.parents.active) {
        return "finish";
      }

      if (this.index === +this.parents.active) {
        return "process";
      }
    },
    active: function active() {
      return this.status === "process";
    },
    lineStyle: function lineStyle() {
      if (this.status === "finish") {
        return {
          background: this.parents.activeColor
        };
      }

      return {
        background: this.parents.inactiveColor
      };
    },
    titleStyle: function titleStyle() {
      if (this.active) {
        return {
          color: this.parents.activeColor
        };
      }

      if (!this.status) {
        return {
          color: this.parents.inactiveColor
        };
      }
    }
  },
  methods: {
    onClickStep: function onClickStep() {
      this.parents.$emit("click-step", this.index);
    }
  }
});

exports.default = _default;