import React, { useState, useEffect } from 'react';
import { ProDescriptions } from '@ant-design/pro-components';
import { Divider, Image, Collapse } from 'antd';

const { Panel } = Collapse;

export default ({ index, title, dataSource, columns, hidden, navhidden = false, type }) => {
  const [flag, setflag] = useState(true);

  console.log(index, dataSource);
  // 0：报修 1：接单 2：派单 3：完成维修  4：转追踪 5：转外协 6：转单 7：退单 8：追踪审核 9：外协审核 10：退单审核 11：效果验证
  const columns_mes = {
      sbxx: [
        {
          title: '设备编号',
          dataIndex: 'equipmentNo',
          key: 'equipmentNo',
        },
        {
          title: '设备名称',
          dataIndex: 'equipmentName',
          key: 'equipmentName',
        },
        {
          title: '设备型号',
          dataIndex: 'equipmentName',
          key: 'equipmentName',
        },
        {
          title: '公司名称',
          dataIndex: 'organizationName',
          key: 'organizationId',
        },
        {
          title: '部门名称',
          dataIndex: 'departmentName',
          key: 'departmentId',
        },
        {
          title: '工厂名称',
          dataIndex: 'factoryName',
          key: 'factoryId',
        },
        {
          title: '车间名称',
          dataIndex: 'shopName',
          key: 'shopId',
        },
        {
          title: '工段名称',
          dataIndex: 'sectionName',
          key: 'sectionId',
        },
        {
          title: '产线名称',
          dataIndex: 'productLineName',
          key: 'productLineName',
        },
      ],
      gzxx: [
        {
          title: '报修人员',
          dataIndex: 'repairUserName',
          key: 'repairUserName',
        },
        {
          title: '报修时间',
          dataIndex: 'repairTime',
          key: 'repairTime',
        },
        {
          title: '是否停机',
          dataIndex: 'isShutdown',
          key: 'isShutdown',
          render: (text, row, _, action) => {
            return row?.isShutdown == '1' ? '是' : '否';
          },
        },
        {
          title: '故障类型',
          dataIndex: 'faultType',
          key: 'faultType',
        },
        {
          title: '故障名称',
          dataIndex: 'faultDetailName',
          key: 'faultDetailName',
        },
        {
          title: '故障描述',
          dataIndex: 'faultDescription',
          key: 'faultDescription',
        },
        {
          title: '故障图片',
          dataIndex: 'pictureUrl',
          key: 'pictureUrl',
          render: (text, row, _, action) => {
            if (row?.pictureUrl) {
              return <Image width={70} src={row.pictureUrl} />;
            } else {
              return '暂无';
            }
          },
        },
      ],
    },
    columns_wxgd = {
      1: [
        {
          title: '维修人员',
          dataIndex: 'repairName',
          key: 'repairName',
        },
        {
          title: '接单时间',
          dataIndex: 'repairTime',
          key: 'repairTime',
        },
        {
          title: '协助维修人员',
          dataIndex: 'assistUserNames',
          key: 'assistUserNames',
        },
      ],
      2: [
        {
          title: '派单人员',
          dataIndex: 'dispatcherName',
          key: 'dispatcherName',
        },
        {
          title: '派单时间',
          dataIndex: 'dispatcherTime',
          key: 'dispatcherTime',
        },
        {
          title: '维修人员',
          dataIndex: 'repairName',
          key: 'repairName',
        },
        {
          title: '协助维修人员',
          dataIndex: 'assistUserNames',
          key: 'assistUserNames',
        },
      ],
      3: [
        {
          title: '开始维修时间',
          dataIndex: 'repairStartTime',
          key: 'repairStartTime',
        },
        {
          title: '完成维修时间',
          dataIndex: 'repairEndTime',
          key: 'repairEndTime',
        },
        {
          title: '故障类型',
          dataIndex: 'faultType',
          key: 'faultType',
        },
        {
          title: '故障名称',
          dataIndex: 'faultName',
          key: 'faultName',
        },
        {
          title: '故障原因',
          dataIndex: 'faultCause',
          key: 'faultCause',
        },
        {
          title: '维修类型',
          dataIndex: 'repairTypeName',
          key: 'repairTypeName',
        },
        {
          title: '是否停机维修',
          dataIndex: 'isShutdown',
          key: 'isShutdown',
          render: (text, row, _, action) => {
            return row?.isShutdown == 1 ? '是' : '否';
          },
        },
        {
          title: '维修内容',
          dataIndex: 'repairContent',
          key: 'repairContent',
        },
      ],
      4: [
        {
          title: '申请人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '申请追踪时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '申请追踪原因',
          dataIndex: 'reason',
          key: 'reason',
        },
      ],
      5: [
        {
          title: '外协人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '申请外协时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '申请外协原因',
          dataIndex: 'reason',
          key: 'reason',
        },
      ],
      6: [
        {
          title: '转单人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '转单时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '转单类型',
          dataIndex: 'repairTypeName',
          key: 'repairTypeName',
        },
      ],
      7: [
        {
          title: '退单人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '退单时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '退单原因',
          dataIndex: 'reason',
          key: 'reason',
        },
      ],
      8: [
        {
          title: '审核人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '审核时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '审核结果',
          dataIndex: 'reviewerResult',
          key: 'reviewerResult',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
      ],
      9: [
        {
          title: '审核人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '审核时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '审核结果',
          dataIndex: 'reviewerResult',
          key: 'reviewerResult',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
      ],
      10: [
        {
          title: '审核人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '审核时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '审核结果',
          dataIndex: 'reviewerResult',
          key: 'reviewerResult',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
      ],
      11: [
        {
          title: '验证人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '验证时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '验证结果',
          dataIndex: 'reviewerResult',
          key: 'reviewerResult',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
      ],
    },
    columns_zzgd = {
      1: [
        {
          title: '追踪人员',
          dataIndex: 'trackerName',
          key: 'trackerName',
        },
        {
          title: '接单时间',
          dataIndex: 'repairTime',
          key: 'repairTime',
        },
      ],
      2: [
        {
          title: '派单人员',
          dataIndex: 'dispatcherName',
          key: 'dispatcherName',
        },
        {
          title: '派单时间',
          dataIndex: 'dispatcherTime',
          key: 'dispatcherTime',
        },
        {
          title: '追踪人员',
          dataIndex: 'trackerName',
          key: 'trackerName',
        },
      ],
      3: [
        {
          title: '派单人员',
          dataIndex: 'dispatcherName',
          key: 'dispatcherName',
        },
        {
          title: '派单时间',
          dataIndex: 'dispatcherTime',
          key: 'dispatcherTime',
        },
        {
          title: '追踪人员',
          dataIndex: 'trackerName',
          key: 'trackerName',
        },
      ],
      4: [
        {
          title: '追踪人员',
          dataIndex: 'trackerName',
          key: 'trackerName',
        },
        {
          title: '计划追踪日期',
          dataIndex: 'planTrackTime',
          key: 'planTrackTime',
        },
        {
          title: '实际追踪日期',
          dataIndex: 'trackerTime',
          key: 'trackerTime',
        },
        {
          title: '追踪结果',
          dataIndex: 'trackResults',
          key: 'trackResults',
        },
        {
          title: '是否完成追踪',
          dataIndex: 'isFinishTrack',
          key: 'isFinishTrack',
          render: (text, row, _, action) => {
            return row?.isFinishTrack === 1 ? '是' : '否';
          },
        },
        {
          title: '追踪周期（天）',
          dataIndex: 'trackCycle',
          key: 'trackCycle',
        },
        {
          title: '追踪内容',
          dataIndex: 'trackContents',
          key: 'trackContents',
        },
      ],
      yz: [
        {
          title: '验证人员',
          dataIndex: 'reviewerName',
          key: 'reviewerName',
        },
        {
          title: '验证时间',
          dataIndex: 'reviewerTime',
          key: 'reviewerTime',
        },
        {
          title: '验证结果',
          dataIndex: 'reviewerResult',
          key: 'reviewerResult',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
      ],
    };
  useEffect(() => {
    setflag(hidden);
  }, []);
  console.log('datasource', dataSource);

  //   // 普通的详情展示
  //   const normalItem = () => {
  //     return (
  //       <div>
  //         <div className="fault-detail">
  //           <div style={{ flex: 1, display: 'flex', flexDirection: 'row' }}>
  //             <div
  //               style={{
  //                 display: 'block',
  //                 width: '30px',
  //                 height: '30px',
  //                 fontWeight: 500,
  //                 textAlign: 'center',
  //                 padding: '2px',
  //                 border: '2px solid #1890FF',
  //                 borderRadius: '50%',
  //                 backgroundColor: 'white',
  //                 marginRight: 16,
  //                 flexShrink: 0,
  //               }}
  //             >
  //               {index}
  //             </div>
  //             <div style={{ display: 'flex', flexDirection: 'column' }}>
  //               <label style={{ width: '40px', fontSize: 18, fontWeight: 600 }}>
  //                 {dataSource?.operationTypeName}
  //               </label>
  //               <span>{dataSource?.updateUserName}</span>
  //               <span>{dataSource?.updateTime}</span>
  //             </div>
  //           </div>
  //           <div style={{ flex: 6 }}>
  //             <div style={{ marginBottom: 16 }}>
  //               <h2 className="page-title">{dataSource?.operationTypeName}信息</h2>
  //             </div>
  //             <ProDescriptions
  //               dataSource={dataSource}
  //               columns={columns_wxgd[dataSource?.operationType]}
  //             />
  //             <ProDescriptions dataSource={dataSource} columns={columns_mes['gzxx']} />
  //           </div>
  //         </div>
  //       </div>
  //     );
  //   };
  //   // 带验证的详情展示
  //   const checkItem = () => {
  //     return (
  //       <div>
  //         <div className="fault-detail">
  //           <div style={{ flex: 1, display: 'flex', flexDirection: 'row' }}>
  //             <div
  //               style={{
  //                 display: 'block',
  //                 width: '30px',
  //                 height: '30px',
  //                 fontWeight: 500,
  //                 textAlign: 'center',
  //                 padding: '2px',
  //                 border: '2px solid #1890FF',
  //                 borderRadius: '50%',
  //                 backgroundColor: 'white',
  //                 marginRight: 16,
  //                 flexShrink: 0,
  //               }}
  //             >
  //               {index}
  //             </div>
  //             <div style={{ display: 'flex', flexDirection: 'column' }}>
  //               <label style={{ width: '40px', fontSize: 18, fontWeight: 600 }}>
  //                 {dataSource?.operationTypeName}
  //               </label>
  //               <span>{dataSource?.updateUserName}</span>
  //               <span>{dataSource?.updateTime}</span>
  //             </div>
  //           </div>
  //           <div style={{ flex: 6 }}>
  //             <div style={{ marginBottom: 16 }}>
  //               <h2 className="page-title">{dataSource?.operationTypeName}信息</h2>
  //             </div>
  //             <ProDescriptions
  //               dataSource={dataSource}
  //               columns={columns_wxgd[dataSource?.operationType]}
  //             />
  //             <ProDescriptions dataSource={dataSource} columns={columns_mes['gzxx']} />
  //           </div>
  //         </div>
  //       </div>
  //     );
  //   };

  const itemischeck = {
    wxgd: (
      <div>
        <div className="fault-detail">
          <div style={{ flex: 1, display: 'flex', flexDirection: 'row' }}>
            <div className="fault-index ">{index}</div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <label style={{ width: '40px', fontSize: 18, fontWeight: 600 }}>
                {dataSource?.operationTypeName}
              </label>
              <span>{dataSource?.updateUserName}</span>
              <span>{dataSource?.updateTime}</span>
            </div>
          </div>
          <div style={{ flex: 6 }}>
            <div style={{ marginBottom: 16 }}>
              <h2 className="page-title">{dataSource?.operationTypeName}信息</h2>
            </div>
            <ProDescriptions
              dataSource={dataSource}
              columns={columns_wxgd[dataSource?.operationType]}
            />
            <ProDescriptions dataSource={dataSource} columns={columns_mes['gzxx']} />
          </div>
        </div>
      </div>
    ),
    zzgd: (
      <div>
        <div className="fault-detail">
          <div style={{ flex: 1, display: 'flex', flexDirection: 'row' }}>
            <div className="fault-index">{index}</div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <label style={{ width: '40px', fontSize: 18, fontWeight: 600 }}>
                {dataSource?.operationTypeName}
              </label>
              <span>{dataSource?.updateUserName}</span>
              <span>{dataSource?.updateTime}</span>
            </div>
          </div>
          <div style={{ flex: 6 }}>
            <div style={{ marginBottom: 16 }}>
              <h2 className="page-title">{dataSource?.operationTypeName}信息</h2>
            </div>
            <ProDescriptions
              dataSource={dataSource}
              columns={columns_zzgd[dataSource?.operationType]}
            />
            <Collapse expandIconPosition={'end'}>
              <Panel header={<span style={{ fontSize: 16, fontWeight: 600 }}>验证信息</span>}>
                <ProDescriptions
                  dataSource={dataSource?.trackProcessList?.[0]}
                  columns={columns_zzgd['yz']}
                />
              </Panel>
            </Collapse>
          </div>
        </div>
      </div>
    ),
  };
  return (
    <>
      {flag ? (
        <div>
          {index == 0 ? (
            navhidden ? (
              <div>
                <div>
                  <h2 className="page-title">{title}</h2>
                </div>
                <Divider orientation="left">设备信息</Divider>
                <ProDescriptions dataSource={dataSource?.equipment} columns={columns_mes['sbxx']} />
                <Divider orientation="left">故障信息</Divider>
                <ProDescriptions dataSource={dataSource} columns={columns_mes['gzxx']} />
              </div>
            ) : (
              <div className="fault-detail">
                <div style={{ flex: 1, display: 'flex', flexDirection: 'row' }}>
                  <div className="fault-index">{Number(index) + 1}</div>
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <label style={{ width: '40px', fontSize: 18, fontWeight: 600 }}>
                      {dataSource?.operationTypeName}
                    </label>
                    <span>{dataSource?.updateUserName}</span>
                    <span>{dataSource?.updateTime}</span>
                  </div>
                </div>
                <div style={{ flex: 6 }}>
                  <div>
                    <h2 className="page-title">{title}</h2>
                  </div>
                  <Divider orientation="left">设备信息</Divider>
                  <ProDescriptions
                    dataSource={dataSource?.umTrackOrder}
                    columns={columns_mes['sbxx']}
                  />
                  <Divider orientation="left">故障信息</Divider>
                  <ProDescriptions
                    dataSource={dataSource?.umTrackOrder?.equipment}
                    columns={columns_mes['gzxx']}
                  />
                </div>
              </div>
            )
          ) : (
            itemischeck[type]
          )}
        </div>
      ) : null}
    </>
  );
};