import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import DetailModalForm from "./detailForm"
import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender';

const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const editBtn = role?.rule?.find(item => item.menuName == "编辑");
  const viewBtn = role?.rule?.find(item => item.menuName == "查看");
  const delBtn = role?.rule?.find(item => item.menuName == "删除");
  const task = {
    0: "未完成",
    1: "进行中",
    2: "已完成"
  }
  const taskType = {
    0: "日常巡查",
    1: "特别检查",
    2: "汛前巡检"
  }
  const refModal = useRef();
  const [searchVal, setSearchVal] = useState(false)
  const [tabs, setTabsChange] = useState(0)
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
    {
      title: '任务类型', key: 'taskType', dataIndex: 'taskType', width: 200,
      render: (value) => <span>{taskType[value]}</span>
      
    },
    { title: '任务标题', key: 'taskTitle', dataIndex: 'taskTitle', width: 250, ellipsis: true },
    {title: '任务内容', key: 'taskContent', dataIndex: 'taskContent', width: 200},
    {
      title: '任务状态', key: 'status', dataIndex: 'status', width: 200,
      render: (value) => <span
        style={{
          display: "flex",
          width:"50%",
          alignItems: "center",
          columnGap:5,
          padding: "5px 10px",
          color: "#689fff",
          border: "1px solid #bbdcff",
          background: "#ecf5ff",
          borderRadius: "4px"
        }}>
        <span>{task[value]}</span>
        <span style={{
          display: "inline-block",
          padding: 5,
          background:tabs == 1 ? "#ffec00" : tabs == 2 ? "#29c093" : "#d7d7d7"
        }}></span>
      </span>
    },
    {title: '巡查人', key: 'inspectUserName', dataIndex: 'inspectUserName', width: 100},
    {title: '开始日期', key: 'startDate', dataIndex: 'startDate', width: 200},
    {title: '结束日期', key: 'endDate', dataIndex: 'endDate', width: 200},
    {title: '问题数量', key: 'problemNum', dataIndex: 'problemNum', width: 100,align: 'center'},
    { title: '待处理', key: 'handleNum	', dataIndex: 'handleNum	', width: 100,align: 'center'},
    { title: '创建时间', key: 'createTime', dataIndex: 'createTime', width: 200 },
    { title: '创建人', key: 'createUserName', dataIndex: 'createUserName', width: 150 },
    
    {
      title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <CrudOpRender_text
          edit={(editBtn && tabs == 0) ? true : false}
          del={(delBtn && tabs == 0) ? true : false}
          detail={viewBtn ? true : false}
          command={(cmd) => () => command(cmd)(row)} />)
    },
  ];
  const [modeBtn, setModeBtn] = useState('')
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  const command = (type) => (params) => { 
    setModeBtn(type)
    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.rcgl.xcxj.xjrw.delete + `/${params.id}`);
    }
  }
  
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.xcxj.xjrw.page).find_noCode);
  const { tableProps:tableProps0, search:search0 } = usePageTable(createCrudService(apiurl.rcgl.xcxj.xjrw.page).find_noCode);
  const { tableProps:tableProps1, search:search1 } = usePageTable(createCrudService(apiurl.rcgl.xcxj.xjrw.page).find_noCode);
  const { tableProps:tableProps2, search:search2 } = usePageTable(createCrudService(apiurl.rcgl.xcxj.xjrw.page).find_noCode);

 /**
   * @description 处理成功的回调
   */
 const successCallback = () => {
   refresh()
   setTabsChange(0)
}
  useEffect(() => {
    const userId = localStorage.getItem('userId')
    if (searchVal) {
      const params = {
        search: {
          ...searchVal,
          status: Number(tabs),
          createUserId:userId
          
        }
      }; 
      search(params)
    }
  }, [searchVal, tabs])
  
  useEffect(() => {
    const userId = localStorage.getItem('userId')
    if (searchVal) {
      const params = {
        search: {
          ...searchVal,
          status: 0,
          createUserId:userId
        }
      }; 
      search0(params)
    }
  }, [searchVal])
  useEffect(() => {
    const userId = localStorage.getItem('userId')
    if (searchVal) {
      const params = {
        search: {
          ...searchVal,
          status: 1,
          createUserId:userId
        }
      }; 
      search1(params)
    }
  }, [searchVal])

  useEffect(() => {
    const userId = localStorage.getItem('userId')
    if (searchVal) {
      const params = {
        search: {
          ...searchVal,
          status: 2,
          createUserId:userId
        }
      }; 
      search2(params)
    }
  }, [searchVal])

 
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              onSave={command('save')}
              role={role}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <Tabs
              // defaultActiveKey={0}
              onChange={(e) => setTabsChange(e)}
              activeKey={tabs}
              items={[
                {
                  label: `未完成（${tableProps0?.pagination?.total}）`,
                  key: 0,
                  children:<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
                },
                {
                  label: `进行中（${tableProps1?.pagination?.total}）`,
                  key: 1,
                  children:<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
                },
                {
                  label: `已完成（${tableProps2?.pagination?.total}）`,
                  key: 2,
                  children:<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
               }
              ]}
            >
          </Tabs>    
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          title1="巡查任务详情"
          component={modeBtn == "view"? DetailModalForm : ModalForm}
          onCrudSuccess={successCallback}
          // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
        />
      </div>
    </>
  );
}

export default Page;