import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, Table, Space, Button } from 'antd';
const { TabPane } = Tabs;

import { connect, history } from 'umi';

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

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

import { objectColumns, stringTab } from '@/utils/string';
import { timestampToTime } from '@/utils/time';
const module = 'CommunityService';

let pageNum: number = 1;

const Renovation = (props: any) => {
  //  const decoration_status = [[0, "待处理"], [1, "已批准"], [2, "已拒绝"]]
  const decoration_status = [
    [0, 'Pending'],
    [1, 'Approved'],
    [2, 'Rejected'],
  ];

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

  const columns = objectColumns([
    ['Community', 'community_name'],
    ['Applicant', 'applyfor_name'],
    [
      'Unit',
      null,
      (text: any, record: any) => (
        <div>
          {record.community_build_decorate}#{record.community_floor_decorate}-
          {record.community_room_decoate}
        </div>
      ),
    ],
    ['Content', 'decoration_content', (text: any) => <div>{stringTab(text)}</div>],
    ['Request Time', 'create_time', (text: any) => <div>{timestampToTime(text.time)}</div>],
    [
      'status',
      'decoration_status',
      (text: any) => <div>{decoration_status[parseInt(text)][1]}</div>,
    ],
    [
      'Actions',
      'decoration_status',
      (text: any, record: any) => (
        <Space size="middle">
          {' '}
          <a onClick={goToDetail.bind(this, record)}> {text === 0 ? 'Reply' : 'Detail'} </a>
        </Space>
      ),
    ],
  ]);

  const { dispatch, Data8, location } = props;
  console.log(Data8);
  useEffect(() => {
    //分页设置
    if (location.query.pageNum != null) {
      pageNum = parseInt(location.query.pageNum);
    } else {
      pageNum = 1;
    }

    //前置数据
    console.log('前置数据');
    let tmp: any = filterObjbyTg(location.query, ['handleStatus', 'applyforName', 'communityName']);
    tmp.handleStatus = decoration_status[parseInt(tmp.handleStatus)]; //特殊处理

    setReadyData(tmp);
    //获取数据
    setLoading(true);
    RA(
      23,
      {
        ...tmp,
        handleStatus:
          location.query.handleStatus != undefined ? parseInt(location.query.handleStatus) : null,
        pageNum,
      },
      module,
      dispatch,
    );
  }, [location]);

  useEffect(() => {
    if (Data8 != null) {
      setLoading(false);
    }
  }, [Data8]);

  //页面搜索
  const ClickTitleSearch = (comment: any) => {
    let tmp = filterObjbyTg(comment, ['handleStatus', 'applyforName', 'communityName']);
    pageNum = 1;
    history.push(location.pathname + urlEncode(tmp));
  };

  const goToDetail = (values: any, e: any) => {
    // SA(values, module, dispatch);
    history.push('./RenovationApplication/Detail?id=' + values.id);
  };

  const PageChange = (values: any) => {
    //页面跳转参数
    var tmp = filterObjbyTg(location.query, ['handleStatus', 'ownerName', 'communityName']);
    tmp['pageNum'] = values.current;
    history.push(location.pathname + urlEncode(tmp));
  };
  return (
    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
      {Data8 != null ? (
        <>
          <TitleSearch
            communitySelect={true}
            listkey={['applyforName']}
            list={['Owner Name']}
            status={[{ name: ['handleStatus', 'Status'], data: decoration_status }]}
            defaultValue={readyData}
            onSubmit={ClickTitleSearch}
          />
          <Table
            loading={loading}
            rowKey="id"
            style={{ marginTop: 16 }}
            dataSource={Data8.data.rows}
            columns={columns}
            onChange={PageChange}
            pagination={{
              current: pageNum,
              defaultPageSize: 15,
              total: Data8.data.page.totalRow,
              showSizeChanger: false,
            }}
          />
        </>
      ) : null}
    </div>
  );
};

function map(state: any) {
  const { Data8 } = state[module];
  return { Data8 };
}
export default connect(map)(Renovation);
