import React, { useEffect } from 'react';
import { Row, Col, Table, Space, Tabs, Button, message } from 'antd';
const { TabPane } = Tabs;

import { objectColumns } from '@/utils/string';

const TableShow = (props: any) => {
  const { data } = props;

  const dataRow = data.rows;
  const goTo = (values: any, e: any) => {
    const permissionArr = JSON.parse(localStorage.getItem('permission') || '[]');
    if (permissionArr.indexOf('6') < 0) {
      message.error('No Permissions!!!', 3);
      return;
    }
    console.log(values);
    props.onSubmit(values);
  };
  const deleteUnit = (values: any, e: any) => {
    props.onChange(values);
  };
  useEffect(() => {
    console.log('组件入参');
    console.log(dataRow);
  }, []);

  // const user_status = [[1, "家属"], [2, "租户"]]
  const user_status = [
    [1, 'Family Member'],
    [2, 'Tenant'],
  ];

  // const user_type_status = ["Registered", "Unregistered", "Cancellation"]
  const user_type_status = ['Normal', 'Normal', 'Cancellation'];

  const user_code = ['Activation Code Is Inactive', 'Activation Code Has Been Used'];

  const key = objectColumns([
    ['User Name', 'owner_family_name'],
    ['Contact Number', 'owner_family_phone', (text: string, record: any) => text || '--'],
    ['Email', 'owner_family_email', (text: string, record: any) => text || '--'],
    [
      'User Type',
      null,
      (text: any, record: any) => (
        <Space size="middle">
          {record.owner_relationship != null ? user_status[record.owner_relationship - 1][1] : null}
        </Space>
      ),
    ],
    [
      'status',
      'status',

      (text: number, record: any) => <Space size="middle">{user_type_status[text]}</Space>,
    ],
    [
      'Actions',
      null,
      (text: any, record: any) => (
        <Space size="middle">
          {' '}
          <a onClick={goTo.bind(this, record)}>Detail</a>
        </Space>
      ),
    ],
  ]);

  return (
    <>
      <Tabs defaultActiveKey="0">
        {dataRow.map((item: any, index: number) => {
          return (
            <TabPane tab={item.name} key={index}>
              <Row gutter={16} style={{ marginLeft: 9 }}>
                <Col>Address:</Col>
                <Col>
                  {item.owner.buildingNumber +
                    ' #' +
                    item.owner.floorNumber +
                    ' -' +
                    item.owner.roomNumber +
                    ', ' +
                    item.owner.addressAndpostalCode}
                </Col>
              </Row>
              {item.unit.map((unit: any, uindex: any) => {
                return (
                  <div key={uindex}>
                    <Row gutter={32}>
                      <Col span={20}>
                        <Table
                          title={() => {
                            return (
                              <div style={{ height: 80, position: 'relative' }}>
                                <div style={{ position: 'absolute', left: 0, bottom: 16 }}>
                                  <Row gutter={18}>
                                    <Col>Unit No:</Col>
                                    <Col>{unit.living}</Col>
                                  </Row>
                                </div>
                                <div style={{ position: 'absolute', right: 0, bottom: 16 }}>
                                  {props.deleteDisable ? null : (
                                    <Button
                                      type="primary"
                                      danger
                                      onClick={deleteUnit.bind(this, unit.living)}
                                    >
                                      Delete
                                    </Button>
                                  )}
                                </div>
                              </div>
                            );
                          }}
                          footer={() => ''}
                          rowKey={'id'}
                          dataSource={unit.member}
                          columns={key}
                          pagination={false}
                        ></Table>
                      </Col>
                      <Col span={4}>
                        <Row style={{ marginTop: 8 }}>
                          <div style={{ textAlign: 'center' }}>
                            <img width={80} height={80} src={unit.imgUrl} />
                            <br />
                            {item.owner.cdkCode}
                            <br />({user_code[item.owner.enable]})
                          </div>
                        </Row>
                      </Col>
                    </Row>
                  </div>
                );
              })}
            </TabPane>
          );
        })}
      </Tabs>
    </>
  );
};

export default TableShow;
