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

import { connect, history } from 'umi';

import { objectColumns } from '@/utils/string';
import { timestampToTime } from '@/utils/time';
import Login from '../user/login/components/Login';

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

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

const module = 'CommunityService';
const Card = (props: any) => {
  const { dispatch, Data7 } = props;

  const [readyData, setReadyData] = useState(null);
  const [loading, setLoading] = useState(false);
  // const apply_status = [[0, "审核中"], [1, "批准"], [2, "拒绝"], [3, "领取"]]
  const apply_status = [
    [0, 'Under review'],
    [1, 'Approval'],
    [2, 'Reject'],
    [3, 'Claim'],
  ];
  const columns = objectColumns([
    ['Community Name', 'community_name'],
    [
      'Unit',
      null,
      (text: any, record: any) => (
        <Space size="middle">
          {record.build_number + '#' + record.floor_number + '-' + record.room_number}
        </Space>
      ),
    ],
    ['Community Owner', 'community_owner'],
    [
      'Apply Time',
      null,
      (text: any, record: any) => (
        <Space size="middle">{timestampToTime(record.create_time.time)}</Space>
      ),
    ],
    [
      'Apply Status',
      'apply_status',
      (text: any, record: any) => <Space size="middle">{apply_status[parseInt(text)][1]}</Space>,
    ],
    [
      'Actions',
      null,
      (text: any, record: any) => (
        <Space size="middle">
          {' '}
          <a onClick={goToDetail.bind(this, record)}>Detail</a>
        </Space>
      ),
    ],
  ]);

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

  useEffect(() => {
    //前置数据
    console.log('前置数据');
    let tmp: any = filterObjbyTg(location.query, [
      'handleStatus',
      'ownerName',
      'communityName',
      'current',
    ]);
    tmp.handleStatus = apply_status[parseInt(tmp.handleStatus)]; //特殊处理
    setReadyData(tmp);
    //获取数据
    setLoading(true);
    RA(31, { serviceType: '7', id: '' }, module, dispatch);
  }, []);

  useEffect(() => {
    if (Data7 != null) {
      console.log('首页信息');
      console.log(Data7);
    }
  }, [Data7]);

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

  const goToAdd = (values: any, e: any) => {
    history.push('./AccessCardApplication/Add');
  };

  //页面搜索
  const ClickTitleSearch = (comment: any) => {
    let tmp = filterObjbyTg(comment, ['handleStatus', 'ownerName', 'communityName']);
    tmp['current'] = 1;
    console.log(tmp);
    history.push(location.pathname + urlEncode(tmp));
  };
  return (
    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
      {Data7 != null ? (
        <>
          <TitleSearch
            communitySelect={true}
            listkey={['ownerName']}
            list={['Owner Name']}
            status={[{ name: ['handleStatus', 'Status'], data: apply_status }]}
            defaultValue={readyData}
            onSubmit={ClickTitleSearch}
          />

          <div style={{ height: 80, position: 'relative' }}>
            <div style={{ position: 'absolute', right: 0 }}>
              <Button type="primary" onClick={goToAdd}>
                Apply Card
              </Button>
            </div>
          </div>

          <Table
            loading={loading}
            rowKey="id"
            style={{ marginTop: 16 }}
            dataSource={Data7.data.rows}
            columns={columns}
            pagination={{ defaultCurrent: 1, total: Data7.total }}
          />
        </>
      ) : null}
    </div>
  );
};

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