import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
import router from 'umi/router';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../../style/GoodsList.less';
import moment from 'moment';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';



const data = []

const header = (props) => {
  const drainageId = props.location.query.drainageId


  const [datas, setDatas] = useState([])
  const [content, setContent] = useState([{}, {}])
  const [columns, setColumns] = useState([])
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const [total,setTotal] = useState({})
  let daterange = []
  // let content = {}
  useEffect(() => {

    gettaDrainageRecord({ pageNum: 1, pageSize: 10, drainageId: drainageId })

  }, [])

  function gettaDrainageRecord (params) {
    request({ ...apis.activity.taDrainageRecord, params: { ...params } }).then((data) => {
      // setDatas(data) 
      console.log(data.total, '3333333333333')
      if(data.total!=0){
      setTotal(data)
      // console.log(data.total, '3333333333333')
     
      setDatas(tableData(data.records))
      // content = data.records[0]
      console.log('json: ', eval('(' + data.records[0].content + ')'))
      setContent(eval('(' + data.records[0].content + ')'))
      setColumns(tableTitle(eval('(' + data.records[0].content + ')')))
    }
    else{
      message.info('数据为空')
    }



    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }
  function tableData (data) {
    console.log('data', data)
    return data.map((row, inx) => {
      return eval('(' + row.content + ')').reduce((acc, col) => {
        const r = {
          key: inx + 1,
          [`${col.key}`]: col.value,
          ...acc,
        }
        console.log('r', r)
        return r
      }, {})
    })
  }

  function tableTitle (data) {
    return data.map((item) => {
      const col = {
        title: item.label,
        dataIndex: item.key,
        key: item.key
      }
      return col
    })
  }


  function datalist() {

    gettaDrainageRecord({ pageNum: 1, pageSize: 10, drainageId: drainageId ,startTime: fromTime(startDate) ,endTime: fromTime(endDate)  })
  }

  function fromTime(str) {
    return str === '' ? null : `${moment(str).format('YYYY-MM-DDT00:00:00.000')}Z`
  }

  function onChangetime(dates, dateStrings) {
 
    setEndDate(dateStrings[1])
    setStartDate(dateStrings[0])
    
  }

  const changePageNum = pageNumber => {
    gettaDrainageRecord({ pageNum: pageNumber, pageSize: 10 ,drainageId: drainageId, startTime: fromTime(startDate) ,endTime: fromTime(endDate)})
}
  function excelPort(){
    // const fieldsValue = getFieldsValue()
    request({ ...apis.activity.exporttaDrainageRecord, params: { drainageId: drainageId ,startTime: fromTime(startDate) ,endTime: fromTime(endDate) }  })
      .then(response => {
        download(response)
      }).catch(error => {

      })
  }



  function download (data) {
    if (!data) {
      return
    }
    const url = window.URL.createObjectURL(new Blob([data]))
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', '引流.xlsx')
    document.body.append(link)
    link.click()
  }

  const { RangePicker } = DatePicker;
  return (
    <>

<RangePicker
          style={{ width: '400px' }}
          // ranges={{
          //   Today: [moment(), moment()],
          //   'This Month': [moment().startOf('month'), moment().endOf('month')],
          // }}
          // defaultValue={[moment(new Date(new Date().setDate((new Date().getDate() - 6))), 'YYYY-MM-DD HH:MM:SS'), moment(new Date(), 'YYYY-MM-DD HH:MM:SS')]}
          showTime
          onChange={onChangetime}
        />
        <Button type="primary" htmlType="submit" style={{ marginLeft: '30px', float: 'right' }} onClick={datalist}>
          搜索
      </Button>
    
      <div>
        {/* H5项目名称 */}
        {}  <Button type="primary" style={{ marginLeft: '30px', float: 'right', marginTop: '30px',marginBottom: '30px' }} onClick={excelPort}>导出数据</Button>
        <Table columns={columns} dataSource={datas}  pagination={false} />
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
       <Pagination showQuickJumper defaultCurrent={1} total={total.total} onChange={(e) => changePageNum(e)} />
      </div>
      </div>




    </>
  )
}


export default header
