<template>
  <view class="uni-steps">
    <view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
      <view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
        <view
          v-for="(item,index) in options"
          :key="index"
          :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text',index === active?'uni-steps-active':'']"
        >
          <text
            :style="{color:index === active?activeColor:deactiveColor}"
            :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']"
          >
            {{ item.title }}
          </text>
          <text
            :style="{color: deactiveColor}"
            :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']"
          >
            {{ item.desc }}
          </text>
        </view>
      </view>
      <view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
        <view
          v-for="(item,index) in options"
          :key="index"
          :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
        >
          <view
            :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
            :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"
          />
          <view
            v-if="index === active"
            :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
          >
            <uni-icons
              :color="activeColor"
              :type="activeIcon"
              size="14"
            />
          </view>
          <view
            v-else
            :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
            :style="{backgroundColor:index<active?activeColor:deactiveColor}"
          />
          <view
            :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
            :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import uniIcons from '@/components/icons/icons.vue'
/**
 * Steps 步骤条
 * @description 评分组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
 * @property {Number} active 当前步骤
 * @property {String} direction = [row|column] 当前步骤
 *   @value row 横向
 *   @value column 纵向
 * @property {String} activeColor 选中状态的颜色
 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
 */
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  direction: {
    // 排列方向 row column
    type: String,
    default: 'row'
  },
  activeColor: {
    // 激活状态颜色
    type: String,
    default: '#2979FF'
  },
  deactiveColor: {
    // 未激活状态颜色
    type: String,
    default: '#B7BDC6'
  },
  active: {
    // 当前步骤
    type: Number,
    default: 0
  },
  activeIcon: {
    // 当前步骤
    type: String,
    default: 'checkbox-filled'
  },
  options: {
    type: Array,
    default: () => {
      return []
    }
  } // 数据
})
</script>

<style lang="scss" scoped>
@use "steps";
</style>
