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 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 checkType = {
    1: "一类坝",
    2: "二类坝",
    3: "三类坝",
  }
  const identifyType = {
    1: "甲级",
    2: "乙级",
    3: "丙级",
    4:"其他"
  }
  const refModal = useRef();
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
    {title: '鉴定日期', key: 'identifyDate', dataIndex: 'identifyDate', width: 140,},
    {
      title: '大坝安全评定类别', key: 'identifyType', dataIndex: 'identifyType', width: 200,
      render: (value) => <span>{value ? checkType[value] : ''}</span>
     },
    {
      title: '鉴定承担单位', key: 'identifyOrg', dataIndex: 'identifyOrg', width: 200,
    },
    {
      title: '承担单位资质', key: 'identifyOrgQua', dataIndex: 'identifyOrgQua', width: 200,
      render: (value) => <span>{value ? identifyType[value] : ''}</span>
      
    },
    {title: '鉴定审定部门', key: 'identifyAuditOrg', dataIndex: 'identifyAuditOrg', width: 200},
    {
      title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <CrudOpRender_text
          edit={true}
          del={true}
          view={true}
          command={(cmd) => () => command(cmd)(row)} />)
    },
  ];

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

  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.rcgl.aqgl.aqjdtz.delete + `/${params.id}`);
    }
  }
  
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.aqgl.aqjdtz.page).find_noCode1);

 /**
   * @description 处理成功的回调
   */
 const successCallback = () => {
  refresh()
}
  useEffect(() => {
    search()
  }, [])
  
  
  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
              onSave={command('save')}
              role={role}
            />
          </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}
          // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
        />
      </div>
    </>
  );
}

export default Page;