<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.labels"
    :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: [
    {},
  ],
})
const groupForm = ref()
const state = reactive<any>({
  polygons: [],
  labels: [
    {
      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 },
          },
        },
        {
          show ({ getItemValue }) {
            console.log(getItemValue({ key: 'center' }))
            return getItemValue({ key: 'center' })?.[0]
          },
          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: {
                marginRight: '10px',
              },
            },
            {
              show ({ getGroupValue, groupIndex }) {
                console.log(getGroupValue({ key: 'group' }))
                if (getGroupValue({ key: 'group' })) {
                  return getGroupValue({ key: 'group' }).group[groupIndex]?.type === 'line'
                } else {
                  return false
                }
              },
              label: '备注',
              type: 'input',
              key: 'remark',
              props: {
                size: 'small',
                gridItem: { span: 1 },
              },
            },
            {
              show ({ getGroupValue, groupIndex }) {
                if (getGroupValue({ key: 'group' })) {
                  return getGroupValue({ key: 'group' }).group[groupIndex]?.type === 'bar'
                } else {
                  return false
                }
              },
              label: '颜色',
              type: 'color',
              key: 'itemStyle.color',
              props: {
                type: 'echarts',
                gridItem: { span: 1 },
              },
            },
          ]
        },
      },
      children: [],
    },
  ],
  formProps: {
    labelWidth: 90,
  },
  formOptions: {
    grid: {
      cols: 4,
    },
    gridItem: {
      span: 4,
    },
  },
})

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