<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-form
    v-model="model"
    :props="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({
  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: [],
  fields: [
    {
      label: '图片上传',
      key: 'image',
      type: 'upload',
      props: {
        view: 'image',
        accept: '.png'
      }
    },
    {
      label: 'richText',
      key: 'rich',
      type: 'richText',
      props: {
        inputStyle: {
          height: '300px'
        }
      }
    },
    {
      label: '数字',
      key: 'number',
      type: 'input-number',
      props: { size: 'small', placeholder: '数字' }
    },
    {
      label: '颜色',
      key: 'color',
      type: 'color',
      props: {
        type: 'echarts'
      }
    },
    {
      label: '前缀',
      key: 'prepend',
      type: 'input',
      props: {
        prepend: 'www.'
      }
    },
    {
      label: '后缀',
      key: 'append',
      type: 'input',
      props: {
        append: '.com'
      }
    },
    {
      label: '级联',
      type: 'cascader',
      props: {
        options: [
          {
            value: 'guide',
            label: 'Guide',
            children: [
              {
                value: 'disciplines',
                label: 'Disciplines',
                children: [
                  {
                    value: 'consistency',
                    label: 'Consistency'
                  },
                  {
                    value: 'feedback',
                    label: 'Feedback'
                  },
                  {
                    value: 'efficiency',
                    label: 'Efficiency'
                  },
                  {
                    value: 'controllability',
                    label: 'Controllability'
                  }
                ]
              },
              {
                value: 'navigation',
                label: 'Navigation',
                children: [
                  {
                    value: 'side nav',
                    label: 'Side Navigation'
                  },
                  {
                    value: 'top nav',
                    label: 'Top Navigation'
                  }
                ]
              }
            ]
          },
          {
            value: 'component',
            label: 'Component',
            children: [
              {
                value: 'basic',
                label: 'Basic',
                children: [
                  {
                    value: 'layout',
                    label: 'Layout'
                  },
                  {
                    value: 'color',
                    label: 'Color'
                  },
                  {
                    value: 'typography',
                    label: 'Typography'
                  },
                  {
                    value: 'icon',
                    label: 'Icon'
                  },
                  {
                    value: 'button',
                    label: 'Button'
                  }
                ]
              },
              {
                value: 'form',
                label: 'Form',
                children: [
                  {
                    value: 'radio',
                    label: 'Radio'
                  },
                  {
                    value: 'checkbox',
                    label: 'Checkbox'
                  },
                  {
                    value: 'input',
                    label: 'Input'
                  },
                  {
                    value: 'input-number',
                    label: 'InputNumber'
                  },
                  {
                    value: 'select',
                    label: 'Select'
                  },
                  {
                    value: 'cascader',
                    label: 'Cascader'
                  },
                  {
                    value: 'switch',
                    label: 'Switch'
                  },
                  {
                    value: 'slider',
                    label: 'Slider'
                  },
                  {
                    value: 'time-picker',
                    label: 'TimePicker'
                  },
                  {
                    value: 'date-picker',
                    label: 'DatePicker'
                  },
                  {
                    value: 'datetime-picker',
                    label: 'DateTimePicker'
                  },
                  {
                    value: 'upload',
                    label: 'Upload'
                  },
                  {
                    value: 'rate',
                    label: 'Rate'
                  },
                  {
                    value: 'form',
                    label: 'Form'
                  }
                ]
              },
              {
                value: 'data',
                label: 'Data',
                children: [
                  {
                    value: 'table',
                    label: 'Table'
                  },
                  {
                    value: 'tag',
                    label: 'Tag'
                  },
                  {
                    value: 'progress',
                    label: 'Progress'
                  },
                  {
                    value: 'tree',
                    label: 'Tree'
                  },
                  {
                    value: 'pagination',
                    label: 'Pagination'
                  },
                  {
                    value: 'badge',
                    label: 'Badge'
                  }
                ]
              },
              {
                value: 'notice',
                label: 'Notice',
                children: [
                  {
                    value: 'alert',
                    label: 'Alert'
                  },
                  {
                    value: 'loading',
                    label: 'Loading'
                  },
                  {
                    value: 'message',
                    label: 'Message'
                  },
                  {
                    value: 'message-box',
                    label: 'MessageBox'
                  },
                  {
                    value: 'notification',
                    label: 'Notification'
                  }
                ]
              },
              {
                value: 'navigation',
                label: 'Navigation',
                children: [
                  {
                    value: 'menu',
                    label: 'Menu'
                  },
                  {
                    value: 'tabs',
                    label: 'Tabs'
                  },
                  {
                    value: 'breadcrumb',
                    label: 'Breadcrumb'
                  },
                  {
                    value: 'dropdown',
                    label: 'Dropdown'
                  },
                  {
                    value: 'steps',
                    label: 'Steps'
                  }
                ]
              },
              {
                value: 'others',
                label: 'Others',
                children: [
                  {
                    value: 'dialog',
                    label: 'Dialog'
                  },
                  {
                    value: 'tooltip',
                    label: 'Tooltip'
                  },
                  {
                    value: 'popover',
                    label: 'Popover'
                  },
                  {
                    value: 'card',
                    label: 'Card'
                  },
                  {
                    value: 'carousel',
                    label: 'Carousel'
                  },
                  {
                    value: 'collapse',
                    label: 'Collapse'
                  }
                ]
              }
            ]
          },
          {
            value: 'resource',
            label: 'Resource',
            children: [
              {
                value: 'axure',
                label: 'Axure Components'
              },
              {
                value: 'sketch',
                label: 'Sketch Templates'
              },
              {
                value: 'docs',
                label: 'Design Documentation'
              }
            ]
          }
        ]
      }
    },
    {
      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': 'checkbox1685699780308',
      'type': 'checkbox-group',
      'props': {
        'formItem': {
          'optionsType': 0,
          'rules': []
        },
        'gridItem': {},
        'required': false,
        'rules': [],
        'append': '',
        'placeholder': '测试',
        'class': ''
      },
      'options': [
        {
          'label': '测试1',
          'value': '测试1'
        },
        {
          'label': '测试2',
          'value': '测试2'
        },
        {
          'label': '测试3',
          'value': '测试3'
        }
      ],
      'defaultValue': [],
      'code': 'eleJKb06yluM6ursqt7zM'
    },
    {
      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: 160
  },
  formOptions: {
    grid: {
      cols: 6
    },
    formItem: {
      style: {
        marginBottom: 0
      }
    }
  }
})

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