import { ref, defineComponent, PropType, watch } from 'vue';

// 定义颜色类型
type Color = string;

// 定义渐变停止点类型
interface GradientStop {
  color: Color;
  offset: number;
}

// 定义线性渐变画刷类型
interface LinearGradientBrush {
  startPoint: { x: number; y: number };
  endPoint: { x: number; y: number };
  gradientStops: GradientStop[];
}

// 定义画刷类型
type Brush = LinearGradientBrush;

// 定义路由事件处理程序类型
type RoutedEventHandler = () => void;

export default defineComponent({
  name: 'NewTradeMenu',
  props: {
    topNormalBackground: {
      type: Object as PropType<Brush>,
      default: () => ({
        startPoint: { x: 0, y: 0 },
        endPoint: { x: 1, y: 1 },
        gradientStops: [
          { color: '#FFEBEBEB', offset: 0 },
          { color: '#FF97C2D8', offset: 1 }
        ]
      })
    },
    topSelectedBackground: {
      type: Object as PropType<Brush>,
      default: () => ({
        startPoint: { x: 1, y: 0.5 },
        endPoint: { x: 0, y: 0.5 },
        gradientStops: [
          { color: '#FF8FC0B8', offset: 1 },
          { color: '#FF3B7269', offset: 0 }
        ]
      })
    },
    topMoveOverBackground: {
      type: Object as PropType<Brush>,
      default: () => ({
        startPoint: { x: 0, y: 0 },
        endPoint: { x: 1, y: 1 },
        gradientStops: [
          { color: '#FF40E7DC', offset: 1 },
          { color: '#FFEBEBEB', offset: 0 }
        ]
      })
    },
    topOpenBackground: {
      type: Object as PropType<Brush>,
      default: () => ({
        startPoint: { x: 0, y: 0 },
        endPoint: { x: 1, y: 1 },
        gradientStops: [
          { color: '#FF40E7DC', offset: 1 },
          { color: '#FFEBEBEB', offset: 0 }
        ]
      })
    },
    popueMoveOverBackground: {
      type: Object as PropType<Brush>,
      default: () => ({
        startPoint: { x: 0, y: 0 },
        endPoint: { x: 1, y: 1 },
        gradientStops: [
          { color: '#FF40E7DC', offset: 1 },
          { color: '#FFEBEBEB', offset: 0 }
        ]
      })
    },
    popueNormalBackground: {
      type: Object as PropType<Brush>,
      default: () => ({
        startPoint: { x: 0, y: 0 },
        endPoint: { x: 1, y: 1 },
        gradientStops: [
          { color: '#FF40E7DC', offset: 1 },
          { color: '#FFEBEBEB', offset: 0 }
        ]
      })
    }
  },
  emits: ['itemClick'],
  setup(props, { emit }) {
    // 模拟路由事件
    const itemClickHandlers: RoutedEventHandler[] = [];

    const addItemClickHandler = (handler: RoutedEventHandler) => {
      itemClickHandlers.push(handler);
    };

    const removeItemClickHandler = (handler: RoutedEventHandler) => {
      const index = itemClickHandlers.indexOf(handler);
      if (index !== -1) {
        itemClickHandlers.splice(index, 1);
      }
    };

    const onItemClick = () => {
      itemClickHandlers.forEach(handler => handler());
      emit('itemClick');
    };

    return {
      onItemClick,
      addItemClickHandler,
      removeItemClickHandler
    };
  }
});