import React, { Component, useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
import moment from 'moment';
import style from './compenents/style.less';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import router from 'umi/router';
import AuthButton from '@/components/AuthButton';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import WxDictSelect from '@/components/SelectButton/WxDictSelect';
import Prompt from 'umi/prompt';


const { RangePicker } = DatePicker;
const { Option } = Select

const formItemLayout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 },
};

let daterange = []
let tableTitle = ['类型']

let columns = [
  {
    title: '姓名',
    dataIndex: 'nickName',
    key: 'nickName',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '归属地',
    dataIndex: 'province',
    key: 'province',
  },
  {
    title: '来源渠道',
    dataIndex: 'personFrom',
    key: 'personFrom',
  },
  {
    title: '置业顾问',
    dataIndex: 'realtyConsultant',
    key: 'realtyConsultant',
  },
  {
    title: '置业顾问电话',
    dataIndex: 'realtyConsultantPhone',
    key: 'realtyConsultantPhone',
  },
  {
    title: '分享者',
    dataIndex: 'sharePersonName',
    key: 'sharePersonName',
  },
  {
    title: '分享者电话',
    dataIndex: 'sharePersonPhone',
    key: 'sharePersonPhone',
  },
]

class SharePersonNum extends React.Component {

  constructor(props) {
    super(props)
    let startDate;
    let endDate;
    if (props.location.query.queryDate) {
      startDate = moment(props.location.query.queryDate).hours(0).minutes(0).seconds(0).milliseconds(0).format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      endDate = moment(props.location.query.queryDate).hours(23).minutes(59).seconds(59).milliseconds(999).format('YYYY-MM-DDTHH:mm:ss') + '.999Z';
    } else {
      startDate = moment(props.location.query.startDate).hours(0).minutes(0).seconds(0).milliseconds(0).format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      endDate = moment(props.location.query.endDate).hours(23).minutes(59).seconds(59).milliseconds(999).format('YYYY-MM-DDTHH:mm:ss') + '.999Z';
    }
    console.log(startDate)
    this.state = {
      formData: {
        personFrom: '',
        province: '',
        pageNum: '',
        pageSize: '',
        startDate: startDate,
        endDate: endDate,
        activityId: props.location.query.activityId,
        activityType: props.location.query.activityType,
        buildingId: props.location.query.buildingId,
      },
      personData: [],
      dataSoures: [],
      tableData: [],
      userType: 'all',
      activityName: props.location.query.activityName
    }
  }

  componentDidMount() {
    this.getTableList()
  }

  getTableList() {
    const { formData } = this.state
    console.log(formData)
    request({ ...apis.activityDataStatis.activityAddRegist, params: formData }).then(data => {
      console.log(data)
      this.setState({ tableData: data.records, total: data.total })
    }).catch()
  }

  handleSubmit = (e, props) => {
    let startDate = null
    let endDate = null
    const personFrom = this.props.form.getFieldValue("personFrom");
    const province = this.props.form.getFieldValue("province");
    const { formData } = this.state
    this.setState({
      formData: {
        ...formData,
        personFrom: personFrom,
        province: province,
        pageNum: 1,
        pageSize: 999
      }
    }, this.getTableList)
  }

  //重置搜索
  handleReset = e => {
    this.props.form.resetFields()
    let startDate;
    let endDate;
    if (this.props.location.query.queryDate) {
      startDate = moment(this.props.location.query.queryDate).hours(0).minutes(0).seconds(0).milliseconds(0).format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      endDate = moment(this.props.location.query.queryDate).hours(23).minutes(59).seconds(59).milliseconds(999).format('YYYY-MM-DDTHH:mm:ss') + '.999Z';
    } else {
      startDate = moment(this.props.location.query.startDate).hours(0).minutes(0).seconds(0).milliseconds(0).format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      endDate = moment(this.props.location.query.endDate).hours(23).minutes(59).seconds(59).milliseconds(999).format('YYYY-MM-DDTHH:mm:ss') + '.999Z';
    }
    this.setState({
      formData: {
        personFrom: '',
        province: '',
        pageNum: '',
        pageSize: '',
        startDate: startDate,
        endDate: endDate,
        activityId: this.props.location.query.activityId,
        activityType: this.props.location.query.activityType,
        buildingId: this.props.location.query.buildingId,
      },
      personData: [],
      dataSoures: [],
      tableData: [],
      userType: 'all',
      activityName: this.props.location.query.activityName
    }, this.getTableList)
  }

  goback = () => {
    router.go(-1);
  }

  exportActivityStats = () => {
    const { formData } = this.state
    request({ ...apis.activityDataStatis.activityAddRegistNumExport, params: formData }).then(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()
    }).catch()
  }

  //排序
  handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter)
    const { formData } = this.state
    this.setState({
      formData: {
        ...formData,
        personFrom: formData.personFrom,
        pageNum: pagination.current,
        pageSize: pagination.pageSize
      }
    }, this.getTableList)
  };

  render() {
    const { radioVal } = this.state
    const { getFieldDecorator } = this.props.form;

    return (
      <>
        <div align="right" style={{ marginBottom: '16px' }}><Button onClick={this.goback}>返回</Button></div>
        <div>
          <span style={{ marginLeft: '20px' }}>分享内容：{this.state.activityName}</span>
        </div>
        <Form layout="inline" onSubmit={e => this.handleSubmit(e, this.props)}>
          <Form.Item style={{ marginTop: '20px', marginBottom: '20px' }}>
            {getFieldDecorator('province')(<Input placeholder="请输入归属地" />)}
          </Form.Item>
          <Form.Item style={{ marginTop: '20px', marginBottom: '20px' }}>
            {getFieldDecorator('personFrom')(
              <WxDictSelect />,
            )}
          </Form.Item>
          <Form.Item style={{ marginTop: '20px', marginBottom: '20px' }}>
            <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }}>
              搜索
            </Button>
            <Button onClick={e => this.handleReset()} style={{ marginLeft: '30px' }}>重置</Button>
          </Form.Item>
        </Form>
        <div>
          <AuthButton name="admin.statistical.activity.export" noRight={null}>
            <Button type="primary" style={{ float: 'right', margin: '20px 0', zIndex: 1 }} onClick={this.exportActivityStats}>
              导出
            </Button>
          </AuthButton>
          <Table style={{ marginTop: '20px' }} dataSource={this.state.tableData} columns={columns} pagination={{ total: this.state.total }} onChange={this.handleTableChange} scroll={{ y: 500 }}></Table>
        </div>
        <Prompt message={location =>
          location.pathname.startsWith("/statistical/activity")
            ? true
            : localStorage.removeItem("tabState")} />
      </>
    )

  }
}
const WrappedTypeForm = Form.create()(SharePersonNum);
export default WrappedTypeForm
