import React, { useState, useEffect } from 'react';
import { Table, Space, message } from 'antd';

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: any = 1;
const Renovation = (props: any) => {
  const permissionArr = JSON.parse(localStorage.getItem('permission') || '');
  //  const decoration_status = [[0, "待处理"], [1, "已批准"], [2, "已拒绝"]]
  const decoration_status = [
    [0, 'Pending'],
    [1, 'Approved'],
    [2, 'Rejected'],
  ];

  const { dispatch, Data8, location } = props;
  const [loading, setLoading] = useState(false);
  const [readyData, setReadyData] = useState(null);

  console.log(Data8);

  const columns = objectColumns([
    ['Community', 'communityName'],
    ['Applicant', 'applyforName'],
    [
      'Unit',
      null,
      (text: any, record: any) => (
        <div>
          {record.communityBuildDecorate} #{record.communityFloorDecorate}-
          {record.communityRoomDecoate}
        </div>
      ),
    ],
    ['Content', 'decorationContent', (text: any) => <div>{stringTab(text)}</div>],
    ['Application Time', 'createTime', (text: any) => <div>{timestampToTime(text.time)}</div>],
    [
      'status',
      'decorationStatus',
      (text: any) => <div>{decoration_status[parseInt(text)][1]}</div>,
    ],
    [
      'Actions',
      'decorationStatus',
      (text: any, record: any) => (
        <Space size="middle">
          {' '}
          <a onClick={goToDetail.bind(this, record)}> {text === 0 ? 'Reply' : 'Detail'} </a>
        </Space>
      ),
    ],
  ]);
  useEffect(() => {
    pageNum = 1;
    //分页设置
    if (location.query.pageNum != null) {
      pageNum = 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) => {
    if (permissionArr.indexOf('12') < 0) {
      message.error('No Permissions!!!', 3);
      return;
    }
    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' }}>
      <>
        <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 !== null ? Data8.data.rows : null}
          columns={columns}
          onChange={PageChange}
          pagination={{
            current: parseInt(pageNum),
            pageSize: Data8 !== null ? Data8.data.page.curPageSize : null,
            total: Data8 !== null ? Data8.data.page.totalRow : null,
            showSizeChanger: false,
          }}
        />
      </>
    </div>
  );
};

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