<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-group-table
    :span-key="['level']"
    v-model:data="tableData"
    :columns="columns"
  >
  </s-group-table>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'

const textJSON = computed({
  get () {
    return JSON.stringify(tableData.value, null, '\t')
  },
  set (value) {
    tableData.value = JSON.parse(value)
  }
})

const tableData = ref([
  {
    level: '低级',
    type: '苹果',
    price:'1元/kg'
  },
  {
    level: '低级',
    type: '香蕉',
    price:'2元/kg'
  },
  {
    level: '低级',
    type: '梨',
    price:'3元/kg'
  },
  {
    level: '中级',
    type: '水晶苹果1',
    price:'4元/kg'
  },
  {
    level: '中级',
    type: '水晶苹果2',
    price:'5元/kg'
  },
  {
    level: '中级',
    type: '黄金奇异果1',
    price:'6元/kg'
  },
  {
    level: '中级',
    type: '黄金奇异果2',
    price:'7元/kg'
  }
])

const columns = ref([
  {
    label: '等级',
    key: 'level'
  },
  {
    label: '种类',
    key: 'type'
  },
  {
    label: '价格',
    key: 'price'
  },
])

function changeValue (key: string, value: any) {
  console.log(key, value)
}
</script>
