<template>
  <common-usage
    :code="usageCode"
    :config-list="configList"
    @panel-change="onPanelChange"
  >
    <template #button="{configProps}">
      <button v-bind="configProps">按钮</button>
    </template>
    <template #buttonGroup="{configProps}">
      <input v-bind="configProps"/>
    </template>
  </common-usage>
</template>
<script lang="ts" setup>
import { ref, computed, Ref } from 'vue';
import {configJson} from './props'

const configList = computed(() => configJson)

const usageCodeMap = {
  button: `<button v-bind="configProps">按钮</button>`,
  buttonGroup: `<input v-bind="configProps"/>`
}

const usageCode = ref(`<template>
  ${usageCodeMap[configList.value[0].value].trim()}
</template>`)

function onPanelChange (value)  {
  usageCode.value = `<template>
  ${usageCodeMap[value].trim()}
</template>`
}
</script>
