import React from 'react'

import { fenToYuan } from '@lx-react-materiel/shared'
import { LxText } from '../lxText'
import { View } from '@tarojs/components'

import './index.less'

interface ILxPriceProps {
  /**
   * 单位是分
   */
  price: number
  color?: string
  symbolSize?: number
  priceSize?: number
  decimalSize?: number
  bold?: boolean
}

/**
 * 价格展示组件，把加载分割成三部分，可以控制不同部分的颜色、字体大小
 *
 * 注意，price 单位是分
 *
 * 1、符号
 * 2、整数部分
 * 3、小数部分
 *
 * @param props 参数
 *
 * @example
 * // 默认用法
 * <LxPrice price={12345} />
 *
 * // 带上参数用法
 * <LxPrice
 *   bold
 *   color="#FF4500"
 *   decimalSize={14}
 *   price={12345}
 *   priceSize={50}
 *   symbolSize={14}
 * />
 */
export function LxPrice (props: ILxPriceProps) {
  const {
    price,
    color = '#FF4500',
    symbolSize = 14,
    priceSize = 30,
    decimalSize = 14,
    bold = true
  } = props

  const priceStr = fenToYuan(price)
  const [integerPart, decimalPart] = priceStr.split('.') // 分割整数和小数部分
  const fontWeight = bold ? 'bold' : 'normal'

  const commonProps = {
    color,
    fontWeight
  }

  return (
    <View className='lx-price'>
      <LxText fontSize={symbolSize} {...commonProps}>￥</LxText>
      <LxText fontSize={priceSize} {...commonProps}>{ integerPart }</LxText>
      <LxText fontSize={decimalSize} {...commonProps}>.{ decimalPart }</LxText>
    </View>
  )
}