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 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';
    }

    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 (
      <Card>
        <div align="right" style={{ marginBottom: '16px' }}>
          <Button onClick={this.goback}>返回</Button>
        </div>
        {this.state.activityName && (
          <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>
      </Card>
    );
  }
}
const WrappedTypeForm = Form.create()(SharePersonNum);
export default WrappedTypeForm;