<template>
  <div class="text-style-control">
    <el-dropdown>
      <span class="el-dropdown-link">
        <lz-svg-icon icon-class="font" class="pointer" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="font in fonts"
            :key="font"
            @click="setFontFamily(font)"
          >
            <span v-if="currentFontFamily === font">✓</span> {{ font }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown>
      <span class="el-dropdown-link">
        <lz-svg-icon icon-class="text-size" class="pointer" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="size in fontSizes"
            :key="size"
            @click="setFontSize(size)"
          >
            <span v-if="currentFontSize === size">✓</span> {{ size }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown>
      <span class="el-dropdown-link">
        <lz-svg-icon icon-class="text-style" class="pointer" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="toggleBold">
            <span v-if="isBold">✓</span> 加粗
          </el-dropdown-item>
          <el-dropdown-item @click="toggleItalic">
            <span v-if="isItalic">✓</span> 斜体
          </el-dropdown-item>
          <el-dropdown-item @click="toggleUnderline">
            <span v-if="isUnderline">✓</span> 下划线
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const fonts = ref([
  '微软雅黑',
  '宋体',
  '黑体',
  '楷体',
  'Arial',
  'Times New Roman'
])

const fontSizes = ref([
  '12px',
  '14px',
  '16px',
  '18px',
  '20px',
  '24px',
  '28px',
  '32px'
])

const currentFontFamily = ref('微软雅黑')
const currentFontSize = ref('16px')
const isBold = ref(false)
const isItalic = ref(false)
const isUnderline = ref(false)

const setFontFamily = (font: string) => {
  currentFontFamily.value = font
  // 这里需要实现应用到选中文本的逻辑
}

const setFontSize = (size: string) => {
  currentFontSize.value = size
  // 这里需要实现应用到选中文本的逻辑
}

const toggleBold = () => {
  isBold.value = !isBold.value
  // 这里需要实现应用到选中文本的逻辑
}

const toggleItalic = () => {
  isItalic.value = !isItalic.value
  // 这里需要实现应用到选中文本的逻辑
}

const toggleUnderline = () => {
  isUnderline.value = !isUnderline.value
  // 这里需要实现应用到选中文本的逻辑
}
</script>

<style scoped>
.text-style-control {
  display: flex;
  gap: 8px;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
