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,Switch } from 'antd';
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import AdcdTreeSelector from "./AdcdTreeSelector";
import ToolBar from './toolbar';
import ModalForm from './form';
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);
  console.log(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 checkType = {
    1: "低风险",
    2: "一般风险",
    3: "较大风险",
    4:"重大风险"
  }
  const risk = {
    1: "low",
    2: "yiban",
    3: "jiaoda",
    4:"zhongda"
  }
  const refModal = useRef();
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
    {title: '巡检项描述', key: 'itemDesc', dataIndex: 'itemDesc', width: 240},
    {
      title: '问题描述', key: 'problemDesc', dataIndex: 'problemDesc', width: 320,ellipsis:true},
    {
      title: '处理建议', key: 'handleSuggestion', dataIndex: 'handleSuggestion', width: 200 },
    {
      title: '排序号', key: 'orderIndex', dataIndex: 'orderIndex', width: 100,
    },
    {
      title: '是否启用', key: 'status', dataIndex: 'status', width: 200,
      render: (v, r) => <Switch
      checkedChildren="启用"
      unCheckedChildren="禁用"
      checked={v == 0 ? true : false} onChange={(e) => { 
        onEdit(apiurl.rcgl.xcxj.xjxpz.edit,{...r, status:e ? 0 : 1})
      }} />
    },
    {
      title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <CrudOpRender_text
        edit={editBtn ? true : false}
        del={delBtn ? true : false}
        command={(cmd) => () => command(cmd)(row)} />)
    },
  ];
  const [code, setCode] = useState()

  
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);


 
  const command = (type) => (params) => {
    if (type === 'save') {   
      refModal.current.showSave({code});
    } else if (type === 'edit') {
      refModal.current.showEdit({ ...params,code });
    } else if (type === 'view') {
      refModal.current.showView(params);
    } else if (type === 'del') {
      refModal.current.onDeleteGet(apiurl.rcgl.xcxj.xjxpz.delete + `/${params.id}`);
    }
  }
  
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.xcxj.xjxpz.page).find_noCode);

  const onEdit = (path,values) => {
    createCrudService(path).edit(values).then((result) => {
      if (result?.code === 200) {
        refresh()
      }
    })
  }
  useEffect(() => {
    if (code) {
      let params = {
        search: {
           menuId:code,
          }
        };
      search(params)
    }
  }, [code]);
  
  
  return (
    <>
       <div className='content-box' style={{ backgroundColor: '#fff', height: '100%',display:'flex',padding:'10px' }}>
      <div className='lf adcdTreeSelectorBox' style={{height:'calc(100vh - 168px)',width:'340px'}}>
         <AdcdTreeSelector hasAlertBox={false} setAdcd={setCode}/>
        </div>
      <div className='AdcdTreeTableBox' style={{flex:1,overflowX:"auto"}}>
         <Card className='nonebox'>
          <ToolBar
              onSave={command('save')}
              role={role}
          />
        </Card>
       
        <Table
          columns={columns}
          rowKey="id"
          {...tableProps}
          scroll={{ x: width, y: "calc( 100vh - 400px )" }}
        />
              
   
      </div>
      
      <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={refresh}
      />
    </div>
    </>
  );
}

export default Page;