import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Form, Input, Button, Table, Modal, Popconfirm, Tooltip } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { push } from 'react-router-redux';
import moment from 'moment';
import { v4 } from 'uuid';
import ProjectModel from '../components/projectModel'
import './style.less';


const ProjectPublish = ({ dispatch, actions, user, loading, publishList, webScreen }) => {

   const { projectManagement, projectRegime } = actions
   const [firmList, setFirmList] = useState([])
   const [tableList, settableList] = useState([])
   const [editModel, setEditModel] = useState(false)
   const [codeEdit, setCodeEdit] = useState(false)
   const [modelData, setModelData] = useState({})
   const [query, setQuery] = useState({ limit: 10, page: 0 })
   const [strucList, setStrucList] = useState([])
   const [search, setSearch] = useState({})
   const [companyID, setCompanyId] = useState('')
   const [code, setCode] = useState('')



   useEffect(() => {
      dispatch(projectManagement.getProjectType())
      dispatch(projectRegime.getProjectList({ justStructure: true })).then(v => {
         if (v.success) {
            setStrucList(v.payload.data?.rows || [])
         }
      })
      projectPublishList(query)
   }, [])

   const projectPublishList = (data = {}) => {
      dispatch(projectManagement.getProjectPublishList(data))
   }





   const columns = [{
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
   }, {
      title: '监测对象',
      dataIndex: 'monitorObject',
      key: 'monitorObject',
      render: (text, record, index) => {
         let findAll = strucList?.filter(d => text?.includes(d.id))?.map(s => s.name) || []
         return findAll.join('、') || '--'
      }
   }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text, record, index) => text && moment(text).format('YYYY-MM-DD HH:mm:ss') || '--'
   }, {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record, index) => {
         return (<>
            <Button type="link" onClick={() => {
               setEditModel(true)
               setModelData(record)
            }}
            >修改</Button>
            <Popconfirm
               title={<div style={{ width: 180 }}>是否确认删除此项目？</div>}
               position='topLeft'
               onConfirm={() => {
                  dispatch(projectManagement.delProjectPublish(record.id)).then(res => {
                     if (res.success) {
                        setQuery({ limit: 10, page: 0 });
                        projectPublishList({ limit: 10, page: 0 })
                     }
                  })
               }}
            >
               <Button type="link" danger >删除</Button>
            </Popconfirm>
            <Button type="link" onClick={() => {
               setCode(record?.code)
               setModelData(record)
               setCodeEdit(true)
            }} >地址</Button></>
         )
      }
   }
   ]

   return (
      <div className='global-main'>
         <Button type="primary" style={{ marginBottom: 10 }} onClick={() => {
            setEditModel(true)
         }}
         >新增</Button>
         <Spin spinning={loading}>
            <Table
               columns={columns}
               dataSource={publishList?.rows || []}
               pagination={{
                  className: 'global-pagination',
                  current: query.page + 1,
                  total: publishList?.count || 0,
                  showSizeChanger: true,
                  showQuickJumper: true,
                  pageSizeOptions: [10, 20, 50],
                  showTotal: (total) => {
                     return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / query?.limit)}页，${total}项`}</span>
                  },
                  onChange: (page, pageSize) => {
                     setQuery({ limit: pageSize, page: page - 1 });
                     projectPublishList({ limit: pageSize, page: page - 1 })
                  }
               }}
               // rowSelection={{
               //    selectedRowKeys: select || [],
               //    onChange: (selectedRowKeys, selectedRows) => {
               //       setSelect(selectedRowKeys)
               //       console.log(selectedRowKeys, selectedRows);
               //    }
               // }}
               rowClassName={(record, index) => {
                  let className = 'global-light-row';
                  if (index % 2 === 1) className = 'global-dark-row';
                  return className;
               }}
            // scroll={{ y: 590 }}
            />
         </Spin>


         {
            editModel ?
               <ProjectModel
                  strucList={strucList}
                  modelData={modelData}
                  close={() => {
                     setEditModel(false)
                     setModelData({})
                  }}
                  success={() => {
                     setEditModel(false)
                     setModelData({})
                     setQuery({ limit: 10, page: 0 });
                     projectPublishList({ limit: 10, page: 0 })
                  }}
               /> : ""
         }
         {
            codeEdit &&
            <Modal
               title={'项目地址'}
               width={600}
               open={codeEdit}
               onOk={() => {
                  dispatch(projectManagement.postProjectPublish({
                     id: modelData?.id,
                     code: code || v4(),
                     isCode: true,
                  })).then(res => {
                     if (res.success) {
                        setCodeEdit(false)
                        setCode("")
                        setModelData({})
                     }
                  })
               }}
               onCancel={() => {
                  setCodeEdit(false)
                  setCode("")
                  setModelData({})
               }}
            >
               <Input
                  disabled={true}
                  addonBefore={webScreen + '?p='}
                  addonAfter={<div style={{ cursor: 'pointer' }} onClick={() => { setCode(v4()) }}><SettingOutlined />修改</div>}
                  value={code} />
            </Modal>
         }
      </div>
   )
}

function mapStateToProps (state) {
   const { auth, global, publishList } = state;

   return {
      user: auth.user,
      actions: global.actions,
      loading: publishList?.isRequesting,
      publishList: publishList?.data || {},
      webScreen: global?.webScreen
   };
}

export default connect(mapStateToProps)(ProjectPublish);