<template>
  <div class="steps-container">
    <div v-for="(item, index) in list" :key="index" class="step-item">
      <div class="step">
        <SetpLine
          :show="index !== 0"
          :themeColor="themeColor"
          :isComplete="onSelectIndex > index"
        />
        <div @click="onClick(index)">
          <SetpPoint
            :isComplete="onSelectIndex > index + 1"
            :isSelect="onSelectIndex === index + 1"
            :icon="!stepIcontKey ? '' : item[stepIcontKey]"
            :text="!stepTextKey ? index + 1 : item[stepTextKey]"
            :themeColor="themeColor"
            :completeIcon="completeIcon"
          />
        </div>
        <SetpLine
          :show="index !== list.length - 1"
          :themeColor="themeColor"
          :isComplete="onSelectIndex > index + 1"
        />
      </div>

      <div
        @click="onClick(index)"
        class="steps-text-container"
        :class="textContainer(index)"
        :style="`color: ${onSelectIndex > index ? themeColor : '#C1C1C1'}`"
      >
        <span class="step-text">
          {{ item[valueKey] }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-07-11 15:50:10
 */
import SetpLine from "./component/SetpLine/index.vue";
import SetpPoint from "./component/SetpPoint/index.vue";
/**
 * @param list 列表
 * @param completeIcon 显示完成的字体图标，默认&#xe62c;
 * @param themeColor 主题色，选中以及完成状态的底色，默认#1C9FFF
 * @param stepTextKey 步骤圆中展示的字体，默认下标
 * @param valueKey 文字展示下标，默认text
 * @param onSelectIndex 当前选中下标，以1开始
 * @emits onClick 点击事件，返回当前点击下标，以0开始
 */
export default {
  name: "WlSteps",
  components: { SetpPoint, SetpLine },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    completeIcon: {
      type: String,
      default: "icon-mobile-ui-check-fill",
    },
    themeColor: {
      type: String,
      default: "#1C9FFF",
    },
    stepTextKey: {
      type: String,
      default: "",
    },
    stepIcontKey: {
      type: String,
      default: "",
    },
    valueKey: {
      type: String,
      default: "text",
    },
    onSelectIndex: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    textContainer() {
      return function(index) {
        return index === 0
          ? "steps-text-first-container"
          : index === this.list.length - 1
          ? "steps-text-last-container"
          : "";
      };
    },
  },
  methods: {
    onClick(index) {
      this.$emit("onClick", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.steps-container {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  .step-item,
  .step-last {
    flex: 1;
    .step {
      @extend %flex-between;
    }
  }
  .step-last {
    flex: none;
  }
  .steps-text-container,
  .steps-text-last-container {
    font-weight: 500;
    font-size: j(12);
    line-height: j(21);
    max-width: 70%;
    width: 100%;
    text-align: center;
    margin: auto;
    .step-text {
      @include textEllipsis(1);
      text-align: center;
    }
  }
  // .steps-text-first-container {
  //   margin-left: j(8);
  //     text-align: left;
  //   .step-text {
  //     text-align: left;
  //   }
  // }
  // .steps-text-last-container {
  //   margin-right: j(8);
  //     text-align: right;
  //   .step-text {
  //     text-align: right;
  //   }
  // }
}
</style>
