<template>
  <CollapseItem name="样式" :expanded="true">
    <SettingItemBox
      :name="`颜色-${index + 1}`"
      v-for="(item, index) in optionData.colors"
      :key="index"
    >
      <SettingItem name="颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.colors[index]"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.colors[index] = option.colors[index]"
        >
          恢复默认
        </n-button>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem name="样式" :expanded="true">
    <SettingItemBox name="样式">
      <SettingItem name="文字颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.desColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="文字大小">
        <n-input-number
          size="small"
          v-model:value="optionData.desSize"
          :min="12"
        />
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem name="样式" :expanded="true">
      <SettingItemBox name="样式">
        <SettingItem name="文字颜色">
          <n-color-picker
            size="small"
            :modes="['hex']"
            v-model:value="optionData.titleColor"
          ></n-color-picker>
        </SettingItem>
        <SettingItem name="文字大小">
          <n-input-number
            size="small"
            v-model:value="optionData.titleSize"
            :min="12"
          />
        </SettingItem>
      </SettingItemBox>
  </CollapseItem>


  <CollapseItem name="展示信息" :expanded="true">

    <SettingItem name="主键字段">
      <a-input size="small"  v-model:value="optionData.primaryKey"  placeholder="主键字段" />
    </SettingItem>
      

        <a-table size="small" :dataSource="optionData.showColumns" :columns="columns" 
          :pagination="false"
        >
          
          <template #bodyCell="{ column,record}">

            <template v-if="column.key === 'type'">
              <a-select v-model:value="record.type" size="small">
                <a-select-option value="text">文本</a-select-option>
                <a-select-option value="image">图片</a-select-option>
                <a-select-option value="video">视频</a-select-option>
              </a-select>
            </template>
    
            <template v-if="column.key === 'en_name'">
              <a-input size="small" v-model:value="record.en_name"  placeholder="英文字段" />
            </template>
    
            <template v-if="column.key === 'zh_name'">
              <a-input size="small"  v-model:value="record.zh_name"  placeholder="中文名称" />
            </template>
    
          </template>
    
    
          <template #footer>
            <a-button type="default"  size="small" @click="addShowColumns">
              <template #icon>
                <PlusOutlined />
              </template>
              添加显示字段
            </a-button>
          </template>
          
        </a-table>

  </CollapseItem>

</template>

<script setup lang="ts">
import { PropType,ref } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue';

import {
  CollapseItem,
  SettingItemBox,
  SettingItem
} from '@/components/Pages/ChartItemSetting'
import { option } from './config'

const props = defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})




const columns = ref(
  [
    {
      title: '字段类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '英文字段',
      dataIndex: 'en_name',
      key: 'en_name',
    },
    {
      title: '中文名称',
      dataIndex: 'zh_name',
      key: 'zh_name',
    }
  ]
)

const addShowColumns = ()=>{
    props.optionData.showColumns.push({
      type:"text",
      en_name: '',
      zh_name: '',
    })
}
</script>
