/*
 * @Author: Nian Yi
 * @Date: 2022-04-19 09:58:52
 * @LastEditTime: 2022-04-27 18:31:02
 * @LastEditors: Nian Yi
 * @Description:
 * @FilePath: /easyvadmin/src/scripts/containers/screen-template/components/TemplateItem.tsx
 * 奥利给
 */
import React, { FC, memo } from 'react';
import { Space } from '@easyv/antd';
import styles from './TemplateList.less';
import { MeasureType } from 'models/template.types';
import { ComponentIcon } from 'components/IconButton';
import defaultScreenItemBgSrc from '../../../../images/default_screen_bg.png';
import EasyvButton from 'components/EasyvButton';
import { useProductionInfo } from 'components/easyUse';
import once from 'lodash/once';
import { getAssetsUrl } from 'utils/utils';

interface IProps {
  thumb: string;
  name: string;
  info: string;
  type?: MeasureType;
  category: string;
  purchased: boolean;
  onCreate: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  onPreview?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
}

const TemplateItem: FC<IProps> = ({
  thumb,
  name,
  info,
  type = 0,
  category = '通用',
  purchased,
  onCreate,
  onPreview,
}) => {
  const productionInfo = useProductionInfo();
  const { isRenew = false } = productionInfo;
  return (
    <div className={styles.itemWrapper}>
      <div className={styles.back} />
      <div className={styles.imgWrapper}>
        <div className={styles.imgContainer}>
          <div className={styles.img}>
            <img
              src={thumb ? getAssetsUrl(`${thumb}?x-oss-process=image/resize,w_300`) : undefined}
              onError={(e: any) => {
                e.target.onerror = null;
                e.target.src = defaultScreenItemBgSrc;
              }}
              style={{ objectFit: 'cover' }}
            />
            <ComponentIcon isFullName={true} isRenew={isRenew} measureType={type} />
          </div>
          <div className={styles.imgOperate}>
            <Space style={{ marginTop: '20px' }}>
              {onPreview && (
                <EasyvButton type="primary" onClick={onPreview} ghost>
                  预览模板
                </EasyvButton>
              )}
              <EasyvButton theme="primary" onClick={once(onCreate)}>
                创建项目
              </EasyvButton>
            </Space>
          </div>
        </div>
      </div>
      <div className={styles.footerInfo}>
        <div className={styles.box_top}>
          <div className={styles.box__title} title={name}>
            {name}
          </div>
          {purchased && <div className={styles.box_purchased}>已购</div>}
        </div>
        <div className={styles.box__desc}>
          <span>{category}</span>
          <span>{info}</span>
        </div>
      </div>
    </div>
  );
};

export default memo(TemplateItem);
