<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-group-table
    index="序号"
    v-model:data="tableData"
    :columns="columns"
    :pageConfig="pageConfig"
    @changePageNumber="changePageNumber"
  >
  </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([
  { zoom: 1, pitch: 2, jd: 1, wd: 2 },
  { zoom: 1, pitch: 2, jd: 1, wd: 2 }
])

const pageConfig = ref({
  page: 1,
  total: 1000
})

function changePageNumber (page) {
  console.log(page,11)
  pageConfig.value.page = page
}

const columns = ref([
  {
    label: '倾斜度',
    key: 'pitch',
    type: 'input',
    props: { size: 'small', placeholder: '倾斜' }
  },
  {
    label: '经度',
    key: 'jd',
    type: 'input',
    props: { size: 'small', placeholder: '倾斜' }
  },
  {
    label: '纬度',
    key: 'wd',
    type: 'input',
    props: { size: 'small', placeholder: '倾斜' }
  }
])

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