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 { push } from 'react-router-redux';
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('')
   const [select, setSelect] = useState([])
   const [selec, setSelec] = useState()
   var QRCode = require('qrcode')



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

   const projectList = (obj) => {
      const { limit, page, name } = obj
      dispatch(projectRegime.getProjectList({ limit, page, name, })).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 createQrCode = (name) => {
      let url = ''
      QRCode.toDataURL(name, {
         errorCorrectionLevel: 'low',
         type: 'image/png',
         quality: 0.3,
         margin: 2,
         maskPattern: 9,
         width: 400,
         color: {
            dark: "#000000ff",
            light: "#ffffffff"
         }
      }, function (err, v) {
         url = v
      })
      return url
   }


   const columns = [
      {
         title: '序号',
         dataIndex: 'index',
         key: 'index',
         render: (text, record, index) => index + 1
      }, {
         title: '结构物名称',
         dataIndex: 'name',
         key: 'name',
      }, {
         title: '所在地区',
         dataIndex: 'type',
         key: 'type',
         render: (text, record, index) => {
            return record.longitude && record.latitude ? <div style={{ width: 100 }}>{record.longitude},{record.latitude}</div> : "--"
         }
      }, {
         title: '结构物类型',
         dataIndex: 'type',
         key: 'type',
         render: (text, record, index) => record.type || '--'
      }, {
         title: '描述',
         dataIndex: 'describe',
         key: 'describe',
         render: (text, record, index) => record.describe || '--'
      }, {
         title: '操作',
         dataIndex: 'operation',
         key: 'operation',
         render: (text, record, index) => {
            return (
               <div style={{ width: 180 }}>
                  <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>
                  {/* <Button type="link" danger >二维码生成</Button> */}
                  <Button type="link" onClick={() => {
                     dispatch(push(`/projectRegime/information/${record.id}`));
                  }} >点位</Button>
               </div>
            )
         }
      }
   ]

   return (
      <>
         <img src={selec} />
         <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 })
               }
            }}
            rowSelection={{
               selectedRowKeys: select || [],
               onChange: (selectedRowKeys, selectedRows) => {
                  setSelect(selectedRowKeys)
                  console.log(selectedRowKeys, selectedRows);
               }
            }}
         />
         {
            <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);