<template>
  <collapse-item name="按钮配置" :expanded="true">
    <setting-item-box name="配置项" :alone="true">
      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
        <n-input v-model:value="item.label" size="small" placeholder="按钮文字"></n-input>
        <div style="height: 5px"></div>
        <n-input v-model:value="item.currentButton" size="small" placeholder="当前按钮"></n-input>
        <div style="height: 5px"></div>
        <n-input v-model:value="item.targetButton" size="small" placeholder="目标按钮"></n-input>
        <div style="height: 5px"></div>
        <n-input v-model:value="item.current" size="small" placeholder="当前页面"></n-input>
        <div style="height: 5px"></div>
        <n-input v-model:value="item.target" size="small" placeholder="目标页面"></n-input>
        <div style="height: 5px"></div>
      </setting-item>
    </setting-item-box>
  </collapse-item>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { option } from './config'

defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})
</script>