<template>
  <div>
    <div>
      <ShowCode :formatCode="formatCode"
                :subTitle="$t('demo.guide.text_1')"
                :title="$t('demo.guide.text_1')">
        <div class="guide-btn-wrap">
          <el-button type="primary"
                     @click.stop.prevent="openGuide">{{$t('demo.guide.text_2')}}</el-button>
          <el-button type="primary"
                     id="test-sdk">{{$t('demo.guide.text_3')}}</el-button>
          <el-button type="primary"
                     id="second-sdk">{{$t('demo.guide.text_4')}}</el-button>
        </div>
      </ShowCode>
    </div>
    <div>

      <h1 class="demo-header-text">Methods</h1>
      <MdView url="md/ht-guide-sdk/methods.md"></MdView>
    </div>
  </div>
</template>

<script>
import Guide from 'guide-sdk'
import { code } from './code'
export default {
  name: 'guideSdk',
  data() {
    return {
      formatCode: code,
    }
  },
  components: {
    ShowCode: () => import('@/components/common/show-code'),
    MdView: () => import('@/views/MdView'),
  },
  methods: {
    async openGuide() {
      let guideSdk = new Guide(
        {
          stepList: [
            {
              classId: '#test-sdk',
              title: '技术中台1',
              content: '技术中台1',
              nextText: '下一步',
              prevText: '跳过',
            },
            {
              classId: '#second-sdk',
              title: '技术中台2',
              content: '技术中台2',
              nextText: '下一步',
              prevText: '上一步',
            },
          ],
        },
        (step) => {
          if (!step) return
          guideSdk.renderDom(+step + 1)
        },
        (step) => {
          if (!step) return
          guideSdk.renderDom(+step - 1)
        },
        (step) => {}
      )
      guideSdk.renderDom(1)
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.guide-btn-wrap {
  display: flex;
}
#second-sdk {
  margin-left: 40px;
}
#test-sdk {
  margin-left: 40px;
}
</style>