<template>
  <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
    <a-collapse-panel key="1" header="信息">
      <a-form-item label="文字">
        <a-textarea v-model:value="optionData.dataset" :rows="4" placeholder="请输入文字" allowClear></a-textarea>
      </a-form-item>
      <a-form-item label="链接">
        <a-select v-model:value="optionData.linkHead" placeholder="请选择" allowClear style="width: 40%">
          <a-select-option value="http://">http://</a-select-option>
          <a-select-option value="https://">https://</a-select-option>
        </a-select>
        <a-input v-model:value="optionData.link" style="width: 60%"></a-input>
      </a-form-item>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="样式">
      <a-form-item label="文字">
        <a-row :gutter="12">
          <a-col :span="12">
            <color-picker :show-alpha="true" v-model:value="optionData.fontColor" style="width: 100%" />
            <div>颜色</div>
          </a-col>
          <a-col :span="12">
            <a-input-number v-model:value="optionData.fontSize" style="width: 100%"></a-input-number>
            <div>字体大小</div>
          </a-col>
          <a-col :span="12">
            <a-select v-model:value="optionData.fontWeight" placeholder="请选择" allowClear style="width: 100%">
              <a-select-option value="normal">正常</a-select-option>
              <a-select-option value="bold">加粗</a-select-option>
            </a-select>
            <div>字体粗细</div>
          </a-col>
          <a-col :span="12">
            <a-input-number v-model:value="optionData.paddingX" style="width: 100%"></a-input-number>
            <div>X轴内边距</div>
          </a-col>
          <a-col :span="12">
            <a-input-number v-model:value="optionData.paddingY" style="width: 100%"></a-input-number>
            <div>Y轴内边距</div>
          </a-col>
          <a-col :span="12">
            <a-select v-model:value="optionData.textAlign" placeholder="请选择" allowClear style="width: 100%">
              <a-select-option value="start">左对齐</a-select-option>
              <a-select-option value="center">居中</a-select-option>
              <a-select-option value="end">右对齐</a-select-option>
            </a-select>
            <div>水平对齐</div>
          </a-col>
          <a-col :span="12">
            <a-select v-model:value="optionData.writingMode" placeholder="请选择" allowClear style="width: 100%">
              <a-select-option value="horizontal-tb">水平</a-select-option>
              <a-select-option value="vertical-rl">垂直</a-select-option>
            </a-select>
            <div>文本方向</div>
          </a-col>
          <a-col :span="12">
            <a-input-number v-model:value="optionData.letterSpacing" style="width: 100%"></a-input-number>
            <div>字间距</div>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="边框">
        <a-row :gutter="12">
          <a-col :span="12">
            <a-input-number v-model:value="optionData.borderWidth" :min="0" style="width: 100%"></a-input-number>
            <div>宽度</div>
          </a-col>
          <a-col :span="12">
            <color-picker :show-alpha="true" v-model:value="optionData.borderColor" style="width: 100%" />
            <div>颜色</div>
          </a-col>
          <a-col :span="12">
            <a-input-number v-model:value="optionData.borderRadius" :min="0" style="width: 100%"></a-input-number>
            <div>圆角</div>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="背景">
        <color-picker :show-alpha="true" v-model:value="optionData.backgroundColor" style="width: 100%" />
        <div>背景颜色</div>
      </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', '2']);
</script>

<style scoped lang="less">
:deep(.ant-collapse-header) {
  padding: 0 !important;
}
:deep(.guns-guns-color-picker-trigger) {
  width: 100% !important;
}
</style>
