import React, { useState, useEffect } from 'react';

import styles from './index.less';
import { Table, Space } from 'antd';

import { useIntl, connect, history } from 'umi';

import { timestampToTime } from '../../utils/time';

import { filterObj, urlEncode, filterObjbyTg } from '@/utils/method';

import TitleSearch from '../../components/TitleSearch/TitleSearch';

interface readyData {
  [key: string]: any;
}

let readyData = {
  tosOwnerName: '',
  communityName: '',
  pageNum: 1,
};

const ChargeManager = (props: any) => {
  const { dispatch, location, Data } = props;

  const { formatMessage } = useIntl();
  const username = formatMessage({ id: 'R.charge.username' });
  const project = formatMessage({ id: 'R.charge.project' });
  const unit = formatMessage({ id: 'R.charge.unit' });
  const submissionTime = formatMessage({ id: 'R.charge.submissionTime' });
  const actions = formatMessage({ id: 'R.charge.actions' });

  const [loading, setLoading] = useState(false);

  const goToDetail = (values: any) => {
    getById(values);
    history.push('/PropertyManagementDetail');
  };

  const getById = (values: any) => {
    dispatch({ type: 'PropertyManagement/getById', playload: values });
  };

  const get = (values: any) => {
    dispatch({ type: 'PropertyManagement/get', playload: values });
  };

  const pagination = {
    defaultPageSize: 15,
    total: Data && Data.page.totalRow,
    showSizeChanger: false,
    // current: 1,
  };

  // 监听路由变化
  useEffect(() => {
    console.log(location.query);
    if (location.query) {
      readyData = {
        ...readyData,
        ...location.query,
      };
      setLoading(true);
      get({
        ...readyData,
      });
    }
  }, [location]);

  // 监听数据返回
  useEffect(() => {
    if (Data != null) {
      console.log(Data);
      setLoading(false);
    }
  }, [Data]);

  // 搜索按钮
  const TitleSearchContent = (comment: any) => {
    readyData = {
      ...comment,
    };
    let tmp = filterObjbyTg(comment, ['communityName', 'tosOwnerName']);
    tmp['pageNum'] = 1;
    history.push(location.pathname + urlEncode(tmp));
  };

  // 切换页码
  const changePage = (values: any) => {
    let tmp = {
      ...location.query,
      pageNum: values.current,
    };
    history.push(location.pathname + urlEncode(filterObj(tmp)));
  };

  const columns = [
    { title: username, dataIndex: 'tosOwnerName' },
    { title: project, dataIndex: 'communityName' },
    {
      title: unit,
      dataIndex: 'buildingNumber',
      render: (text: any, record: any) => (
        <div>{record.buildingNumber + '#' + record.floorNumber + '-' + record.roomNumber}</div>
      ),
    },
    {
      title: submissionTime,
      render: (text: any, record: any) => (
        <Space size="middle">{timestampToTime(record.createTime.time)}</Space>
      ),
    },
    {
      title: actions,
      render: (text: any, record: any) => (
        <Space size="middle">
          <a onClick={goToDetail.bind(this, record)}>Detail</a>
        </Space>
      ),
    },
  ];

  return (
    <div className={styles.base}>
      <TitleSearch
        listkey={['tosOwnerName']}
        list={['TosOwnerName']}
        communitySelect={true}
        onSubmit={TitleSearchContent}
        defaultValue={{ ...readyData }}
      />

      {/* 列表组件 */}
      <Table
        style={{ marginTop: 16 }}
        rowKey={'id'}
        loading={loading}
        dataSource={Data != null ? Data.list : []}
        columns={columns}
        pagination={pagination}
        onChange={changePage}
      />
    </div>
  );
};

function mapStateToProps(state: any) {
  const { Data } = state.PropertyManagement;
  return {
    Data,
  };
}
export default connect(mapStateToProps)(ChargeManager);
