<import-sjs
  from="./index.sjs"
  name="utils"
></import-sjs>
<import-sjs
  from="../_util/isPropsEmpty.sjs"
  name="u"
></import-sjs>
<view
  a:if="{{visible}}"
  class="ant-guide-tour {{className || ''}}"
  style="{{style || ''}}"
>
  <ant-mask
    show
    className="{{maskClassName}}"
    style="z-index:9999;{{maskStyle || ''}}"
  ></ant-mask>
  <ant-icon
    type="CloseOutline"
    className="ant-guide-tour-clear"
    onTap="onCancel"
  ></ant-icon>
  <view class="ant-guide-tour-button">
    <ant-button
      a:if="{{utils.checkShowJump(mixin.value, items)}}"
      inline
      size="small"
      onTap="onCancel"
    >
      <ant-auto-resize
        text="{{u.isPropsEmpty(jumpText) ? locale.guideTour.jumpText : jumpText}}"
        ratio="{{4}}"
        minFontSize="20"
        maxFontSize="30"
      >
        {{u.isPropsEmpty(jumpText) ? locale.guideTour.jumpText : jumpText}}
      </ant-auto-resize>
    </ant-button>
    <ant-button
      a:if="{{utils.checkShowPrev(mixin.value, items)}}"
      inline
      size="small"
      onTap="onPrev"
      data-currentValue="{{mixin.value}}"
    >
      <ant-auto-resize
        text="{{u.isPropsEmpty(prevStepText) ? locale.guideTour.prevStepText : prevStepText}}"
        ratio="{{4}}"
        minFontSize="20"
        maxFontSize="30"
      >
        {{u.isPropsEmpty(prevStepText) ? locale.guideTour.prevStepText : prevStepText}}
      </ant-auto-resize>
    </ant-button>
    <ant-button
      a:if="{{utils.checkShowNext(mixin.value, items)}}"
      inline
      size="small"
      onTap="onNext"
      data-currentValue="{{mixin.value}}"
    >
      <ant-auto-resize
        text="{{u.isPropsEmpty(nextStepText) ? locale.guideTour.nextStepText : nextStepText}}"
        ratio="{{4}}"
        minFontSize="20"
        maxFontSize="30"
      >
        {{u.isPropsEmpty(nextStepText) ? locale.guideTour.nextStepText : nextStepText}}
      </ant-auto-resize>
    </ant-button>
    <ant-button
      a:if="{{utils.checkShowKnow(mixin.value, items)}}"
      inline
      size="small"
      onTap="onCancel"
    >
      <ant-auto-resize
        text="{{u.isPropsEmpty(gotItText) ? locale.guideTour.gotItText : gotItText}}"
        ratio="{{4}}"
        minFontSize="20"
        maxFontSize="30"
      >
        {{u.isPropsEmpty(gotItText) ? locale.guideTour.gotItText : gotItText}}
      </ant-auto-resize>
    </ant-button>
  </view>
  <block a:if="{{swiperable}}">
    <view class="ant-guide-tour-indicator">
      <block
        a:for="{{items}}"
        a:for-index="index"
        a:for-item="item"
        key="{{item['imageUrl']}}"
      >
        <view class="ant-guide-tour-indicator-dot {{index === mixin.value ? 'ant-guide-tour-indicator-dot-active' : ''}}"></view>
      </block>
    </view>
    <swiper
      class="ant-guide-tour-swiper"
      current="{{mixin.value}}"
      adjustHeight="none"
      style="height: 100vh"
      onChange="onSwiperChange"
    >
      <block
        a:for="{{items}}"
        a:for-index="index"
        a:for-item="item"
        key="{{item['imageUrl']}}"
      >
        <swiper-item>
          <view
            class="ant-guide-tour-item {{item.className || ''}}"
            style="top:{{item.top}}px; left:{{item.left}}px"
          >
            <slot
              name="step"
              index="{{mixin.current}}"
            >
              <image
                a:if="{{item.imageUrl}}"
                class="ant-guide-tour-item-img"
                src="{{item.imageUrl}}"
                style="{{item.imageStyle}}"
                mode="{{item.imageMode}}"
              ></image>
            </slot>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </block>
  <block a:else>
    <block
      a:for="{{items}}"
      a:for-index="index"
      a:for-item="item"
      key="{{item['imageUrl']}}"
    >
      <view
        a:if="{{mixin.value === index}}"
        class="ant-guide-tour-item {{item.className || ''}}"
        style="top:{{item.top}}px; left:{{item.left}}px"
      >
        <slot
          name="step"
          index="{{index}}"
        >
          <image
            a:if="{{item.imageUrl}}"
            class="ant-guide-tour-item-img"
            src="{{item.imageUrl}}"
            style="{{item.imageStyle}}"
            mode="{{item.imageMode}}"
          ></image>
        </slot>
      </view>
    </block>
  </block>
</view>