<template>
  <div
    :class="['step-item', link ? 'linkable' : null]"
    @click="go"
  >
    <span :style="titleStyle">{{title}}</span>
    <a-icon :style="iconStyle" :type="icon" />
    <slot></slot>
  </div>
</template>

<script>
import AIcon from 'ant-design-vue/es/icon/icon'

const Group = {
  name: 'AStepItemGroup',
  render (h) {
    return h(
      'div',
      {attrs: {style: 'text-align: center; margin-top: 8px'}},
      [h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])]
    )
  }
}

export default {
  name: 'AStepItem',
  Group: Group,
  components: {AIcon},
  props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle'],
  methods: {
    go () {
      const link = this.link
      if (link) {
        this.$router.push(link)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .step-item{
    cursor: pointer;
  }
  :global{
    .ant-steps-item-process{
      .linkable{
        color: #40a9ff;
      }
    }
  }
</style>
