<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-group-table
    edit
    v-model:data="tableData"
    :columns="columns"
    :option="options"
  >
  </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) {
    console.log(value)
    tableData.value = JSON.parse(value)
  }
})

const tableData: any = ref([
  { zoom: 1, pitch: 2, jd: 1, wd: 2 },
  { zoom: 1, pitch: 2, jd: 1, wd: 2 }
])
const options = ref({
  width: 100,
  btns: [
    {
      name: '新增',
      handler: () => {
        add()
      }
    },
    {
      name: '删除',
      handler: (row: any) => {
        remove(row)
      }
    }
  ]
})

const columns = ref([
  {
    label: 'zoom',
    key: 'zoom'
  },
  {
    label: '倾斜度',
    key: 'pitch',
    type: 'select',
    props: { size: 'small', placeholder: '倾斜' },
    options:[
      {
        label:'可选1',
        value:1
      },
      {
        label:'可选2',
        value:2
      },
      {
        label:'可选3',
        value:3
      }
    ]
  },
  {
    label: '中心',
    key: 'center',
    type: 'group',
    props: {
      mode: 'array',
      size: 'small',
      grid: {
        span: 4
      }
    },
    children: [
      {
        label: '经度',
        key: 'jd',
        props: {
          size: 'small',
          placeholder: '经度',
          grid: { span: 2 }
        },
        style: {
          marginRight: '10px'
        }
      },
      {
        label: '纬度',
        key: 'wd',
        type: 'input',
        props: {
          size: 'small',
          placeholder: '纬度',
          grid: { span: 2 }
        }
      }
    ]
  }
])

function changeValue (key: string, value: any) {
  console.log(key, value)
}

function add () {
  tableData.value.push({})
}

function remove (row: any) {
  const index = tableData.value.findIndex((item: any) => item._rowKey === row._rowKey)
  tableData.value.splice(index, 1)
}
</script>
