import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Button, Table, Popconfirm } from 'antd';
import '../style.less';
import PointModel from '../components/pointModel'

const Information = (props) => {
   const { dispatch, actions } = props
   const { projectRegime } = actions
   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 [companyID, setCompanyId] = useState('')
   const [select, setSelect] = useState([])
   const [selec, setSelec] = useState()
   const [qrCodeingIds, setQrCodeingIds] = useState(null)

   const qrCodeId = props?.match?.params?.id

   useEffect(() => {
      projectList(query)
   }, [])

   const projectList = (obj) => {
      const { limit, page } = obj
      dispatch(projectRegime.positionList({ limit, page: 0, projectId: qrCodeId })).then(res => {
         if (res.success) {
            let data = []
            res.payload.data?.rows?.map(v => {
               v.points?.map(r => {
                  data?.push(r)
               })
            })
            settableList(data?.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: 'position',
         key: 'position',
         render: (text, record, index) => {
            return record.longitude && record.latitude ? <div style={{ width: 100 }}>{record.longitude},{record.latitude}</div> : "--"
         }
      }, {
         title: '描述',
         dataIndex: 'describe',
         key: 'describe',
         render: (text, record, index) => record.describe || '--'
      }, {
         title: '操作',
         dataIndex: 'operation',
         key: 'operation',
         render: (text, record, index) => {
            return (
               <>
                  <Button type="link" onClick={() => {
                     setAddModel(true)
                     setModelData(record)
                  }}>编辑</Button>
                  <Popconfirm
                     title={<div style={{ width: 184 }}>删除该点位后，与巡检计划关联的点位删除，对应的巡检记录删除，是否确认删除？</div>}
                     position='topLeft'
                     onConfirm={() => {
                        dispatch(projectRegime.delPosition(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>
                  <Button type="link" onClick={() => {
                     setQrCodeingIds([record.id])
                     dispatch(projectRegime.addPosition({
                        qrCode: true,
                        id: record.id,
                     }, true)).then(() => {
                        setQrCodeingIds(null)
                     })
                  }} loading={qrCodeingIds?.includes(record.id)}>二维码生成</Button>
               </>
            )
         }
      }
   ]

   return (
      <>
         <img src={selec} />
         <div style={{ display: 'flex', marginBottom: 10 }}>
            <Button type="primary" onClick={() => {
               setAddModel(true)
            }}>新建点位</Button>
            <Button type="primary" style={{ marginLeft: 20 }} onClick={() => {
               if (select.length) {
                  setQrCodeingIds(select.map(s => s.id));
                  select?.map((v, i) => {
                     dispatch(projectRegime.addPosition({
                        qrCode: true,
                        id: v.id,
                     }, true)).then(() => {
                        if (i === select.length - 1) {
                           setQrCodeingIds(null);
                        }
                     })
                  })
               }
            }} disabled={qrCodeingIds?.length}>一键生成二维码</Button>
         </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 })
               }
            }}
            rowSelection={{
               selectedRowKeys: select?.map(v => v.id) || [],
               onChange: (selectedRowKeys, selectedRows) => {
                  setSelect(selectedRows)
               }
            }}
         />
         {
            addModel ?
               <PointModel
                  modelData={modelData}
                  qrCodeId={qrCodeId}
                  close={() => {
                     setAddModel(false)
                     setModelData({})
                  }}
                  success={() => {
                     setAddModel(false)
                     setModelData({})
                     setQuery({ limit: 10, page: 0 });
                     projectList({ limit: 10, page: 0 })
                  }}
               /> : ""
         }
      </>
   )
}

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

export default connect(mapStateToProps)(Information);