import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import classNames from 'classnames';

interface PriceProps {
  /** 积分 */
  buyPoint?: number;
  /** 价格 */
  price?: number;
  /** 划线价 */
  linePrice?: number;
  /** 整数部分样式 */
  priceSize?: 'long' | 'large' | 'middle' | 'small' | 'mini' | 'default';
  /**小数部分样式 */
  decimalSize?: 'long' | 'large' | 'middle' | 'small' | 'mini' | 'default';
  /** 加号样式 */
  plusSize?: 'large' | 'default';
  /** 展示付费会员标签 */
  payMemberLabel?: string;
}

/**
 * 价格组件
 */
const Price: React.FC<PriceProps> = ({
  buyPoint = 0,
  price = 0,
  linePrice = 0,
  priceSize = 'small',
  decimalSize = 'default',
  plusSize = 'default',
  payMemberLabel = '',
}) => {
  // 积分部分
  const renderPointsItem = () => {
    const buyPointClassnames = classNames(
      'text',
      `wm-price-points-${priceSize}`,
    );
    const buyPointTextClassnames = classNames('text', 'wm-price-points-text');
    return (
      <Text className='wm-price-points'>
        <Text className={buyPointClassnames}>{buyPoint}</Text>
        <Text className={buyPointTextClassnames}>积分</Text>
      </Text>
    );
  };

  //积分与价格相加
  const renderPlusItem = () => {
    const plusClassnames = classNames('text', `wm-price-plus-${plusSize}`);
    return (
      <Text className='wm-price-plus'>
        <Text className={plusClassnames}>+</Text>
      </Text>
    );
  };

  //价格部分
  const renderPriceItem = () => {
    const priceString = Number(price).toFixed(2);
    const arr = priceString.split('.');
    const priceClassnames = classNames('text', `wm-price-style-${priceSize}`);
    const decimalClassnames = classNames(
      'text',
      `wm-price-style-${decimalSize}`,
    );
    return (
      <Text className='wm-price-style'>
        <Text className='text wm-price-style-unit'>￥</Text>
        <Text className={priceClassnames}>{arr[0]}</Text>
        <Text className={decimalClassnames}>.{arr[1]}</Text>
      </Text>
    );
  };

  //默认宽度为240像素，列表使用134
  const classObject = classNames(
    'wm-price',
    plusSize === 'default' && 'wm-price-default',
    linePrice && 'wm-price-block',
  );
  return (
    <View className={classObject}>
      {buyPoint > 0 && renderPointsItem()}
      {buyPoint > 0 && price > 0 && renderPlusItem()}
      {!(buyPoint > 0 && price === 0) && renderPriceItem()}
      {
        payMemberLabel !== '' && <Image src={payMemberLabel} className='wm-price-pay-member' />
      }
      {linePrice > 0 && (
        <View className='wm-price-line'>
          <Text className='text'>￥{linePrice.toFixed(2)}</Text>
        </View>
      )}
    </View>
  );
};

export default Price;