import { h, Component } from 'preact';

import * as styles from './css/index.less';

interface ActGoodsDetailDescProps {
  // 是否物品兑换
  isCommercial?: boolean; // 是否是商商户赛
  propsData?: {
    title?: string;
    desc?: string;
    descColor?: string;
    monifyText?: string;
    descList?: Array<{
      desc?: string;
      descColor?: string;
      monifyText?: string;
      onClickMonifyText?: () => void;
    }>;
  };
  onClickItem?: () => void;
  onClickMonifyText?: () => void;
  key?: string | number;
}
export default class ActGoodsDetailDesc extends Component<ActGoodsDetailDescProps, {}> {
  render() {
    const { propsData, onClickItem, onClickMonifyText, isCommercial } = this.props;
    const descList = propsData?.descList || [];
    return (
      <div
        className={`${styles['base-item']} ${isCommercial ? styles.commercial : ''}`}
        onClick={onClickItem}
      >
        <text className={styles['base-label']}>
          {propsData?.title}：
        </text>
        <text
          className={styles['base-desc']}
          style={propsData?.descColor ? { color: propsData?.descColor } : {}}
        >
          {propsData?.desc} {propsData?.monifyText && (
          <text
            className={styles['base-desc-link']}
            onClick={onClickMonifyText}
          >{propsData.monifyText}
          </text>
          )}
        </text>
        {descList.length > 0 && (
          <div className={styles['base-desc-list']}>
            {descList?.map((item, index) => (
              <div
                className={styles['base-desc-item']}
                key={index}
              >
                <text
                  className={styles['base-desc']}
                  style={item.descColor ? { color: item.descColor } : {}}
                >{item.desc} {item.monifyText && (
                <text
                  className={styles['base-desc-link']}
                  onClick={item.onClickMonifyText}
                >{item.monifyText}
                </text>
                )}
                </text>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}