<template>
  <section class="AiIntro" v-if="detail.subtitle">
    <ai-title :title="detail.menuName">
      <div slot="rightBtn">
        <el-button type="text" icon="iconfont iconDocumentation">操作示例</el-button>
      </div>
      <div slot="sub" v-html="detail.subtitle"/>
    </ai-title>
    <el-button type="primary" @click="$emit('start')">开始使用</el-button>
    <div v-html="detail.guideContent"/>
  </section>
  <ai-empty v-else>暂未配置引导页</ai-empty>
</template>

<script>
export default {
  name: "AiIntro",
  props: {
    id: {default: ""},
    instance: Function,
  },
  data() {
    return {
      rid: "",
      detail: {}
    }
  },
  methods: {
    getConfigs() {
      const {rid: id} = this
      this.instance.post("/admin/sysappguideconfig/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
  },
  created() {
    this.rid = this.id || this.$route.name
    this.getConfigs()
  }
}
</script>

<style lang="scss" scoped>
.AiIntro {
  ::v-deep.ailist-title__right {
    flex: 1;
    min-width: 0;
  }
}
</style>
