<template>
  <component
    :is="url ? 'router-link' : 'span'"
    :to="url"
    class="ui-arrow"
    :class="['ui-arrow--' + size, 'ui-arrow--' + dir, 'ui-arrow--' + type]"
  ></component>
</template>
<script>
export default {
  name: 'UiArrow',
  props: {
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'primary', 'success', 'info', 'warning', 'danger'].includes(value)
      }
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['large', 'medium', 'small', 'mini'].includes(value)
      }
    },
    dir: {
      type: String,
      default: 'top',
      validator(value) {
        return ['left', 'top', 'right', 'bottom'].includes(value)
      }
    },
    url: {
      type: String
    }
  }
}
</script>
<style lang="less">
.ui-arrow {
  display: inline-block;
  border-radius: 3px;
  &:after {
    content: '';
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-top: 0;
    border-right: 0;
    vertical-align: top;
  }
}
.ui-arrow--large {
  width: 40px;
  height: 40px;
  &:after {
    width: 18px;
    height: 18px;
  }
}
.ui-arrow--medium {
  width: 36px;
  height: 36px;
  &:after {
    width: 12px;
    height: 12px;
  }
}
.ui-arrow--small {
  width: 32px;
  height: 32px;
  &:after {
    width: 9px;
    height: 9px;
  }
}
.ui-arrow--mini {
  width: 28px;
  height: 28px;
  &:after {
    width: 6px;
    height: 6px;
  }
}
.ui-arrow--top{
  &:after {
    transform: rotate(135deg);
  }
  &.ui-arrow--large {
    &:after {
      margin-top: 16px;
      margin-left: 10px;
    }
  }
  &.ui-arrow--medium {
    &:after {
      margin-top: 15px;
      margin-left: 12px;
    }
  }
  &.ui-arrow--small {
    &:after {
      margin-top: 13px;
      margin-left: 11px;
    }
  }
  &.ui-arrow--mini {
    &:after {
      margin-top: 12px;
      margin-left: 11px;
    }
  }
}
.ui-arrow--left{
  &:after {
    transform: rotate(45deg);
  }
  &.ui-arrow--large {
    &:after {
      margin-top: 11px;
      margin-left: 15px;
    }
  }
  &.ui-arrow--medium {
    &:after {
      margin-top: 11px;
      margin-left: 14px;
    }
  }
  &.ui-arrow--small {
    &:after {
      margin-top: 11px;
      margin-left: 13px;
    }
  }
  &.ui-arrow--mini {
    &:after {
      margin-top: 10px;
      margin-left: 13px;
    }
  }
}
.ui-arrow--right{
  &:after {
    transform: rotate(225deg);
  }
  &.ui-arrow--large {
    &:after {
      margin-top: 11px;
      margin-left: 5px;
    }
  }
  &.ui-arrow--medium {
    &:after {
      margin-top: 11px;
      margin-left: 8px;
    }
  }
  &.ui-arrow--small {
    &:after {
      margin-top: 11px;
      margin-left: 9px;
    }
  }
  &.ui-arrow--mini {
    &:after {
      margin-top: 10px;
      margin-left: 9px;
    }
  }
}
.ui-arrow--bottom{
  &:after {
    transform: rotate(315deg);
  }
  &.ui-arrow--large {
    &:after {
      margin-top: 5px;
      margin-left: 10px;
    }
  }
  &.ui-arrow--medium {
    &:after {
      margin-top: 7px;
      margin-left: 12px;
    }
  }
  &.ui-arrow--small {
    &:after {
      margin-top: 8px;
      margin-left: 11px;
    }
  }
  &.ui-arrow--mini {
    &:after {
      margin-top: 8px;
      margin-left: 11px;
    }
  }
}
.ui-arrow--default {
  color: #999;
}
a.ui-arrow--default {
  cursor: pointer;
  transition: all .25s;
  &:hover {
    color: #333;
    background-color: #f3f3f3;
  }
}
.ui-arrow--primary {
  color: #3385FF;
}
.ui-arrow--info {
  color: #fff;
}
.ui-arrow--success {
  color: #59b57f;
}
.ui-arrow--warning {
  color: #FF871F;
}
.ui-arrow--danger {
  color: #e94853;
}
</style>
