import React, { memo } from 'react';
import { bindTypeMap } from '../';
const TemplateA = memo((props: any) => {
  console.log(props, 'propsA');
  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        bottom: 0,
        width: '100%',
      }}
    >
      <a
        style={{
          position: 'absolute',
          top: 0,
          bottom: 0,
          width: '100%',
        }}
        data-wxdizhi={`/taro/packageMarketing/coupons/couponsCenter/index?id=${props.couponUrl?.id}`}
      >
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-around',
            position: 'absolute',
            top: 0,
            bottom: 0,
            width: '100%',
            backgroundImage: `url(${props.imgUrl[0]?.url})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%',
          }}
        >
          <div
            style={{
              width: '30%',
              display: 'flex',
              justifyContent: 'center',
              flexDirection: 'column',
              paddingLeft: '20px',
            }}
          >
            {props.couponUrl?.detail?.discountType === 1 && (
              <div>
                <span style={{ fontSize: '1em', fontWeight: 800, color: '#fffec8' }}>
                  {props.couponUrl?.detail?.faceValue}
                </span>
                <span style={{ fontSize: '0.3em', color: '#fffec8' }}>折</span>
              </div>
            )}
            {props.couponUrl?.detail?.discountType !== 1 && (
              <div>
                <span style={{ fontSize: '0.3em', color: '#fffec8' }}>¥</span>
                <span style={{ fontSize: '1em', fontWeight: 800, color: '#fffec8' }}>
                  {props.couponUrl?.detail?.faceValue}
                </span>
              </div>
            )}
          </div>
          <div
            style={{
              width: '40%',
              display: 'flex',
              justifyContent: 'center',
              flexDirection: 'column',
              paddingLeft: '0.2em',
            }}
          >
            <div style={{ fontSize: '0.4em', color: '#fffdc8' }}>
              {props.couponUrl?.detail?.discountMsg}
            </div>
            <div style={{ fontSize: '0.3em', color: '#fffdc8' }}>
              {bindTypeMap[props.couponUrl?.detail?.bindType]}
            </div>
          </div>
          <div
            style={{
              width: '30%',
              display: 'flex',
              justifyContent: 'center',
              flexDirection: 'column',
            }}
          >
            <div
              style={{
                background: '#c73a11',
                color: '#fff',
                margin: '0.4em auto',
                textAlign: 'center',
                fontSize: '0.4em',
                padding: '0.2em 0.6em',
              }}
            >
              立即
              <br />
              领取
            </div>
          </div>
        </div>
      </a>
    </div>
  );
});

export default TemplateA;