<template>
  <view class="s-steps-item" ref="s-steps-item" :class="[`s-steps-item--${parentData.direction}`]" @click="stepItemClick">
    <view
      class="s-steps-item__line"
      v-if="index + 1 < childLength"
      :class="[`s-steps-item__line--${parentData.direction}`]"
      :style="[lineStyle]"
    ></view>
    <view
      class="s-steps-item__wrapper"
      :class="[`s-steps-item__wrapper--${parentData.direction}`, parentData.dot && `s-steps-item__wrapper--${parentData.direction}--dot`]"
    >
      <slot name="icon">
        <view
          class="s-steps-item__wrapper__dot"
          v-if="parentData.dot"
          :style="{
						backgroundColor: statusColor
					}"
        ></view>
        <view
          class="s-steps-item__wrapper__icon"
          v-else-if="parentData.activeIcon && index <= parentData.current"
        >
          <s-icon
            :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
            :size="iconSize"
            :color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor"
          ></s-icon>
        </view>
        <view
          class="s-steps-item__wrapper__icon"
          v-else-if="parentData.inactiveIcon && index > parentData.current"
        >
          <s-icon
            :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
            :size="iconSize"
            :color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor"
          ></s-icon>
        </view>
        <view
          v-else
          :style="{
						backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
						borderColor: statusColor
					}"
          class="s-steps-item__wrapper__circle"
        >
          <text
            v-if="statusClass === 'process' || statusClass === 'wait'"
            class="s-steps-item__wrapper__circle__text"
            :style="{
							color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
						}"
          >{{ index + 1}}</text>
          <s-icon
            v-else
            :color="statusClass === 'error' ? 'error' : parentData.activeColor"
            size="12"
            :name="statusClass === 'error' ? 'close' : 'checkmark'"
          ></s-icon>
        </view>
      </slot>
    </view>
    <view
      class="s-steps-item__content"
      :class="[`s-steps-item__content--${parentData.direction}`]"
      :style="[contentStyle]"
    >
      <s--text
        :text="title"
        lineHeight="20px"
        :size="parentData.current == index ? 14 : 13"
        :color="statusClass === 'error' ? statusColor : index <= parentData.current ? parentData.activeColor : parentData.inactiveColor"
      ></s--text>
      <slot name="desc">
        <s--text :text="desc" color="#999999" size="12"></s--text>
      </slot>
    </view>
    <!-- <view
		    class="s-steps-item__line"
		    v-if="showLine && parentData.direction === 'column'"
			:class="[`s-steps-item__line--${parentData.direction}`]"
		    :style="[lineStyle]"
    ></view>-->
  </view>
</template>

<script>
import props from './props.js'
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
 * StepsItem 步骤条的子组件
 * @description 本组件需要和s-steps配合使用
 * @tutorial https://uviewui.com/components/steps.html
 * @property {String}			title			标题文字
 * @property {String}			current			描述文本
 * @property {String | Number}	iconSize		图标大小  (默认 17 )
 * @property {Boolean}			error			当前步骤是否处于失败状态  (默认 false )
 * @example <s-steps current="0"><s-steps-item title="已出库" desc="10:35" ></s-steps-item></s-steps>
 */
