<template>
  <section class="AiOkrTree">
    <component v-if="okrTreeLoaded" v-bind="$attrs" :is="ot" :data="data"/>
  </section>
</template>

<script>
import Vue from "vue"

export default {
  name: "AiOkrTree",
  props: {
    data: {default: () => []}
  },
  computed: {
    okrTreeLoaded: v => !!v.ot
  },
  data() {
    return {
      ot: null
    }
  },
  created() {
    this.$injectCss("https://cdn.cunwuyun.cn/vot/vue-okr-tree.css")
    this.$injectLib("https://cdn.cunwuyun.cn/vot/vue-okr-tree.umd.min.js", () => {
      const {VueOkrTree} = (window?.["vue-okr-tree"] || {})
      this.ot = Vue.extend({
        ...VueOkrTree, data() {
          return {...this.$attrs}
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.AiOkrTree {
}
</style>
