<script setup>
import { chartTypes, colorItems, dataSourceOptions } from '@vue2-client/components/g2Charts/constants'
import { ImgCheckboxGroup } from '@vue2-client/components/checkbox'
import XTagGroup from '@vue2-client/base-client/components/common/XTagGroup/index.vue'
import { inject } from 'vue'

const config = inject('config')
const configTypeChange = inject('configTypeChange')
const filteredChartsTools = inject('filteredChartsTools')

</script>

<template>
  <div>
    <a-form-model-item label="图表名称">
      <a-input v-model="config.title" placeholder="图表名称"></a-input>
    </a-form-model-item>
    <a-form-model-item label="图表描述">
      <a-input v-model="config.description" placeholder="图表描述"></a-input>
    </a-form-model-item>
    <a-form-model-item label="图表类型">
      <img-checkbox-group
        :default-values="[config.type || undefined]"
        @change="configTypeChange"
        :options="chartTypes"/>
    </a-form-model-item>
    <a-form-model-item label="数据源">
      <a-select v-model="config.dataSource" :options="dataSourceOptions" placeholder="选择数据源"/>
    </a-form-model-item>
    <a-form-model-item label="图表选项">
      <a-checkbox-group
        :defaultChecked="true"
        name="chartsTools"
        style="width: 100%"
        v-model="config.chartsTools">
        <a-row>
          <a-col :span="8" v-for="(item,index) in filteredChartsTools" :key="index">
            <a-checkbox :value="item.value">
              {{ item.label }}
            </a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item label="主题色">
      <a-select
        v-model="config.colorIndex"
        style="width: 100%"
        placeholder="选择主题色"
      >
        <a-select-option :value="index" :key="index" v-for="(colorItem,index) in colorItems">
          <x-tag-group :options="colorItem"/>
        </a-select-option>
      </a-select>
    </a-form-model-item>
  </div>
</template>

<style scoped lang="less">

</style>
