import * as React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Grid } from '@alife/cn-ui';
import { OPCard, OPTag } from '../../src/index';
import './card.story.scss';

const { Row, Col } = Grid;

export default {
  title: '组件/数据展示/OPCard',
  component: OPCard,
} as ComponentMeta<typeof OPCard>;

const Card: ComponentStory<typeof OPCard> = (args): JSX.Element => (
  <div style={{ padding: '25px', backgroundColor: '#EEF4FA' }}>
    <h1>卡片大小</h1>
    <Row gutter={16}>
      <Col span='8'>
        <p>文本卡片</p>
        <OPCard title='理论重量' content='12.6kg' />
        <OPCard title='理论重量' content='12.6kg' />
      </Col>
      <Col span='8'>
        <p>图片卡片</p>
        <OPCard
          content='原包装整箱+缠绕膜'
          imgList={[
            {
              url: 'https://img.alicdn.com/tfs/TB1d6yPoXzqK1RjSZSgXXcpAVXa-1668-800.png',
            },
          ]}
          backgroundColor='protection'
        />
      </Col>
      <Col span='8'></Col>
    </Row>
    <h1>颜色分类</h1>
    <Row gutter={16}>
      <Col span='8'>
        <p>包材信息</p>
        <OPCard
          title='推荐包材'
          content={['BOX6977413', '商家兜底包材纸箱']}
          backgroundColor='pm'
        />
      </Col>
      <Col span='8'>
        <p>商品防护信息</p>
        <OPCard
          content='原包装整箱+缠绕膜'
          imgList={[
            {
              url: 'https://img.alicdn.com/tfs/TB1d6yPoXzqK1RjSZSgXXcpAVXa-1668-800.png',
            },
          ]}
          backgroundColor='protection'
        />
      </Col>
      <Col span='8'>
        <p>重点信息</p>
        <OPCard content='易鼠咬商品' backgroundColor='primary' />
      </Col>
    </Row>
    <h1>类型</h1>
    <Row gutter={16}>
      <Col span='8'>
        <p>单一文本</p>
        <OPCard content='易鼠咬商品' />
      </Col>
      <Col span='8'>
        <p>带标题文本</p>
        <OPCard title='理论重量' content='12.6kg' />
      </Col>
      <Col span='8'>
        <p>指定文字大小-24px</p>
        <OPCard
          className='custom-content-size'
          title='防护方案'
          content={['大葫芦泡4节 (DHLP004)*1', '缠绕膜(KCM001)*1']}
          backgroundColor='protection'
        />
      </Col>
    </Row>
    <h1>状态</h1>
    <Row gutter={16}>
      <Col span='8'>
        <p>选中</p>
        <OPCard
          title='未付尾款容器'
          content='A06'
          backgroundColor='pm'
          status='active'
        />
      </Col>
      <Col span='8'>
        <p>禁用</p>
        <OPCard
          title='已付尾款容器'
          content='A05'
          backgroundColor='protection'
          status='disabled'
        />
      </Col>
      <Col span='8'>
        <p>标题Tag</p>
        <OPCard
          title='已付尾款容器'
          content='A04'
          status='disabled'
          tag={{
            children: '已完结',
            type: 'disabled',
          }}
        />
      </Col>
    </Row>
    <h1>简单文本卡片高度</h1>
    <Row gutter={16}>
      <Col span='8'>
        <p>单行</p>
        <OPCard content='易鼠咬商品' />
      </Col>
      <Col span='8'>
        <p>多行</p>
        <OPCard content='我要用菜鸟来发货，重要客户请注意' />
      </Col>
      <Col span='8'>
        <p>卡片最大高：maxHeight</p>
        <OPCard
          content='我要用菜鸟来发货，重要客户请注意，内有易碎品注意防护，我要用菜鸟来发货，重要客户请注意'
          backgroundColor='pink'
          maxHeight='300px'
        />
      </Col>
    </Row>
    <h1>组合文本</h1>
    <Row gutter={16}>
      <Col span='8'>
        <p>上下布局</p>
        <OPCard.List
          dataSource={[
            { label: '商家卡片信息', value: '美宝莲旗舰店' },
            { label: '货主', value: '欧莱雅集团' },
            {
              label: '',
              value: (
                <>
                  <OPTag>正常</OPTag>
                  <OPTag type='error'>不正常</OPTag>
                </>
              ),
            },
          ]}
          maxHeight={true}
        />
      </Col>
      <Col span='8'>
        <p>左右布局，label宽度可自定义</p>
        <OPCard.List
          title='信息列表'
          labelAlign='left'
          dataSource={[
            { label: '店铺名称放', value: '虾选官方自营店' },
            { label: '订单备注', value: 'Stellar_销售订单' },
            { label: '卖家备注', value: '--' },
            {
              label: '买家备注',
              value: '买家备注了很多很多很多很多很多信息',
            },
            { label: '货主', value: '淘宝心选' },
            { label: '快递', value: '韵达快递' },
            { label: '篮号', value: 8 },
            { label: '货主', value: '淘宝心选' },
            { label: '快递', value: '韵达快递' },
            { label: '篮号', value: 8 },
          ]}
          maxHeight={true}
        />
      </Col>
      <Col span='8'>
        <p>泡沫箱</p>
        <OPCard
          title='泡沫箱指引'
          content={
            <div className='bubble-box'>
              {[
                { label: '泡沫箱-12873874' },
                { label: '泡沫箱-78324', selected: true },
                { label: '泡沫箱-33874837' },
              ].map(({ label, selected }) => (
                <div
                  className={['box-item', selected ? 'selected' : ''].join(' ')}
                >
                  {label}
                </div>
              ))}
            </div>
          }
        />
      </Col>
    </Row>
    <h1>文本/图片</h1>
    <Row gutter={16}>
      <Col span='8'>
        <p>单张图片</p>
        <OPCard
          title='SN码指引'
          imgList={[
            {
              url: 'https://img.alicdn.com/tfs/TB1d6yPoXzqK1RjSZSgXXcpAVXa-1668-800.png',
            },
          ]}
        />
      </Col>
      <Col span='8'>
        <p>两张图片</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
            },
            {
              url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
            },
          ]}
        />
      </Col>
      <Col span='8'>
        <OPCard
          content='大不压小，重不压轻'
          imgList={[
            {
              url: 'https://img.alicdn.com/tfs/TB1R.40KNnaK1RjSZFBXXcW7VXa-120-120.png',
              fit: 'contain-in',
            },
          ]}
        />
        <OPCard
          content='封箱指导'
          imgList={[
            {
              url: 'https://img.alicdn.com/imgextra/i2/O1CN01pligCA1JmYz4rjfyP_!!6000000001071-2-tps-629-302.png',
            },
          ]}
        />
      </Col>
    </Row>
    <h1>条码(参考jsbarcode)</h1>
    <Row gutter={16}>
      <Col span='6'>
        <OPCard
          content='强制完成'
          barcode={{
            value: '123',
            height: 80,
            width: 3.5,
            margin: 0,
          }}
        />
      </Col>
      <Col span='6'>
        <OPCard
          content='完成'
          barcode={{
            value: '456',
            height: 50,
            width: 4,
            margin: 0,
          }}
        />
      </Col>
    </Row>
    <h1>图片缩放：宽高等图</h1>
    <Row gutter={16}>
      <Col span='6'>
        <p>fit: contain-out (短边适应容器)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
              fit: 'contain-out',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: contain-in (长边适应容器)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
              fit: 'contain-in',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: width (宽度100%)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
              fit: 'width',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: height (高度100%)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
              fit: 'height',
            },
          ]}
        />
      </Col>
    </Row>
    <h1>图片缩放：宽图</h1>
    <Row gutter={16}>
      <Col span='6'>
        <p>fit: contain-out (短边适应容器)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
              fit: 'contain-out',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: contain-in (长边适应容器)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
              fit: 'contain-in',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: width (宽度100%)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
              fit: 'width',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: height (高度100%)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
              fit: 'height',
            },
          ]}
        />
      </Col>
    </Row>
    <h1>图片缩放：高图</h1>
    <Row gutter={16}>
      <Col span='6'>
        <p>fit: contain-out (短边适应容器)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
              fit: 'contain-out',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: contain-in (长边适应容器)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
              fit: 'contain-in',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: width (宽度100%)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
              fit: 'width',
            },
          ]}
        />
      </Col>
      <Col span='6'>
        <p>fit: height (高度100%)</p>
        <OPCard
          title='高破品包装'
          imgList={[
            {
              url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
              fit: 'height',
            },
          ]}
        />
      </Col>
    </Row>
    <h1>卡片操作</h1>
    <Row gutter={16}>
      <Col span='8'>
        <OPCard
          title='商品图片'
          imgList={[
            {
              url: 'https://img.alicdn.com/tfs/TB1d6yPoXzqK1RjSZSgXXcpAVXa-1668-800.png',
            },
          ]}
          action={{
            name: '查看大图',
            hotkey: 'F6',
            onAction: () => {
              alert('点击查看大图');
            },
          }}
        />
      </Col>
      <Col span='8'></Col>
      <Col span='8'></Col>
    </Row>
  </div>
);

export const 卡片 = Card.bind({});