<template>
  <div class="component">
    <div class="inner code-fun-flex-row code-fun-items-center">
      <!-- 左侧图标 -->
      <img class="left-icon" :src="leftIconSource" @click="handleLeftAction" />

      <!-- 标题区域 -->
      <div class="title-container" @click="handleTitlePress">
        <span class="text">{{ title }}</span>
        <!-- 文件夹展开图标 -->
        <img v-if="showFolderIcon" class="folder-icon" :src="folderExpanded ? '/assets/icons/drawable-xxhdpi/folder_title_arrow_pressed.png' : '/assets/icons/drawable-xxhdpi/folder_title_arrow_normal.png'" @click.stop="handleFolderToggle" />
      </div>

      <!-- 右侧操作按钮 -->
      <!-- 新建便签 -->
      <!-- 新建便签 -->
      <img v-if="actionIcon === 'create'" class="image_4" src="/assets/icons/drawable-xxhdpi/btn_create.png" @click="handleAction('create')" />

      <div v-else-if="actionIcon === 'save'" class="code-fun-flex-row code-fun-items-center right-group">
        <!-- 插入图片 -->
        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_pic.png" @click="handleAction('insertImage')" />
        <!-- 保存便签 -->
        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_save_notes.png" @click="handleAction('save')" />
      </div>
      <!-- 占位符 -->
      <div v-else class="image_4-placeholder"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  onBack: {
    type: Function,
    default: null,
  },
  onAction: {
    type: Function,
    default: null,
  },
  actionText: {
    type: String,
    default: '',
  },
  actionIcon: {
    type: String,
    default: '',
  },
  leftIcon: {
    type: String,
    default: '',
  },
  leftType: {
    type: String,
    default: 'back',
  },
  onLeftAction: {
    type: Function,
    default: null,
  },
  onFolderToggle: {
    type: Function,
    default: null,
  },
  isFolderExpanded: {
    type: Boolean,
    default: undefined,
  },
  onTitlePress: {
    type: Function,
    default: null,
  },
})

const localFolderExpanded = ref(false)

const folderExpanded = computed(() => {
  // 优先使用父组件传递的isFolderExpanded状态，否则使用本地状态
  return props.isFolderExpanded !== undefined ? props.isFolderExpanded : localFolderExpanded.value
})

const showFolderIcon = computed(() => {
  // 只有当leftType为settings且有onFolderToggle回调时才显示文件夹图标
  return props.leftType === 'settings' && props.onFolderToggle
})

const leftIconSource = computed(() => {
  // 根据leftType属性返回对应的图标路径
  return props.leftType === 'settings' ? '/assets/icons/drawable-xxhdpi/btn_settings.png' : '/assets/icons/drawable-xxhdpi/btn_back.png'
})

const handleFolderToggle = () => {
  // 切换文件夹展开状态
  if (props.isFolderExpanded === undefined) {
    // 如果父组件没有传递isFolderExpanded，则使用本地状态
    localFolderExpanded.value = !localFolderExpanded.value
  }

  // 调用父组件传递的回调函数
  if (props.onFolderToggle) {
    props.onFolderToggle()
  }
}

const handleLeftAction = () => {
  // 处理左侧图标点击事件
  if (props.onLeftAction) {
    props.onLeftAction()
  } else if (props.leftType !== 'settings' && props.onBack) {
    // 兼容旧版本的onBack属性
    props.onBack()
  }
}

const handleAction = (actionType) => {
  // 处理右侧操作按钮点击事件
  if (props.onAction) {
    props.onAction(actionType)
  }
}

const handleTitlePress = () => {
  // 处理标题点击事件
  if (props.onTitlePress) {
    props.onTitlePress()
  }
}
</script>

<style scoped lang="less">
.component {
  padding: 4.5rem 0.72rem 0.5rem;
  background-image: url(/assets/icons/drawable-xxhdpi/title_bar_background.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -2.8rem;
  position: relative;
  .inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    transform: translateY(-3.2rem);
  }
  .left-icon,
  .image_4 {
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
  }
  .right-group {
    gap: .6rem;
  }

  .image_4-placeholder {
    width: 1.8rem;
    height: 1.8rem;
  }

  .title-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
    justify-content: center;

    .folder-icon {
      width: 0.8rem;
      height: 0.8rem;
      margin-left: 0.2rem;
      cursor: pointer;
    }

    .text {
      color: #e3dbd4;
      font-size: 1.01rem;
      line-height: 1.01rem;
    }
  }
}
</style>
