<template>
  <div v-if="mobile" class="mobile-order-steps">
    <div
      v-for="(label, index) in labels"
      :key="index"
      class="mobile-order-steps__col"
      :class="{ 'mobile-order-steps__col--connector-active': isConnectorActive(index) }"
    >
      <div
        class="mobile-order-steps__node"
        :class="`mobile-order-steps__node--${stepState(index)}`"
      >
        <icon-close v-if="stepState(index) === 'error'" />
        <icon-check v-else-if="stepState(index) === 'finish'" />
        <span v-else class="mobile-order-steps__num">{{ index + 1 }}</span>
      </div>
      <div class="mobile-order-steps__label">{{ label }}</div>
    </div>
  </div>
  <a-steps
    v-else
    :current="current"
    :status="status"
    direction="horizontal"
    label-placement="vertical"
    class="app-order-steps"
  >
    <a-step
      v-for="(label, index) in labels"
      :key="index"
      :description="descriptions[index] || ''"
    >
      {{ label }}
    </a-step>
  </a-steps>
</template>

<script setup>
const props = defineProps({
  mobile: { type: Boolean, default: false },
  current: { type: Number, default: 1 },
  status: { type: String, default: 'process' },
  labels: { type: Array, default: () => ['', '', ''] },
  descriptions: { type: Array, default: () => ['', '', ''] }
})

const stepState = (index) => {
  const num = index + 1
  if (num < props.current) return 'finish'
  if (num > props.current) return 'wait'
  return props.status
}

const isConnectorActive = (index) => {
  if (props.status === 'error' && props.current === 1) return false
  return props.current > index + 1
}
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.mobile-order-steps {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 8px 0 4px;
  box-sizing: border-box;
}

.mobile-order-steps__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-order-steps__col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(50% + 13px);
  right: 0;
  height: 1px;
  background: var(--color-neutral-3);
  pointer-events: none;
}

.mobile-order-steps__col--connector-active:not(:last-child)::after {
  background: rgb(var(--primary-6));
}

.mobile-order-steps__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.mobile-order-steps__node--wait {
  color: var(--color-text-3);
  background: var(--color-fill-2);
  border-color: var(--color-fill-2);
}

.mobile-order-steps__node--process {
  color: #fff;
  background: rgb(var(--primary-6));
  border-color: rgb(var(--primary-6));
}

.mobile-order-steps__node--finish {
  color: rgb(var(--primary-6));
  background: var(--color-primary-light-1);
  border-color: rgb(var(--primary-6));
}

.mobile-order-steps__node--error {
  color: #fff;
  background: rgb(var(--danger-6));
  border-color: rgb(var(--danger-6));
}

.mobile-order-steps__num {
  line-height: 1;
}

.mobile-order-steps__label {
  margin-top: 6px;
  max-width: 100%;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-order-steps {
  max-width: 100%;
  margin: 8px 0 16px;

  :deep(.arco-steps-item-node) {
    line-height: 1;
    vertical-align: top;
  }

  :deep(.arco-steps-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
  }
}
</style>
