<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-code-editor v-model="selectionJSON" lang="json"></s-code-editor>
  <s-group-table
    ref="table"
    :select="true"
    :index="true"
    v-model:data="tableData"
    :columns="columns"
    :option="{
      btns:[
        {
          name:'详情'
        }
      ]
    }"
    :selection="selection"
    @selectChange="selectChange"
  >
  </s-group-table>
  <el-button @click="pick">选中</el-button>
  <el-button @click="cancel">取消</el-button>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { cloneDeep } from 'lodash-es'

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 selection = ref([])
const selectionJSON = computed({
  get () {
    return JSON.stringify(selection.value, null, '\t')
  },
  set (value) {
    selection.value = JSON.parse(value)
  }
})

function selectChange (params) {
  console.log(params)
}

const table = ref()

function pick () {
  const tableRef = table.value.table
  const tableDta = table.value.tableData
  tableRef.toggleRowSelection(tableDta[0],undefined)
}

function cancel () {
}

const columns = ref([
  {
    label: 'zoom',
    key: 'zoom'
  },
  {
    label: '倾斜度',
    key: 'pitch',
    props: {
      sortable: true
    }
  },
  {
    label: '中心',
    key: 'center',
    type: 'group',
    props: {
      mode: 'array',
      size: 'small',
      grid: {
        span: 4
      }
    },
    children: [
      {
        label: '经度',
        key: 'jd'
      },
      {
        label: '纬度',
        key: 'wd'
      }
    ]
  }
])

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