import React, { useState, useEffect } from 'react';
import { ProDescriptions } from '@ant-design/pro-components';
import { Divider, Button, Tooltip } from 'antd';
import { doFetch } from '@/utils/doFetch';
import { MoreOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import DesItem from './DesItem';
export default (props) => {
  const { type, detailpath, params, baseRow, basecolumns, title, titleno } = props;
  const [hidden, sethidden] = useState(false);

  const request = useRequest(async () => {
    let res = await doFetch({ url: detailpath, params });
    if (res?.data?.dataList?.length > 4) {
      sethidden(true);
    }
    return res?.data || {};
  });

  // 维修工单
  const Wxgd = () => {
    // return (
    //   <>
    //     <DesItem
    //       dataSource={request?.data?.dataList[0]}
    //       title="报修信息"
    //       hidden={true}
    //       index="0"
    //       // navhidden={false}
    //     />
    //     {request?.data?.dataList?.splice(1).map((it, index) => {
    //       return (
    //         <>
    //           <DesItem
    //             type="wxgd"
    //             dataSource={it}
    //             index={index + 2}
    //             hidden={true}
    //             navhidden={false}
    //           />
    //         </>
    //       );
    //     })}
    //   </>
    // );

    return hidden ? (
      <>
        <DesItem
          dataSource={request?.data?.dataList[0]}
          title="基本信息"
          hidden={true}
          type="wxgd"
          index="0"
          // navhidden={false}
        />
        <DesItem
          type="wxgd"
          dataSource={request?.data?.dataList[1]}
          index={'2'}
          hidden={true}
          navhidden={false}
        />
        <div className="fault-detail" style={{ paddingTop: 30, paddingBottom: 30 }}>
          <Tooltip title="点击展开">
            <Button
              type="primary"
              shape="circle"
              icon={<MoreOutlined />}
              onClick={() => {
                sethidden(false);
              }}
            />
          </Tooltip>
        </div>
        <DesItem
          type="wxgd"
          dataSource={request?.data?.dataList[request?.data?.dataList?.length - 2]}
          index={request?.data?.dataList?.length - 1}
          hidden={true}
          navhidden={false}
        />
        <DesItem
          type="wxgd"
          dataSource={request?.data?.dataList[request?.data?.dataList?.length - 1]}
          index={request?.data?.dataList?.length}
          hidden={true}
          navhidden={false}
        />
      </>
    ) : (
      <>
        <DesItem
          dataSource={request?.data?.dataList[0]}
          title="报修信息"
          hidden={true}
          index="0"
          // navhidden={false}
        />
        {request?.data?.dataList?.splice(1).map((it, index) => {
          return (
            <>
              <DesItem
                type="wxgd"
                dataSource={it}
                index={index + 2}
                hidden={true}
                navhidden={false}
              />
            </>
          );
        })}
      </>
    );
  };
  // 追踪工单
  const Zzgd = () => {
    return hidden ? (
      <>
        <DesItem
          dataSource={request?.data?.dataList[0]}
          title="基本信息"
          hidden={true}
          type="zzgd"
          index="0"
          // navhidden={false}
        />
        <DesItem
          type="zzgd"
          dataSource={request?.data?.dataList[1]}
          index={'2'}
          hidden={true}
          navhidden={false}
        />
        <div className="fault-detail" style={{ paddingTop: 30, paddingBottom: 30 }}>
          <Tooltip title="点击展开">
            <Button
              type="primary"
              shape="circle"
              icon={<MoreOutlined />}
              onClick={() => {
                sethidden(false);
              }}
            />
          </Tooltip>
        </div>
        <DesItem
          type="zzgd"
          dataSource={request?.data?.dataList[request?.data?.dataList?.length - 2]}
          index={request?.data?.dataList?.length - 1}
          hidden={true}
          navhidden={false}
        />
        <DesItem
          type="zzgd"
          dataSource={request?.data?.dataList[request?.data?.dataList?.length - 1]}
          index={request?.data?.dataList?.length}
          hidden={true}
          navhidden={false}
        />
      </>
    ) : (
      <>
        <DesItem
          dataSource={request?.data?.dataList[0]}
          title="基本信息"
          type="zzgd"
          hidden={true}
          index="0"
          // navhidden={false}
        />
        {request?.data?.dataList?.splice(1).map((it, index) => {
          return (
            <>
              <DesItem
                type="zzgd"
                dataSource={it}
                index={index + 2}
                hidden={true}
                navhidden={false}
              />
            </>
          );
        })}
      </>
    );
  };
  // 外协工单
  const Wgd = () => {
    return (
      <>
        <DesItem
          dataSource={request?.data?.dataList[0]}
          title="基本信息"
          hidden={true}
          type="wgd"
          index="0"
          navhidden={true}
        />
        {request?.data?.dataList?.splice(1).map((it, index) => {
          console.log('11', it);
          return (
            <>
              <DesItem
                type="wgd"
                dataSource={it}
                index={index + 2}
                hidden={true}
                navhidden={false}
              />
            </>
          );
        })}
      </>
    );
  };
  const selectType = {
    gzbx: (
      <DesItem
        type="gzbx"
        index="0"
        dataSource={request?.data?.data}
        title="基本信息"
        hidden={true}
        navhidden={true}
      />
    ),
    wxgd: <Wxgd />,
    zzgd: <Zzgd />,
    wgd: <Wgd />,
  };
  return (
    <>
      <div>
        <h2 style={{ fontWeight: 700 }}>
          {title}：{titleno}
        </h2>
      </div>
      <ProDescriptions columns={basecolumns} dataSource={baseRow} />
      <Divider />
      {selectType[type]}
    </>
  );
};