import React, { Component } from 'react';

import { Table, Input, Button, Icon, DatePicker } from 'antd';

import moment from 'moment';

import Highlighter from 'react-highlight-words';

export default class RpoliceRecord extends Component {

  constructor(props) {

    super(props);

    this.state = {

      searchText: '',

    }

  }

  render() {

    // 添加搜索

    this.getColumnSearchProps = (dataIndex, title) => ({

      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (

        <div style={{ padding: 8 }}>

          <Input

            ref={node => {

              this.searchInput = node;

            }}

            placeholder={`搜索 ${title}`}

            value={selectedKeys[0]}

            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}

            onPressEnter={() => this.handleSearch(selectedKeys, confirm)}

            style={{ width: 188, marginBottom: 8, display: 'block' }}

          />

          <Button

            type="primary"

            onClick={() => this.handleSearch(selectedKeys, confirm)}

            icon="search"

            size="small"

            style={{ width: 90, marginRight: 8 }}>

            搜索

          </Button>

          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>重置</Button>

        </div>

      ),

      filterIcon: filtered => (

        <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />

      ),

      onFilter: (value, record) =>

        record[dataIndex]

          .toString()

          .toLowerCase()

          .includes(value.toLowerCase()),

      onFilterDropdownVisibleChange: visible => {

        if (visible) {

          setTimeout(() => this.searchInput.select());

        }

      },

      render: text => (

        <Highlighter

          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}

          searchWords={[this.state.searchText]}

          autoEscape

          textToHighlight={text.toString()}

        />

      ),

    });

    //搜索

    this.handleSearch = (selectedKeys, confirm) => {

      confirm();

      console.log(selectedKeys,confirm);

      this.setState({ searchText: selectedKeys[0] });

    };

    this.handleSearchtime = (selectedKeys, confirm) => {

      confirm();

      this.setState({ searchText: selectedKeys });

    };

    //重置

    this.handleReset = clearFilters => {

      clearFilters();

      this.setState({ searchText: '' });

    };

    const columns = [

      { title: '报警时间', dataIndex: 'time', key: 'time',

      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (

        <div style={{ padding: 8 }}>

           <DatePicker  placeholder={`搜索时间`}

            value={selectedKeys[0]}

            onChange={dateString => setSelectedKeys(dateString ? [dateString] : [])}

            onPressEnter={() => this.handleSearch(selectedKeys, confirm)}

            style={{ width: 188, marginBottom: 8, display: 'block' }}/>

          <Button

            type="primary"

            onClick={() => this.handleSearchtime(moment(selectedKeys[0]._d).format('YYYY-MM-DD'), confirm)}

            icon="search"

            size="small"

            style={{ width: 90, marginRight: 8 }}>

            搜索

          </Button>

          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>重置</Button>

        </div>

      ),

      filterIcon: filtered => (

        <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />

      ),

      onFilter: (value, record) => {

        return record.time.indexOf(moment(value).format('YYYY-MM-DD')) != -1},

      render: text => (

        <Highlighter

          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}

          searchWords={[this.state.searchText]}

          autoEscape

          textToHighlight={text.toString()}

        />

      ),

     },

      { title: '来电', key: 'callnum', dataIndex: 'callnum', ...this.getColumnSearchProps('callnum', '来电'), },

      { title: '时长', key: 'longtime', dataIndex: 'longtime', }

    ];

    const data = [

      { key: '1', time: '2019-07-30 16:31:05', callnum: '13546540218', longtime: '37秒' },

      { key: '2', time: '2019-06-24 22:08:05', callnum: '13546540218', longtime: '1分12秒' },

      { key: '3', time: '2017-08-15 12:31:05', callnum: '13546540218', longtime: '1分10秒' },

      { key: '4', time: '2016-12-30 06:15:00', callnum: '13546540218', longtime: '20秒' }

    ];

    return (

        <Table className="accidentTable" columns={columns} dataSource={data} bordered size="small" />

    )

  }

}