<template>
<div :class="[$style.container]" v-loading="loading">
<div v-if="!loading">
  <div v-html="summary"></div>

  <h2>代码演示</h2>

  <code-preview v-for="(row, i) in comp.examples" :key="i" :example="row"></code-preview>

  <h2>API</h2>
  <api-table :api="row" v-for="row in comp.apis" :key="row.name"></api-table>

</div>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { CompPage } from '@/config/components/type'
import CodePreview from './layout/code-preview/index.vue'
import ApiTable from './layout/api-table/index.vue'

@Component({
  components: { CodePreview, ApiTable }
})
export default class ComponentPage extends Vue {
  @Prop() comp!: CompPage

  loading = false

  get summary () {
    return this.comp?.summary || ''
  }

  @Watch('comp', { immediate: true }) compChange () {
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 500)
  }
}
</script>

<style lang="scss" module>
.container {
  min-height: calc(100vh - 60px);
}
</style>
