import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { useSelector } from 'react-redux';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card,Modal,Image,Input,Button,Row,Col,message } from 'antd';
import ToolBar from './toolbar';
import ModalForm from './form';
import RecordDetails from "../pxjlgl/form"
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
import { exportFile } from '../../../utils/tools.js';
import { httppost5,httpget2 } from '../../../utils/request';

const Page = () => {
  const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
  const role = useSelector(state => state.auth.role);
  const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
  const viewBtn = role?.rule?.find(item => item.menuName == "查看") || true;
  const delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
  const refModal = useRef();
  const [searchVal, setSearchVal] = useState(false)
  const [pxRecordOpen, setPxRecordOpen] = useState(false)

  const [qdItem, setQdItem] = useState()
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '培训班名称', key: 'name', dataIndex: 'name', width: 200, ellipsis: true },
    {
      title: '计划培训周期', key: 'num1', dataIndex: 'num1', width: 200,
      render: (value, record) =>  <span>{(record?.stm && record?.etm) ? `${record?.stm}至${record?.etm}` : ''}</span>,
    },
    { title: '主办单位', key: 'unit', dataIndex: 'unit', width: 200 },
    {
      title: '培训内容', key: 'content', dataIndex: 'content', width: 200,ellipsis: true
    },
    { title: '培训地点', key: 'addr', dataIndex: 'addr', width: 150, ellipsis: true },
    { title: '填报人', key: 'applicant', dataIndex: 'applicant', width: 150, ellipsis: true },
  
    {
      title: '操作', key: 'operation', width: 300, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <CrudOpRender_text
          edit={editBtn ? true : false}
          del={delBtn ? true : false}
          view={viewBtn ? true : false}
          similarAdd={true}
          record={true}
          command={(cmd) => () => command(cmd)(row)} />)
    },
  ];
  const columns1 = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '培训日期', key: 'planDate', dataIndex: 'planDate', width: 150, ellipsis: true },
    {
      title: '培训时段', key: 'personCount', dataIndex: 'personCount', width: 150,
      render: (value, record) => <span>{(record?.stm && record?.etm) ? `${record?.stm}至${record?.etm}` : ''}</span>,
    },
    { title: '参加人数', key: 'trainees', dataIndex: 'trainees', width: 100 },
    {
      title: '参训人员', key: 'numPeople', dataIndex: 'numPeople', width: 200,ellipsis: true
    },
    {
      title: '培训签到表', key: 'teamLeader', dataIndex: 'teamLeader', width: 150,
      render: (value,record) => <div><a onClick={()=>reviewPic(record.files1)}> {record?.files1[0]?.fileName} </a></div>
    },
  
    {
      title: '操作', key: 'operation', width: 100, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <a onClick={() => { setPxRecordOpen(true); setQdItem(row)}}>查看</a>
      )
    },
  ];
  
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
  const width1 = useMemo(() => columns1.reduce((total, cur) => total + (cur.width), 0), [columns1]);
  const [pxOpen, setPxOpen] = useState(false)
  const [imgVisible, setImgVisible] = useState(false)
  const [imgList, setImgList] = useState([])
  const [fileList1, setFileList1] = useState([]) //上传文件列表
  const [fileList2, setFileList2] = useState([]) //上传文件列表


  const reviewPic = (arrPic) => {
    if (arrPic.length > 0) {
      setImgVisible(true)
      setImgList(arrPic)
    }
  }
  const command = (type) => (params) => {
    if (type === 'save') {
      refModal.current.showSave();
    } else if (type === 'edit') {
      refModal.current.showEdit({ ...params });
    } else if (type === 'view') {
      refModal.current.showView(params);
    } else if (type === 'del') {
      refModal.current.onDeleteGet(apiurl.pxjh.delete + `/${params.id}`);
    }else if (type === 'similarAdd') {
      refModal.current.showSimilarSave(params);
    } else {
      // 培训记录
      const params1 = {
        search: {
          ...searchVal,
          planId:params.id
        }
      };
      setPxOpen(true);
      search1(params1)
      // getFileInfo(params)
    }
  }
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.pxjh.page).find_noCode);
  const { tableProps:tableProps1, search:search1 } = usePageTable(createCrudService(apiurl.pxjl.page).find_noCode);

 /**
   * @description 处理成功的回调
   */
 const successCallback = () => {
  refresh()
}

  
// const getFileInfo = async (params) => {
//   try {
//     const res = await httpget2(apiurl.pxjl.getFile + `/${params.id}`)
//     if (res.code === 200) {
//       if (res.data?.files1) {
//         let fileArr1 = res.data?.files1.map(item => {
//           return {
//             name: item.fileName,
//             response: {
//               data: {
//                 filePath: item.filePath,
//                 fileId: item.fileId
//               }
//             },
//           }
//         })
//         setFileList1(fileArr1)
//       }
//       if (res.data?.files2) {
//         let fileArr2 = res.data?.files2.map(item => {
//           return {
//             name: item.fileName,
//             response: {
//               data: {
//                 filePath: item.filePath,
//                 fileId: item.fileId
//               }
//             },
//           }
//         })
//         setFileList2(fileArr2)
//       }
//     }
//   } catch (error) {
//     console.log(error);
//   }
  
// }
  
  // 导出
  const exportExcel = () => {
    let params = {
      ...searchVal,
    }
    httppost5(apiurl.pxjh.export, params).then(res => {
      exportFile(`培训计划管理.xlsx`,res.data)
  })
  }
  useEffect(()=>{
    const params = {
      search: {
        ...searchVal,
      }
    };
    search(params)
  }, [searchVal])

  // const dataSource = useMemo(() => {
  //   if (tableProps1.dataSource.length > 0) { 
  //     return tableProps1.dataSource.map(item => ({
  //       ...item,
  //       files1: fileList1,
  //       files2: fileList2,
  //     }))
  //   } else {
  //     return []
  //   }
  // },[tableProps1.dataSource,fileList1,fileList2])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%"}}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              onSave={command('save')}
              role={role}
              callback={refresh}
              exportFile1={exportExcel}
            />
          </Card>
          <div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
            <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={successCallback}
        />
      </div>
      {/* 培训记录 */}
      <Modal
        title="培训记录"
        width={1000}
        open={pxOpen}
        destroyOnClose
        footer={null}
        onCancel={() => {
          setPxOpen(false);
        }}
      >
        <Table
          columns={columns1}
          rowKey="inx"
          {...tableProps1}
          // dataSource={dataSource}
          scroll={{ x: width1, y: "calc( 100vh - 400px )" }} />
      </Modal>

      
      {/* 培训记录查看 */}
      <Modal
           title="查看"
           width={800}
           open={pxRecordOpen}
           destroyOnClose
           footer={null}
           onCancel={() => {
             setPxRecordOpen(false);
           }}
      >
        <RecordDetails mode={"view"} record={qdItem} />
      </Modal>
      <div style={{ display: "none" }}>
        <Image.PreviewGroup
            preview={{
              visible:imgVisible,
              onVisibleChange: (vis) => setImgVisible(vis),
            }}
        >
          {
              imgList.length > 0 ? imgList.map(item => (
                <Image src={ url + item.filePath} key={item?.id}/>
            ))
            : null
          }

        </Image.PreviewGroup>

      </div>
    </>
  );
}

export default Page;