import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, Table, Space, Button, message } 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, Clear } from '@/utils/method';

let readyData: any = {
  communityName: '',
  ownerName: '',
  handleStatus: '',
  pageNum: 1,
};
const module = 'CommunityService';
const Card = (props: any) => {
  const { dispatch, Data7, location } = props;
  const permissionArr = JSON.parse(localStorage.getItem('permission') || '');
  const [loading, setLoading] = useState(false);
  // const apply_status = [[0, "审核中"], [1, "批准"], [2, "拒绝"], [3, "领取"]]
  const apply_status = [
    [0, 'Pending'],
    [1, 'Approval'],
    [2, 'Reject'],
    [3, 'Received'],
  ];

  const apply_relation = [
    [0, 'Oneself'],
    [1, 'Family Members'],
    [2, 'Tenant'],
  ];

  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>
      ),
    ],
    ['User Name', 'apply_name'],
    [
      'Account Type',
      'apply_relation_owner',
      (text: string, record: any) => <div>{apply_relation[text][1]}</div>,
    ],
    [
      'Application Time',
      null,
      (text: any, record: any) => (
        <Space size="middle">{timestampToTime(record.create_time.time)}</Space>
      ),
    ],
    [
      'Status',
      'apply_status',
      (text: any, record: any) => <Space size="middle">{apply_status[parseInt(text)][1]}</Space>,
    ],
    [
      'Actions',
      'apply_status',
      (text: any, record: any) => (
        <Space size="middle">
          <a onClick={goToDetail.bind(this, record)}>Detail</a>
        </Space>
      ),
    ],
  ]);

  useEffect(() => {
    //前置数据
    readyData = {
      ...location.query,
      pageNum: location.query.pageNum ? parseInt(location.query.pageNum) : 1,
    };

    //获取数据
    setLoading(true);
    RA(
      31,
      { ...filterObjbyTg(readyData, ['handleStatus', 'ownerName', 'communityName', 'pageNum']) },
      module,
      dispatch,
    );

    return () => {
      readyData = {
        communityName: '',
        ownerName: '',
        handleStatus: '',
        pageNum: 1,
      };
      Clear(module + '/Data7Clear', dispatch);
    };
  }, [location]);

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

  const goToDetail = (values: any, e: any) => {
    if (permissionArr.indexOf('12') < 0) {
      message.error('No Permissions!!!', 3);
      return;
    }
    history.push('./AccessCardApplication/Detail?id=' + values.id);
  };

  const goToAdd = () => {
    history.push('./AccessCardApplication/Add');
  };

  //页面搜索
  const ClickTitleSearch = (comment: any) => {
    if (comment.handleStatus instanceof Array) {
      comment.handleStatus = comment.handleStatus[0];
    }
    let tmp = filterObjbyTg(comment, ['handleStatus', 'ownerName', 'communityName']);
    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(tmp));
  };

  return (
    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
      <>
        <TitleSearch
          communitySelect={true}
          listkey={['ownerName']}
          list={['Owner Name']}
          status={[{ name: ['handleStatus', 'Status'], data: apply_status }]}
          onSubmit={ClickTitleSearch}
          defaultValue={{
            ownerName: readyData.ownerName,
            handleStatus: apply_status[parseInt(readyData.handleStatus)],
            communityName: readyData.communityName,
          }}
        />

        <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 !== null ? Data7.data.list : []}
          columns={columns}
          pagination={{
            current: readyData.pageNum,
            pageSize: Data7 !== null ? Data7.data.page.curPageSize : 15,
            total: Data7 !== null ? Data7.data.page.totalRow : null,
            showSizeChanger: false,
          }}
          onChange={changePage}
        />
      </>
    </div>
  );
};

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