
import React,{ useState,useEffect,useRef } from 'react';
import { Table,Divider,Input,Button } from 'antd';
import DrawerForm from './drawer';
import {getTemplateLists,delTemplateData} from '@/api/generalSetting.js'
import './style.less';

// const filterForm = React.forwardRef((props,ref)=>{
//     const handleSubmit
//     return (
//         <Form onSubmit={handleSubmit} className="login-form">

//         </Form>
//     )
// });

// const TableFilter = Form.create({ name: 'tableFilter' })(filterForm);

const TemplateMana = ()=>{
      const columns = [
          {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
          },
          {
            title: '模板名称',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render:timeNum=>(`${new Date(timeNum).getFullYear()}-${new Date(timeNum).getMonth()+1}-${new Date(timeNum).getDay()>9?new Date(timeNum).getDay():'0'+new Date(timeNum).getDay()}`)
          },
          {
            title: '创建人',
            dataIndex: 'createUserName',
            key: 'createUserName',
          },
          {
            title: '备注说明',
            dataIndex: 'remark',
            key: 'remark',
          },
          {
            title: '操作',
            key: 'opreation',
            render: (text, record) => (
                  <>
                    <a onClick={()=>editHandle(record)}>修改</a>
                    <Divider type='vertical' />
                    <a onClick={()=>delHandle(record)}>作废</a>
                  </>
            ),
          },
      ];

      const [drawerVisible,setDrawerVisible] = useState(false);
      const [dataSource,setDataSource] = useState([]);
      const [initData,setInitData] = useState(null);
      const [ifEdit,setIfEdit] = useState(false);
      const [tableSerachKeywords,setTableSerachKeywords] = useState('');
      const [pages,setPages] = useState({});

      const addHandle = ()=>{
        setIfEdit(false);
        setDrawerVisible(true);
      }
      
      /**
       * 
       * @param {Object} record 表格row数据
       */
      const editHandle = (record)=>{
           setIfEdit(true);
           setInitData({
            id:record.id,
            name:record.name,
            remark:record.remark,
            dataSource:record.content?JSON.parse(record.content):[]
           });
      }

      const delHandle = async (record)=>{
            const resp = await delTemplateData({id:record.id});
            if(resp.data.status == 200 ){
                getTemplates({pageSize:20,page:1});
            }
      }
      /**
       * 
       * @param {boolen} bool 
       */
      const onDrawerVisibleChangeHandle = (bool)=>{
        //  console.log('onDrawerVisibleChangeHandle',bool);
         setDrawerVisible(bool);
         !bool&&getTemplates({pageSize:10,page:1}); //关闭时拉取数据
         !bool&&setInitData(null);
      }

      const getTemplates = async (query)=>{
            const resp =  await getTemplateLists(query);
            const {data:{data}} = resp;
            if(data){
                setDataSource(data.list);
                setPages({
                    total:data.totalCount,
                    pageSize:data.pageSize,
                    current:data.currPage
                });
            }
      }

      const filterFormHandle = ()=>{

      }

      useEffect(()=>{
            if(initData){
                setDrawerVisible(true);
            }
      },[initData]);

      useEffect(()=>{
       getTemplates({pageSize:20,page:1});
      },[])

      return (
           <div className='pageContainer'>
                {
                  (
                    <DrawerForm 
                        visible={drawerVisible}
                        initData={ifEdit?initData:null}
                        onVisibleChange={onDrawerVisibleChangeHandle} 
                        title={`${ifEdit?'修改':'添加'}模板数据`}
                    />
                  )
                }
                <div className='filterForm'>
                     <Input placeholder='请输入模板名称' className='inputArea' value={tableSerachKeywords} onChange={e=>setTableSerachKeywords(e.target.value)} />
                     <Button type='primary' onClick={()=>getTemplates({keyword:tableSerachKeywords,pageSize:20,page:1})}>查询</Button>
                     <Button onClick={()=>{setTableSerachKeywords('');getTemplates({pageSize:20,page:1});}}>重置</Button>
                </div>
                <Table 
                  dataSource={dataSource}
                  columns={columns}
                  rowKey="id"
                  pagination={{
                      ...pages
                  }}
                  footer={() => <div className='footerTail' onClick={addHandle}>添加</div>}
                />

           </div>
      )
}

export default TemplateMana;