import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Row, Col, Tag, Pagination, Card, Tooltip, Divider } from 'antd';
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
import { EyeFilled } from '@ant-design/icons';
import { history } from 'umi';

const col = { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };
const { Meta } = Card;

function Case() {
  const [page, setpage] = useState({ pageIndex: 1, pageSize: 12 });
  const [total, settotal] = useState();
  const { data, loading } = useRequest(
    async () => {
      let data = await doFetch({
        url: '/ngCase/page',
        params: page,
      });
      settotal(data?.data?.page?.total);
      return data?.data?.page?.records;
    },
    {
      refreshDeps: [page],
    },
  );

  const onChange = (pageIndex, pageSize) => {
    setpage({
      pageIndex,
      pageSize,
    });
  };

  return (
    <div>
      <div style={{ position: 'relative' }}>
        <img
          src={'https://ng-website.oss-cn-hangzhou.aliyuncs.com/D1-banner.jpg'}
          alt=""
          style={{ width: '100%' }}
        />
        <div
          className="center"
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
            flexDirection: 'column',
            color: '#ffffff',
          }}
        >
          <p style={{ fontSize: '2vw', marginBottom: '0.4rem' }}>典型案列</p>
          <p style={{ fontSize: '1vw' }}>
            始终坚持自主创新，用专业创造价值，凭真诚赢得信赖！
          </p>
        </div>
      </div>
      <div className="section">
        <Row gutter={24}>
          {data?.map?.((it, i) => {
            return (
              <Col span={24} style={{ marginBottom: 24 }}>
                <Card
                  style={{
                    width: '100%',
                    height: '100%',
                    borderColor: '#cccccc',
                    backdropFilter: 'blur(2px)',
                    backgroundColor: 'rgba(255,255,255,0.7)',
                  }}
                  hoverable
                  onClick={() => {
                    if (it?.caseLinkUrl) {
                      window.open(it?.caseLinkUrl);
                      return;
                    }
                    history.push({
                      pathname: '/casedetail',
                      query: {
                        id: it?.id,
                      },
                    });
                  }}
                >
                  <div>
                    <div className="centerl" style={{ marginTop: 20 }}>
                      <img
                        style={{ height: 49, marginRight: 12, borderRadius: 4 }}
                        src={it?.picUrl}
                        alt=""
                      />
                      <span style={{ fontSize: '0.8rem' }} className="oneline">
                        {it?.title}
                      </span>
                    </div>

                    <p style={{ fontSize: '0.6rem', marginTop: '1rem' }}>
                      {it?.caseDescribe}
                    </p>
                    <Divider></Divider>
                    <p
                      style={{
                        margin: 0,
                        fontSize: '0.7rem',
                        color: '#999999',
                        display: 'flex',
                      }}
                    >
                      相关产品：
                      {it?.ngCaseProductList?.map((it, i) => {
                        return (
                          <Tooltip title={it?.productName}>
                            <Tag
                              style={{
                                margin: '2px',
                                padding: '4px 8px',
                                fontSize: '0.7rem',
                              }}
                              onClick={(e) => {
                                e.stopPropagation();
                                it?.linkUrl && window.open(it?.linkUrl);
                              }}
                            >
                              {it?.productName}
                            </Tag>
                          </Tooltip>
                        );
                      })}
                    </p>
                  </div>
                </Card>
              </Col>
            );
          })}
        </Row>

        <div className="center" style={{ marginTop: '2rem' }}>
          <Pagination
            current={page?.pageIndex}
            showQuickJumper
            total={total}
            onChange={onChange}
            showTotal={(total, range) =>
              `共${total} 条中的 ${range[0]}-${range[1]}`
            }
          />
        </div>
      </div>
    </div>
  );
}

export default Case;