import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Card, Form, Input, Select, Button, Table, Modal, Popconfirm, Tooltip } from 'antd';
import moment from "moment";
import '../style.less';
import ProjectAddModel from '../components/projectAddModel'
import { Model } from 'echarts';

const Information = (props) => {
   const { dispatch, actions, user, loading } = props
   const { projectRegime } = actions
   const [firmList, setFirmList] = useState([])
   const [tableList, settableList] = useState([])
   const [addModel, setAddModel] = useState(false)
   const [modelData, setModelData] = useState({})
   const [query, setQuery] = useState({ limit: 10, page: 0 })
   const [limits, setLimits] = useState()
   const [search, setSearch] = useState({})
   const [isPicture, setIsPicture] = useState(false)
   const [pictureUrl, setPictureUrl] = useState()
   const [companyID, setCompanyId] = useState('')



   useEffect(() => {
      dispatch(projectRegime.getFirmList()).then(res => {
         if (res.success) {
            let data = res.payload.data?.map(r => ({ value: r.id, label: r.name }))
            if (user?.role?.type == 1) {
               setFirmList(data)
               projectList(query)
            } else if (user?.role?.type == 2) {
               let dataId = user?.userDepartments[0]?.department?.company?.id
               setFirmList(data?.filter(v => v.value == dataId))
               projectList({ ...query, companyId: dataId })
               setSearch({ companyId: dataId })
               setCompanyId(dataId)
            }
         }
      })

   }, [])

   const projectList = (obj) => {
      const { limit, page, companyId, name, type } = obj
      dispatch(projectRegime.getProjectList({ limit, page, companyId, name, type })).then(res => {
         // console.log(res)
         if (res.success) {
            settableList(res.payload.data?.rows?.map(v => ({ ...v, key: v.id })))
            setLimits(res.payload.data?.count)
         }
      })
   }

   const columns = [
      {
         title: '序号',
         dataIndex: 'index',
         key: 'index',
         render: (text, record, index) => index + 1
      }, {
         title: '结构物名称',
         dataIndex: 'name',
         key: 'name',
      }, {
         title: '所在地区',
         dataIndex: 'type',
         key: 'type',
      }, {
         title: '结构物类型',
         dataIndex: 'scale',
         key: 'scale',
         render: (text, record, index) => record?.scale?.scale + record?.scale?.scaleSuffix
      }, {
         title: '描述',
         dataIndex: 'amount',
         key: 'amount',
         render: (text, record, index) => record?.amount?.amount + record?.amount?.amountSuffix
      }, {
         title: '操作',
         dataIndex: 'operation',
         key: 'operation',
         render: (text, record, index) => {
            return (
               <div style={{ width: 180 }}>
                  {(user?.isSuper || user.id == record.userId) ?
                     <>
                        <Button type="link" onClick={() => {
                           setAddModel(true)
                           setModelData(record)
                        }}

                        >编辑</Button>
                        <Popconfirm
                           title='确认删除工程信息？'
                           position='topLeft'
                           onConfirm={() => {
                              dispatch(projectRegime.delProject(record.id)).then(res => {
                                 if (res.success) {
                                    if ((limits > 11 && tableList.length > 1) || limits < 11) {
                                       projectList({ ...query, ...search })
                                    } else {
                                       projectList({ limit: query?.limit, page: query?.page - 1, ...search })
                                       setQuery({ limit: query?.limit, page: query?.page - 1 });
                                    }
               
                                 }
                              })
                           }}
                        >
                           <Button type="link" danger >删除</Button>
                        </Popconfirm>

                     </>
                     : <>
                        <Tooltip title='请联系工程创建者'>
                           <Button type="link" >编辑</Button>
                        </Tooltip>
                        <Tooltip title='请联系工程创建者'>
                           <Button type="link" danger >删除</Button>
                        </Tooltip>
                     </>
                  }

               </div>
            )
         }
      }
   ]

   return (
      <>
         <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 10px' }}>
            <Form
               style={{ display: 'flex', }}
               onFinish={r => {
                  projectList({ limit: 10, page: 0, ...r, companyId: companyID || r?.companyId })
                  setQuery({ limit: 10, page: 0 });
                  setSearch(r)
               }}
            >
               <Form.Item
                  label='项目名称'
                  name="name"
                  style={{ marginRight: 16, minWidth: 180 }}
               >
                  <Input placeholder="请输入项目名称" allowClear />
               </Form.Item>
               <Form.Item wrapperCol={{}}>
                  <Button type="primary" htmlType="submit">
                     搜索
                  </Button>
               </Form.Item>
            </Form>
            <div style={{ display: 'flex' }}>
               <Button type="primary" onClick={() => {
                  console.log(45513);
                  setAddModel(true)
               }}>新建结构物</Button>
               <Button type="primary" style={{ marginLeft: 20 }} onClick={() => {
                  console.log(45513);
                  setAddModel(true)
               }}>一键生成二维码</Button>
            </div>

         </div>
         <Table
            columns={columns}
            dataSource={tableList}
            pagination={{
               current: query.page + 1,
               total: limits,
               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 });
                  projectList({ limit: pageSize, page: page - 1, ...search, companyId: companyID || search?.companyId })
               }
            }}
         />
         {
            <Modal
               // title={ }
               width={570}
               open={isPicture}
               onOk={() => { }}
               footer={null}
               onCancel={() => {
                  setIsPicture(false)
                  setPictureUrl('')
               }}
            >
               {pictureUrl && pictureUrl[0] ? <img src={`/_file-server/${pictureUrl}`} width={500} /> : "暂无图片"}
            </Modal>
         }
         {
            addModel ?
               <ProjectAddModel
                  firmList={firmList}
                  modelData={modelData}
                  close={() => {
                     setAddModel(false)
                     setModelData({})
                  }}
                  success={() => {
                     setAddModel(false)
                     setModelData({})
                     setQuery({ limit: 10, page: 0 });
                     projectList({ limit: 10, page: 0, ...search, companyId: companyID || search?.companyId })
                  }}
               /> : ""
         }
      </>
   )
}

function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      actions: global.actions,
   };
}

export default connect(mapStateToProps)(Information);