<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-group-form
    ref="groupForm"
    v-model="model"
    v-bind="state.formProps"
    :fields="state.fields"
    :options="state.formOptions"
    @change="changeValue"
  />
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'

const textJSON = computed({
  get () {
    return JSON.stringify(model.value, null, '\t')
  },
  set ( value ) {
    model.value = JSON.parse(value)
  },
})
const model = ref({
  center: [ '1', '2' ],
  group: [
    {},
  ],
})
setTimeout(() => {
  model.value.group.push({
    color: '111'
  })
}, 5000)
const groupForm = ref()
const state = reactive<any>({
  fields: [
    {
      label: '数组模式',
      key: 'center',
      type: 'group',
      props: {
        mode: 'array',
        size: 'small',
        grid: {
          gap: 10,
        },
        gridItem: {
          span: 4,
        },
      },
      children: [
        {
          type: 'input',
          props: {
            size: 'small',
            placeholder: '经度',
            gridItem: { span: 2 },
          }
        },
        {
          type: 'input',
          props: {
            size: 'small',
            placeholder: '纬度',
            gridItem: { span: 2 },
          },
        },
      ],
    },
    {
      label: '可添加模式',
      type: 'group',
      key: 'group',
      props: {
        add: true,
        titlePosition: 'top',
        button: 'in-title',
        grid: {
          gap: 10,
        },
        gridItem: {
          span: 4,
        },
        title: ( index: number ) => {
          return `系列${ index }`
        },
        renderChildren: () => {
          return [
            {
              type: 'select',
              key: 'type',
              props: {
                size: 'small',
                placeholder: '类型',
                gridItem: { span: 1 },
              },
              options: [
                {
                  label: '折线图',
                  value: 'line',
                },
                {
                  label: '柱状图',
                  value: 'bar',
                },
                {
                  label: '饼图',
                  value: 'pie',
                },
                {
                  label: '雷达图',
                  value: 'radar',
                },
                {
                  label: '散点图',
                  value: 'scatter',
                },
              ],
              style: {
                size: 'small',
                marginRight: '10px',
              },
            }
          ]
        },
      },
      children: [],
    },
  ],
  formProps: {
    labelWidth: 90,
  },
  formOptions: {
    grid: {
      cols: 4,
    },
    gridItem: {
      span: 4,
    },
  },
})

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