import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Row, Col, Divider, Tooltip, Card, Tag } 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 Insert({ location: { query } }) {
  const [curid, setcurid] = useState(query.id);

  const { data, loading } = useRequest(
    async () => {
      let data = await doFetch({
        url: '/ngCase/detail',
        params: { id: curid },
      });
      return data?.data?.data;
    },
    {
      refreshDeps: [curid],
    },
  );

  return (
    <div className="container">
      <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">
        <h2 className="title">
          <img
            src={data?.picUrl}
            style={{ height: 44, borderRadius: 6, marginRight: 12 }}
            alt=""
          />
          {data?.title}
        </h2>
        <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
          发布时间：{data?.releaseTime}
        </p>

        <p style={{ textAlign: 'center', fontSize: '0.75rem' }}>
          {data?.caseDescribe}
        </p>
        <div
          dangerouslySetInnerHTML={{ __html: data?.content }}
          style={{ fontSize: '0.7rem' }}
          className="html"
        ></div>
        <Divider></Divider>
        <p
          style={{
            margin: 0,
            fontSize: '0.7rem',
            color: '#999999',
            display: 'flex',
            marginTop: 22,
          }}
        >
          相关产品：
          {data?.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>
    </div>
  );
}

export default Insert;