<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-form
    v-model="model"
    :props="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({
  number: 12,
  checkGroup: [],
  select: '',
  selectMulti: [],
  center: ['1', '2'],
  color: '#ffffff',
  slider: 3,
  colorECharts: 'rgba(133,131,112,0.5)'
})

setTimeout(() => {
  model.value.number = 30
}, 5000)
const state = reactive<any>({
  polygons: [],
  labels: [
    {
      label: '数字',
      key: 'number',
      type: 'input-number',
      props: { size: 'small', placeholder: '数字' }
    },
    {
      label: '颜色',
      key: 'color',
      type: 'color',
      props: {
        type: 'echarts'
      }
    },
    {
      label: 'slider',
      key: 'slider',
      type: 'slider',
      props: {
        min: 1,
        max: 7
      }
    },
    {
      label: '下拉',
      key: 'select',
      type: 'select',
      props: {
        multiple: true
      },
      options: [
        {
          label: '苹果',
          value: 1
        },
        {
          label: '华为',
          value: 2
        }
      ]
    },
    {
      label: '下拉',
      key: 'selectMulti',
      type: 'checkbox-group',
      options: [
        {
          label: '苹果',
          value: 1
        },
        {
          label: '华为',
          value: 2
        }
      ]
    },
    {
      label: '颜色',
      key: 'colorECharts',
      type: 'color',
      props: {
        type: 'echarts'
      }
    },
    {
      label: '颜色组',
      key: 'colorGroup',
      type: 'colorGroup',
      props: {
        type: 'css',
        options: [
          {
            value: ['red', 'blue', 'green']
          },
          {
            value: ['#fff', '#ddd', '#666']
          },
          {
            value: ['#123456', '#443344', '#ff4421']
          }
        ]
      }
    }
  ],
  formProps: {
    labelWidth: 60
  },
  formOptions: {
    grid: {
      cols: 12
    },
    gridItem: {
      span: 6
    }
  }
})

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