<script setup lang="ts">
import type { TourStep } from '@/components/FsTour/types'
import type { ElButton } from 'element-plus'
const current = ref()
const uploadRef1 = ref<InstanceType<typeof ElButton>>()
const saveRef1 = ref<InstanceType<typeof ElButton>>()
const moreRef1 = ref<InstanceType<typeof ElButton>>()

/** 步骤 */
const steps = ref<TourStep[]>([
  {
    target: () => uploadRef1.value?.$el,
    title: '修改数据',
    description: '点击这个按钮在弹出框中选择想要修改的数据即可.'
  },
  {
    target: () => saveRef1.value?.$el,
    title: '保存数据',
    description: '数据录入完成后点击这个按钮即可提交数据到后台.'
  },
  {
    target: () => moreRef1.value?.$el,
    title: '如何进行更多的操作',
    description: '鼠标移入到此按钮上即可展示出更多的操作功能.'
  }
])

const current2 = ref()
const uploadRef2 = ref<InstanceType<typeof ElButton>>()
const saveRef2 = ref<InstanceType<typeof ElButton>>()
const moreRef2 = ref<InstanceType<typeof ElButton>>()
/** 步骤 */
const steps2 = ref<TourStep[]>([
  {
    target: () => uploadRef2.value?.$el,
    title: '修改数据',
    description: '点击这个按钮在弹出框中选择想要修改的数据即可.'
  },
  {
    target: () => saveRef2.value?.$el,
    title: '保存数据',
    description: '数据录入完成后点击这个按钮即可提交数据到后台.'
  },
  {
    target: () => moreRef2.value?.$el,
    title: '如何进行更多的操作',
    description: '鼠标移入到此按钮上即可展示出更多的操作功能.'
  }
])

const current3 = ref()
const uploadRef3 = ref<InstanceType<typeof ElButton>>()
const saveRef3 = ref<InstanceType<typeof ElButton>>()
const moreRef3 = ref<InstanceType<typeof ElButton>>()
const steps3 = ref<TourStep[]>([
  {
    title: '欢迎使用 xxxx管理系统 系统',
    description: '下面将为您介绍一些常用功能的操作说明, 如果之前已经为您介绍过, 您可以直接点击跳过结束指引.'
  },
  {
    target: () => uploadRef3.value?.$el,
    title: '如何进行文件上传',
    description: '点击这个按钮在弹出框中选择想要上传的文件即可.'
  },
  {
    target: () => saveRef3.value?.$el,
    title: '如何提交数据',
    description: '数据录入完成后点击这个按钮即可提交数据到后台.',
    mask: false
  },
  {
    target: () => moreRef3.value?.$el,
    title: '如何进行更多的操作',
    description: '鼠标移入到此按钮上即可展示出更多的操作功能.'
  }
])

const onStart1 = () => {
  current.value = 0
}

const onStart2 = () => {
  current2.value = 0
}

const onStart3 = () => {
  current3.value = 0
}
</script>

<template>
  <el-card header="基础用法" shadow="never">
    <div>
      <el-button type="primary" @click="onStart1">开始引导</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-button ref="uploadRef1">修改</el-button>
      <el-button ref="saveRef1" type="primary">保存</el-button>
      <el-button ref="moreRef1">更多</el-button>
    </div>
    <fs-tour v-model="current" :steps="steps" :once="true" tour-key="tourKey1" />
    <p class="text-xs mt-2 text-neutral">
      <span>*注：</span>
      <span>只显示一次，如想多次显示请去除配置（once）</span>
    </p>
  </el-card>

  <el-card header="不带遮罩层" shadow="never" class="mt-3">
    <div>
      <el-button type="primary" @click="onStart2">开始引导</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-button ref="uploadRef2">修改</el-button>
      <el-button ref="saveRef2" type="primary">保存</el-button>
      <el-button ref="moreRef2">更多</el-button>
    </div>
    <fs-tour v-model="current2" :steps="steps2" :mask="false" />
  </el-card>

  <el-card header="混合弹窗等多种形式" shadow="never" class="mt-3">
    <div>
      <el-button type="primary" @click="onStart3">开始引导</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-button ref="uploadRef3">Upload</el-button>
      <el-button ref="saveRef3" type="primary">Save</el-button>
      <el-button ref="moreRef3">More</el-button>
    </div>
    <fs-tour v-model="current3" :steps="steps3">
      <template #text="{ step, current }">
        <template v-if="current === 0">
          <div style="margin-bottom: 10px">
            <img
              src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ"
              style="height: 184px; width: 100%; object-fit: cover"
            />
          </div>
          <div>{{ step.description }}</div>
        </template>
      </template>
    </fs-tour>
  </el-card>
</template>

<style scoped lang="scss"></style>