export default {
  name: 's-steps-item',
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {
      index: 0,
      childLength: 0,
      showLine: false,
      size: {
        height: 0,
        width: 0,
      },
      parentData: {
        direction: 'row',
        current: 0,
        activeColor: '',
        inactiveColor: '',
        activeIcon: '',
        inactiveIcon: '',
        dot: false,
      },
    }
  },
  watch: {
    parentData(newValue, oldValue) {},
  },
  created() {
    this.init()
  },
  computed: {
    lineStyle() {
      const style = {}
      if (this.parentData.direction === 'row') {
        // console.log(this.size)
        style.width = this.size.width + 'px'
        style.left = this.size.width / 2 + 'px'
      } else {
        style.height = this.size.height + 'px'
        // style.top = this.size.height / 2 + 'px'
      }
      style.backgroundColor = this.parent.children?.[this.index + 1]?.error
        ? uni.$s.color.error
        : this.index < this.parentData.current
        ? this.parentData.activeColor
        : this.parentData.inactiveColor
        
      // 设置虚线虚线模式
      // style.background = this.parent.children?.[this.index + 1]?.error
      //   ? uni.$s.color.error
      //   : this.index < this.parentData.current
      //   ? `linear-gradient(to left, transparent 0%,transparent 50%,${this.parentData.activeColor} 50%,${this.parentData.activeColor} 100%)`
      //   : ''
      // style.backgroundSize = '10px 1px'; 
      // style.backgroundRepeat = 'repeat';

      return style
    },
    statusClass() {
      const { index, error } = this
      const { current } = this.parentData
      if (current == index) {
        return error === true ? 'error' : 'process'
      } else if (error) {
        return 'error'
      } else if (current > index) {
        return 'finish'
      } else {
        return 'wait'
      }
    },
    statusColor() {
      let color = ''
      switch (this.statusClass) {
        case 'finish':
          color = this.parentData.activeColor
          break
        case 'error':
          color = '#D81307'
          break
        case 'process':
          color = this.parentData.dot
            ? this.parentData.activeColor
            : 'transparent'
          break
        default:
          color = this.parentData.inactiveColor
          break
      }
      return color
    },
    contentStyle() {
      const style = {}
      if (this.parentData.direction === 'column') {
        style.marginLeft = this.parentData.dot ? '2px' : '6px'
        style.marginTop = this.parentData.dot ? '0px' : '6px'
      } else {
        style.marginTop = this.parentData.dot ? '2px' : '6px'
        style.marginLeft = this.parentData.dot ? '2px' : '6px'
      }

      return style
    },
  },
  mounted() {
    this.parent && this.parent.updateFromChild()
    uni.$s.sleep().then(() => {
      this.getStepsItemRect()
    })
  },
  methods: {
    init() {
      // 初始化数据
      this.updateParentData()
      if (!this.parent) {
        return uni.$s.error('s-steps-item必须要搭配s-steps组件使用')
      }
      this.index = this.parent.children.indexOf(this)

      this.childLength = this.parent.children.length
      // console.log(this.childLength, '.................index')
    },
    // 点击事件向外抛
    stepItemClick(){
      this.$emit('click')
    },
    updateParentData() {
      // 此方法在mixin中
      this.getParentData('s-steps')
    },
    // 父组件数据发生变化
    updateFromParent() {
      this.init()
    },
    // 获取组件的尺寸，用于设置横线的位置
    getStepsItemRect() {
      // #ifndef APP-NVUE
      this.$sGetRect('.s-steps-item').then((size) => {
        // console.log(size, '.............size')
        this.size = size
      })
      // #endif

      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs['s-steps-item'], (res) => {
        const { size } = res
        this.size = size
      })
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.s-steps-item {
  flex: 1;
  @include flex;

  &--row {
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  &-start {
    align-items: flex-start;
  }
  &-end {
    align-items: flex-end;
  }
  &--column {
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    padding-bottom: 5px;
  }

  &__wrapper {
    @include flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #fff;

    &--column {
      width: 20px;
      height: 32px;

      &--dot {
        height: 20px;
        width: 20px;
      }
    }

    &--row {
      width: 32px;
      height: 20px;

      &--dot {
        width: 20px;
        height: 20px;
      }
    }

    &__circle {
      width: 20px;
      height: 20px;
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      flex-shrink: 0;
      /* #endif */
      border-radius: 100px;
      border-width: 1px;
      border-color: $s-tips-color;
      border-style: solid;
      @include flex(row);
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s;

      &__text {
        color: $s-tips-color;
        font-size: 14px;
        @include flex(row);
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 20px;
      }
    }

    &__dot {
      width: 10px;
      height: 10px;
      border-radius: 100px;
      background-color: $s-content-color;
    }
  }

  &__content {
    @include flex;
    flex: 1;

    &--row {
      flex-direction: column;
      align-items: center;
    }

    &--column {
      flex-direction: column;
      margin-left: 6px;
    }
  }

  &__line {
    position: absolute;
    background: $s-tips-color;

    &--row {
      top: 10px;
      height: 1px;
    }

    &--column {
      width: 1px;
      left: 10px;
    }
  }
}
</style>
