import type { ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'

// 进度条端点的形状，可选值为 "butt" | "round" | "square"
export type StrokeLinecapType = 'butt' | 'round' | 'square'

export const circleProps = {
  ...baseProps,
  /**
   * 当前进度
   */
  modelValue: makeNumberProp(0),
  /**
   * 圆环直径，默认单位为 px
   */
  size: makeNumberProp(100),
  /**
   * 进度条颜色，传入对象格式可以定义渐变色
   */
  color: {
    type: [String, Object] as PropType<string | Record<string, string>>,
    default: '#4d80f0'
  },
  /**
   * 轨道颜色
   */
  layerColor: makeStringProp('#EBEEF5'),
  /**
   * 填充颜色
   */
  fill: String,
  /**
   * 动画速度（单位为 rate/s）
   */
  speed: makeNumberProp(50),
  /**
   * 文字
   */
  text: String,
  /**
   * 进度条宽度 单位px
   */
  strokeWidth: makeNumberProp(10),
  /**
   * 进度条端点的形状，可选值为 "butt" | "round" | "square"
   */
  strokeLinecap: makeStringProp<StrokeLinecapType>('round'),
  /**
   * 是否顺时针增加
   */
  clockwise: makeBooleanProp(true)
}

export type CircleProps = ExtractPropTypes<typeof circleProps>