<template>
  <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
    <a-collapse-panel key="1" header="饼图配置">
      <a-form-item label="类型">
        <a-select v-model:value="optionData.type" placeholder="请选择">
          <a-select-option :value="item.value" v-for="item in fontWeightOptions">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
  optionData: {
    type: Object,
    required: true
  }
});

const activeKey = ref('1');

const fontWeightOptions = [
  {
    label: '常规图',
    value: 'nomal'
  },
  {
    label: '环形图',
    value: 'ring'
  },
  {
    label: '玫瑰图',
    value: 'rose'
  }
];
</script>

<style scoped lang="less">
:deep(.ant-collapse-header) {
  padding: 0 !important;
}
</style>
