<template>
  <Popup
    v-bind="props"
    :closeable="showCancel"
    :closeIcon="false"
    :position="center ? 'center' : 'bottom'"
    :size="center ? themeContext.resolveThemeSize(centerWidth) : 'auto'"
    round
    @close="onCancelClick"
  >
    <scroll-view 
      :scroll-y="true"
      :style="{
        ...themeStyles.topScroll.value,
        width: center ? themeContext.resolveThemeSize(centerWidth) : undefined,
      }"
    >
      <slot name="content" :close="onCancelClick">
        <FlexCol>
          <ActionSheetTitle :title="title" :description="description" />
          <FlexCol position="relative">
            <ActionSheetItem
              v-for="(item, index) in props.actions"
              :key="item.name"
              :name="item.name"
              :bold="item.bold || themeContext.getVar('ActionSheetItemBold', false)"
              :color="themeContext.resolveThemeColor(item.color || props.textColor || themeContext.resolveThemeColor('ActionSheetItemColor', 'text.content'))"
              :subname="item.subname"
              :disabled="item.disabled"
              @click="onItemClick(item, index)"
            />
          </FlexCol>
          <FlexCol v-if="showCancel" position="relative" :innerStyle="themeStyles.viewCancel.value">
            <ActionSheetItem
              :name="props.cancelText || '取消'"
              :bold="themeContext.getVar('ActionSheetCancelBold', false)"
              :color="themeContext.resolveThemeColor(props.textColor || themeContext.resolveThemeColor('ActionSheetCancelColor', 'text.content'))"
              :subname="''"
              :disabled="false"
              @click="onCancelClick"
            />
          </FlexCol>
        </FlexCol>
      </slot>
    </scroll-view>
  </Popup>
</template>

<script setup lang="ts">
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, screenHeight } from '../theme/ThemeTools';
import ActionSheetItem from './ActionSheetItem.vue';
import ActionSheetTitle from './ActionSheetTitle.vue';
import FlexCol from '../layout/FlexCol.vue';
import Popup from './Popup.vue';
import type { PopupProps } from './Popup.vue';

export interface ActionSheetProps extends Omit<PopupProps, 'onClose'|'position'|'closeable'|'position'|'size'> {
  /**
   * 是否显示动作面板
   * @default false
   */
  show: boolean;
  /**
   * 是否显示取消按扭
   * @default false
   */
  showCancel?: boolean;
  /**
   * 取消条目的文字
   */
  cancelText?: string;
  /**
   * 顶部标题
   */
  title?: string;
  /**
   * 选项上方的描述信息
   */
  description?: string;
  /**
   * 面板选项列表
   */
  actions?: ActionSheetItem[];
  /**
   * 是否在点击条目后自动关闭
   * @default false
   */
  autoClose?: boolean;
  /**
   * 是否在屏幕居中显示
   * @default false
   */
  center?: boolean;
  /**
   * 居中显示时的宽度
   */
  centerWidth?: string|number;
  /**
   * 条目文字颜色
   */
  textColor?: string;
}
export interface ActionSheetItem {
  /**
   * 标题
   */
  name: string;
  /**
   * 二级标题
   */
  subname?: string;
  /**
   * 选项文字颜色
   */
  color?: string;
  /**
   * 是否加粗当前选项
   */
  bold?: boolean;
  /**
   * 是否禁用当前选项
   */
  disabled?: boolean;
}

const emit = defineEmits([ 'close', 'select' ]);
const props = withDefaults(defineProps<ActionSheetProps>(), {
  mask: true,
  safeArea: true,
  centerWidth: () => propGetThemeVar('ActionSheetCenterWidth', '600rpx'),
});
const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  viewCancel: {
    backgroundColor: DynamicColor('ActionSheetCancelBackgroundColor', 'light'),
    paddingTop: DynamicSize('ActionSheetCancelPaddingTop', 20),
  },
  topScroll: {
    maxHeight: DynamicSize('ActionSheetMaxScrollHeight', (screenHeight - 200) + 'px'),
  },
});

function onItemClick(item: ActionSheetItem, index: number) {
  emit('select', index, item.name);
  if (props.autoClose === true)
    onCancelClick();
}
function onCancelClick() {
  emit('close');
}

</script>