<template>
  <nut-action-sheet
    v-model:visible="actionSheetVisible"
    :title="sheetTitle"
    cancel-txt="取消"
    :menu-items="actionSheetMenuItems"
    :close-on-click-overlay="true"
    @choose="handleChooseFile"
    @cancel="closeActionSheet"
    @close="closeActionSheet"
  />
</template>

<script setup>
/**
 * 计划书文件选择动作面板
 *
 * @description 多文件计划书统一使用 NutUI ActionSheet 展示，
 *              以支持长文件名换行和后续样式扩展。
 */
import { computed } from 'vue'
import { usePlanView } from '@/composables/usePlanView'

const { actionSheetVisible, actionSheetMenuItems, handleChooseFile, closeActionSheet } = usePlanView()

const sheetTitle = computed(() => {
  const count = actionSheetMenuItems.value.length
  return count > 0 ? `选择计划书文件 (${count}个)` : '选择计划书文件'
})
</script>

<style lang="less" scoped>
:deep(.nut-action-sheet__item) {
  padding: 24rpx 32rpx;
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

:deep(.nut-action-sheet__item > view:first-child) {
  font-weight: 500;
  color: #1f2937;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}

:deep(.nut-action-sheet__subdesc) {
  margin-top: 8rpx;
  line-height: 1.5;
  color: #6b7280;
  word-break: break-word;
}
</style>