import { reactive } from 'vue'
import type { IConfig, ILeftAsideConfigItem } from './types'
const sysComponentItems: ILeftAsideConfigItem[] = [
  {
    id: 'sys-line',
    title: '自由连线',
    type: 'sys-line',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQgMThhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTE2IDZhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTcuNSAxNi41bDktOSIvPjwvc3ZnPg==`,
    props: {
      stroke: {
        title: '线条颜色',
        type: 'color',
        val: '#ff0000'
      },
      'stroke-width': {
        title: '线条宽度',
        type: 'number',
        val: 2
      },
      lineStyle: {
        title: '线条样式',
        type: 'select',
        val: 'solid',
        options: [
          {
            label: '实线',
            value: 'solid'
          },
          {
            label: '虚线',
            value: 'dashed'
          },
          {
            label: '点线',
            value: 'dotted'
          },
          {
            label: '点划线',
            value: 'dash-dot'
          }
        ]
      },
      'marker-start': {
        title: '起点箭头',
        type: 'switch',
        val: false
      },
      'marker-end': {
        title: '终点箭头',
        type: 'switch',
        val: true
      },
      point_position: {
        title: '点坐标',
        type: 'jsonEdit',
        val: [
          {
            x: 0,
            y: 0
          },
          {
            x: 100,
            y: 0
          }
        ],
        disabled: true
      },
      ani_type: {
        title: '动画类型',
        type: 'select',
        val: 'none',
        options: [
          {
            label: '无',
            value: 'none'
          },
          {
            label: '电流',
            value: 'electricity'
          },
          {
            label: '轨迹',
            value: 'track'
          },
          {
            label: '水珠',
            value: 'waterdrop'
          }
        ]
      },
      ani_dur: { title: '持续时间', type: 'number', val: 20 },
      ani_color: { title: '动画颜色', type: 'color', val: '#0a7ae2' },
      ani_reverse: { title: '动画反转', type: 'switch', val: false },
      ani_play: { title: '动画播放', type: 'switch', val: true },
      bind_anchors: {
        title: '锚点绑定',
        type: 'jsonEdit',
        val: {
          start: null,
          end: null
        },
        disabled: true
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  },
  {
    id: 'sys-line-vertical',
    title: '自由连线-竖线',
    type: 'sys-line',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQgMThhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTE2IDZhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTcuNSAxNi41bDktOSIvPjwvc3ZnPg==`,
    props: {
      stroke: {
        title: '线条颜色',
        type: 'color',
        val: '#ff0000'
      },
      'stroke-width': {
        title: '线条宽度',
        type: 'number',
        val: 2
      },
      lineStyle: {
        title: '线条样式',
        type: 'select',
        val: 'solid',
        options: [
          {
            label: '实线',
            value: 'solid'
          },
          {
            label: '虚线',
            value: 'dashed'
          },
          {
            label: '点线',
            value: 'dotted'
          },
          {
            label: '点划线',
            value: 'dash-dot'
          }
        ]
      },
      'marker-start': {
        title: '起点箭头',
        type: 'switch',
        val: false
      },
      'marker-end': {
        title: '终点箭头',
        type: 'switch',
        val: true
      },
      point_position: {
        title: '点坐标',
        type: 'jsonEdit',
        val: [
          {
            x: 0,
            y: 0
          },
          {
            x: 0,
            y: 100
          }
        ],
        disabled: true
      },
      ani_type: {
        title: '动画类型',
        type: 'select',
        val: 'none',
        options: [
          {
            label: '无',
            value: 'none'
          },
          {
            label: '电流',
            value: 'electricity'
          },
          {
            label: '轨迹',
            value: 'track'
          },
          {
            label: '水珠',
            value: 'waterdrop'
          }
        ]
      },
      ani_dur: { title: '持续时间', type: 'number', val: 20 },
      ani_color: { title: '动画颜色', type: 'color', val: '#0a7ae2' },
      ani_reverse: { title: '动画反转', type: 'switch', val: false },
      ani_play: { title: '动画播放', type: 'switch', val: true },
      bind_anchors: {
        title: '锚点绑定',
        type: 'jsonEdit',
        val: {
          start: null,
          end: null
        },
        disabled: true
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  },
  {
    id: 'text-vue',
    title: '文字',
    type: 'vue',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0ibTMyIDQxNS41bDEyMC0zMjBsMTIwIDMyMG0tNDItMTEySDc0bTI1Mi02NGMxMi4xOS0yOC42OSA0MS00OCA3NC00OGgwYzQ2IDAgODAgMzIgODAgODB2MTQ0Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTMyMCAzNTguNWMwIDM2IDI2Ljg2IDU4IDYwIDU4YzU0IDAgMTAwLTI3IDEwMC0xMDZ2LTE1Yy0yMCAwLTU4IDEtOTIgNWMtMzIuNzcgMy44Ni02OCAxOS02OCA1OCIvPjwvc3ZnPg==`,
    props: {
      text: {
        title: '文字内容',
        type: 'input',
        val: '文字'
      },
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Microsoft YaHei, PingFang SC, sans-serif',
        options: [
          {
            value: 'Microsoft YaHei, PingFang SC, sans-serif',
            label: '微软雅黑'
          },
          {
            value: 'SimSun, Songti SC, serif',
            label: '宋体'
          },
          {
            value: 'SimHei, Heiti SC, sans-serif',
            label: '黑体'
          },
          {
            value: 'PingFang SC, Microsoft YaHei, sans-serif',
            label: '苹方'
          },
          {
            value: 'Noto Sans SC, Microsoft YaHei, sans-serif',
            label: '思源黑体'
          },
          {
            value: 'YouSheBiaoTiHei, Microsoft YaHei, sans-serif',
            label: '优设标题黑'
          },
          {
            value: 'KaiTi, Kaiti SC, serif',
            label: '楷体'
          },
          {
            value: 'FangSong, STFangsong, serif',
            label: '仿宋'
          },
          {
            value: 'Arial, Helvetica, sans-serif',
            label: 'Arial'
          },
          {
            value: 'DIN Alternate, Arial Narrow, Arial, sans-serif',
            label: 'DIN 数字'
          },
          {
            value: 'Consolas, Monaco, monospace',
            label: '等宽字体'
          }
        ]
      },
      fontSize: {
        title: '文字大小',
        type: 'number',
        val: 18
      },
      fill: {
        title: '文字颜色',
        type: 'color',
        val: '#FFF700'
      },
      bold: {
        title: '文字加粗',
        type: 'switch',
        val: false
      },
      textAlign: {
        title: '文字对齐',
        type: 'select',
        val: 'left',
        options: [
          {
            value: 'left',
            label: '左对齐'
          },
          {
            value: 'center',
            label: '居中'
          },
          {
            value: 'right',
            label: '右对齐'
          }
        ]
      },
      vertical: {
        title: '竖排展示',
        type: 'switch',
        val: false
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  },
  {
    id: 'wireframe-vue',
    title: '线框',
    type: 'vue',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0Ij48cmVjdCB4PSIxNjAiIHk9IjIyNCIgd2lkdGg9IjcwNCIgaGVpZ2h0PSI1NzYiIHJ4PSI2NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDA5ZWZmIiBzdHJva2Utd2lkdGg9IjY0IiBzdHJva2UtZGFzaGFycmF5PSIxMjAgNjQiLz48L3N2Zz4=`,
    props: {
      fill: {
        title: '背景色',
        type: 'color',
        val: 'rgba(255, 255, 255, 0)',
        showAlpha: true,
        colorFormat: 'rgb'
      },
      borderColor: {
        title: '边框颜色',
        type: 'color',
        val: '#409eff',
        showAlpha: true,
        colorFormat: 'rgb'
      },
      borderStyle: {
        title: '边框样式',
        type: 'select',
        val: 'solid',
        options: [
          {
            value: 'solid',
            label: '实线'
          },
          {
            value: 'dashed',
            label: '虚线'
          },
          {
            value: 'dotted',
            label: '点线'
          },
          {
            value: 'double',
            label: '双线'
          },
          {
            value: 'none',
            label: '无'
          }
        ]
      },
      borderWidth: {
        title: '边框宽度',
        type: 'number',
        val: 2
      },
      borderRadius: {
        title: '圆角',
        type: 'number',
        val: 0
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  },
  {
    id: 'card-vue',
    title: '卡片',
    type: 'vue',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9ImN1cnJlbnRDb2xvciI+PHBhdGggZD0iTTE0LjUgM2EuNS41IDAgMCAxIC41LjV2OWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjV2LTlhLjUuNSAwIDAgMSAuNS0uNXptLTEzLTFBMS41IDEuNSAwIDAgMCAwIDMuNXY5QTEuNSAxLjUgMCAwIDAgMS41IDE0aDEzYTEuNSAxLjUgMCAwIDAgMS41LTEuNXYtOUExLjUgMS41IDAgMCAwIDE0LjUgMnoiLz48cGF0aCBkPSJNMyA1LjVhLjUuNSAwIDAgMSAuNS0uNWg5YS41LjUgMCAwIDEgMCAxaC05YS41LjUgMCAwIDEtLjUtLjVNMyA4YS41LjUgMCAwIDEgLjUtLjVoOWEuNS41IDAgMCAxIDAgMWgtOUEuNS41IDAgMCAxIDMgOG0wIDIuNWEuNS41IDAgMCAxIC41LS41aDZhLjUuNSAwIDAgMSAwIDFoLTZhLjUuNSAwIDAgMS0uNS0uNSIvPjwvZz48L3N2Zz4=`,
    props: {
      shadow: {
        title: '阴影显示时机',
        type: 'select',
        val: 'always',
        options: [
          { label: '总是显示', value: 'always' },
          { label: '鼠标悬浮', value: 'hover' },
          { label: '不显示', value: 'never' }
        ]
      },
      backGroundColor: {
        title: '背景颜色',
        type: 'color',
        val: '#ffffff',
        showAlpha: true,
        colorFormat: 'rgb'
      },
      boxShadow: {
        title: '阴影颜色',
        type: 'color',
        val: '#ffffff'
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  },
  {
    id: 'now-time-vue',
    title: '当前时间',
    type: 'vue',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTI1NiA2NEMxNTAgNjQgNjQgMTUwIDY0IDI1NnM4NiAxOTIgMTkyIDE5MnMxOTItODYgMTkyLTE5MlMzNjIgNjQgMjU2IDY0WiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiIGQ9Ik0yNTYgMTI4djE0NGg5NiIvPjwvc3ZnPg==`,
    props: {
      fontColor: {
        title: '文字颜色',
        type: 'color',
        val: '#000000'
      },
      dateSize: {
        title: '日期文字大小',
        type: 'number',
        val: 12
      },
      weekSize: {
        title: '星期文字大小',
        type: 'number',
        val: 12
      },
      timeSize: {
        title: '时间文字大小',
        type: 'number',
        val: 24
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  },
  {
    id: 'kv-vue',
    title: '键值对',
    type: 'vue',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTMgNmEzIDMgMCAwIDEgMy0zaDhhMyAzIDAgMCAxIDMgM3Y4YTMgMyAwIDAgMS0zIDNINmEzIDMgMCAwIDEtMy0zem0zLTJhMiAyIDAgMCAwLTIgMnYzLjVoNS41VjR6bTMuNSA2LjVINFYxNGEyIDIgMCAwIDAgMiAyaDMuNXptMSAwVjE2SDE0YTIgMiAwIDAgMCAyLTJ2LTMuNXptNS41LTFWNmEyIDIgMCAwIDAtMi0yaC0zLjV2NS41eiIvPjwvc3ZnPg==`,
    props: {
      border: {
        title: '边框',
        type: 'switch',
        val: true
      },
      backgroundColor: {
        title: '背景色',
        type: 'color',
        val: 'rgba(255, 255, 255, 0)',
        showAlpha: true,
        colorFormat: 'rgb'
      },
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Microsoft YaHei, PingFang SC, sans-serif',
        options: [
          {
            value: 'Microsoft YaHei, PingFang SC, sans-serif',
            label: '微软雅黑'
          },
          {
            value: 'SimSun, Songti SC, serif',
            label: '宋体'
          },
          {
            value: 'SimHei, Heiti SC, sans-serif',
            label: '黑体'
          },
          {
            value: 'PingFang SC, Microsoft YaHei, sans-serif',
            label: '苹方'
          },
          {
            value: 'Noto Sans SC, Microsoft YaHei, sans-serif',
            label: '思源黑体'
          },
          {
            value: 'YouSheBiaoTiHei, Microsoft YaHei, sans-serif',
            label: '优设标题黑'
          },
          {
            value: 'KaiTi, Kaiti SC, serif',
            label: '楷体'
          },
          {
            value: 'FangSong, STFangsong, serif',
            label: '仿宋'
          },
          {
            value: 'Arial, Helvetica, sans-serif',
            label: 'Arial'
          },
          {
            value: 'DIN Alternate, Arial Narrow, Arial, sans-serif',
            label: 'DIN 数字'
          },
          {
            value: 'Consolas, Monaco, monospace',
            label: '等宽字体'
          }
        ]
      },
      fontSize: {
        title: '文字大小',
        type: 'number',
        val: 18
      },
      textAlign: {
        title: '文字对齐',
        type: 'select',
        val: 'left',
        options: [
          {
            value: 'left',
            label: '左对齐'
          },
          {
            value: 'center',
            label: '居中'
          },
          {
            value: 'right',
            label: '右对齐'
          }
        ]
      },
      label: {
        title: '键名',
        type: 'input',
        val: '键名'
      },
      labelWidth: {
        title: '键名宽度',
        type: 'number',
        val: 50
      },
      value: {
        title: '键值',
        type: 'input',
        val: '键值'
      },
      valueWidth: {
        title: '键值宽度',
        type: 'number',
        val: 50
      },
      color: {
        title: '文字颜色',
        type: 'color',
        val: '#FFF700'
      },
      borderColor: {
        title: '边框颜色',
        type: 'color',
        val: '#000000'
      },
      borderRadius: {
        title: '圆角',
        type: 'number',
        val: 0
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  },
  {
    id: 'sys-button-vue',
    title: '按钮',
    type: 'vue',
    thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yIDhhMyAzIDAgMCAxIDMtM2gxMGEzIDMgMCAwIDEgMyAzdjNhMyAzIDAgMCAxLTMgM0g1YTMgMyAwIDAgMS0zLTNWOFptNyAxLjVhLjUuNSAwIDAgMCAuNS41SDE0YS41LjUgMCAwIDAgMC0xSDkuNWEuNS41IDAgMCAwLS41LjVabS0xIDBhMS41IDEuNSAwIDEgMC0zIDBhMS41IDEuNSAwIDAgMCAzIDBaIi8+PC9zdmc+`,
    props: {
      text: {
        title: '按钮文本',
        type: 'input',
        val: '按钮文本'
      },
      type: {
        title: '按钮类型',
        type: 'select',
        val: '',
        options: [
          {
            value: '',
            label: '默认'
          },
          {
            value: 'primary',
            label: '主要'
          },
          {
            value: 'success',
            label: '成功'
          },
          {
            value: 'warning',
            label: '警告'
          },
          {
            value: 'danger',
            label: '危险'
          }
        ]
      },
      backgroundColor: {
        title: '背景色',
        type: 'color',
        val: ''
      },
      borderColor: {
        title: '边框颜色',
        type: 'color',
        val: ''
      },
      fontColor: {
        title: '文字颜色',
        type: 'color',
        val: ''
      },
      fontFamily: {
        title: '字体',
        type: 'select',
        val: '',
        options: [
          {
            value: '',
            label: '默认'
          },
          {
            value: 'Microsoft YaHei, PingFang SC, sans-serif',
            label: '微软雅黑'
          },
          {
            value: 'SimSun, Songti SC, serif',
            label: '宋体'
          },
          {
            value: 'SimHei, Heiti SC, sans-serif',
            label: '黑体'
          },
          {
            value: 'PingFang SC, Microsoft YaHei, sans-serif',
            label: '苹方'
          },
          {
            value: 'Noto Sans SC, Microsoft YaHei, sans-serif',
            label: '思源黑体'
          },
          {
            value: 'YouSheBiaoTiHei, Microsoft YaHei, sans-serif',
            label: '优设标题黑'
          },
          {
            value: 'KaiTi, Kaiti SC, serif',
            label: '楷体'
          },
          {
            value: 'FangSong, STFangsong, serif',
            label: '仿宋'
          },
          {
            value: 'Arial, Helvetica, sans-serif',
            label: 'Arial'
          },
          {
            value: 'DIN Alternate, Arial Narrow, Arial, sans-serif',
            label: 'DIN 数字'
          },
          {
            value: 'Consolas, Monaco, monospace',
            label: '等宽字体'
          }
        ]
      },
      fontSize: {
        title: '文字大小',
        type: 'number',
        val: 14
      },
      borderRadius: {
        title: '圆角',
        type: 'number',
        val: 4
      }
    },
    common_animations: {
      val: '',
      delay: 'delay-0s',
      speed: 'slow',
      repeat: 'infinite'
    }
  }
]
export const configStore: IConfig = reactive({
  sysComponent: sysComponentItems,
  lineRenderOffset: 10
})
