import React, { useEffect } from 'react';
import styles from './index.less';
import { Row, Col, Table, Space, Tabs, Button } from 'antd';
const { TabPane } = Tabs

import { objectColumns } from '@/utils/string';
import { size } from 'lodash';
import Toast from '../Toast/Toast';



const TableShow = (props: any) => {

  const { data } = props;

  const dataRow = data.rows;
  const goTo = (values: any, e: any) => {
    console.log(values)
    props.onSubmit(values)
  }
  const deleteUnit = (values: any, e: any) => {
    props.onChange(values)
  }
  useEffect(() => {
    console.log("组件入参")
    console.log(dataRow)
  }, [])
  // 
  // Contact Details
  // Email
  // cdk_code
  // Account Type	
  // User Status

  // ower_email: "535740436@qq.com"
  // ower_name: "测试"
  // ower_phone: "微微"

  // Owner/Family Member/Tenant
  // 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 = ["Not Used", "Used"]
  const key = objectColumns([
    ["User Name", "ower_name"],
    ["Contact Details", "ower_phone"],
    ["Email", "ower_email"],
    ["RelationShip", null, (text: any, record: any) => (<Space size="middle">{record.owner_relationship != null ? user_status[(record.owner_relationship) - 1][1] : null}</Space>)],
    ["status", null, (text: any, record: any) => (<Space size="middle">{user_type_status[record.enable]}</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, index) => {
            return (
              <TabPane tab={item.name} key={index}>
                <Row gutter={16}><Col>Address:</Col><Col>{((item).owner).addressAndpostalCode + " " + ((item).owner).buildingNumber + "#" + ((item).owner).floorNumber + "-" + ((item).owner).roomNumber}</Col></Row>
                {
                  (item.unit).map((unit: any, uindex: any) => {
                    return (
                      <div key={unit.living}>
                        <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={32}><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={"ower_name"} dataSource={unit.member} columns={key} pagination={false}></Table>
                          </Col>
                          <Col>
                            <Row>
                              <img width={80} src={unit.imgUrl} />
                            </Row>
                            <Row style={{ marginTop: 8 }}><div style={{ width: 80, textAlign: "center" }}>{item.owner.cdkCode}({user_code[item.owner.cdkStatus]})</div></Row>
                          </Col>
                        </Row>

                      </div>
                    )
                  })
                }
              </TabPane>
            )
          })
        }
      </Tabs>


    </>
  );
};

export default TableShow;
// User Name
// Contact Details
// Email
// cdk_code
// Account Type	
// User Status
// Actions

// address_and_postalCode: "广州石溪5463743"
// building_number: "01"
// cdk_code: 792239
// cdk_status: 1
// enable: 1
// floor_number: "5"
// ower_email: "535740436@qq.com"
// ower_name: "测试"
// ower_phone: "微微"
// room_number: "399"

{/* <div style={{ width: 80, height: 80, border: "1px solid #cccccc",padding:8,lineHeight:1,textAlign:"center",fontSize:12}}>
Activation Code Has Been Used/Is Inactive
</div> */}