import React, { useState, useEffect } from 'react';
import styles from './Detail.less';
import { Input, Button, Table, Space, Pagination, Tooltip, Checkbox } from 'antd';

import { Link, useIntl, connect, Dispatch, history } from 'umi';

import ShowOptions from '../../../components/ShowOptions/index';
import TitleBack from '../../../components/TitleBack/TitleBack';
import { PoweroffOutlined } from '@ant-design/icons';

const Detail = (props: any) => {
  const { dispatch, Data, CurDataFollow, location, SaveChooseData } = props;

  const TosSecurityGuarderGet = (values: any) => {
    dispatch({ type: 'ServiceProvider/TosSecurityGuarderGet', playload: values });
  };

  const GuarderById = (values: any) => {
    dispatch({ type: 'ServiceProvider/GuarderById', playload: values });
  };

  useEffect(() => {
    if (SaveChooseData) {
      TosSecurityGuarderGet({ companyName: SaveChooseData.providerName });
    } else {
      history.goBack();
    }
  }, []);

  const goToGuard = (values: any, e: any) => {
    GuarderById(values);
    history.push(location.pathname + '/Guard?saferName=' + values.saferName);
  };
  const pagination = {
    defaultCurrent: 1,
    total: CurDataFollow != null ? CurDataFollow.length : CurDataFollow,
  };

  const columns = [
    { title: 'User Name', dataIndex: 'saferName' },
    { title: 'Service Community', dataIndex: 'projectName' },
    { title: 'Job Title', dataIndex: 'cdkCode' },
    { title: 'User Status', dataIndex: 'cdkStatus' },
    {
      title: 'actions',
      render: (text: any, record: any) => (
        <Space size="middle">
          {' '}
          <a onClick={goToGuard.bind(this, record)}>Detail</a>
        </Space>
      ),
    },
  ];

  const handleClick = () => {
    console.log('注销单元');
  };

  return (
    <div className={styles.base}>
      {SaveChooseData !== null ? (
        <>
          <TitleBack title="Service Provider Details" />
          {/* <div className={styles.writeOff}>
            <Button icon={<PoweroffOutlined />} type="primary" danger onClick={handleClick}>
              Write Off
            </Button>
          </div> */}
          <div className={styles.bigbox}>
            <div className={styles.box0}>
              <div className={styles.box0item1}></div>
              {/* <div className={styles.box0item2}>{SaveChooseData.serviceCommunityList}</div> */}
            </div>
            <div className={styles.box1}>
              <div className={styles.box1item1}>Company Name</div>
              <div className={styles.box1item2}>{SaveChooseData.providerName}</div>
            </div>

            <div className={styles.box2}>
              <div className={styles.box2item1}>Office Address</div>
              <div className={styles.box2item2}>{SaveChooseData.providerAddress}</div>
            </div>

            <div className={styles.box3}>
              <div className={styles.box3item1}>Person In Charge</div>
              <div className={styles.box3item2}>{SaveChooseData.contactName}</div>
            </div>

            <div className={styles.box4}>
              <div className={styles.box4item1}>Contact Details</div>
              <div className={styles.box4item2}>
                {SaveChooseData.contactPhone} &nbsp;&nbsp;&nbsp;&nbsp; {SaveChooseData.contactEmail}
              </div>
            </div>

            <div className={styles.box5}>
              <div className={styles.box5item1}>Services Available</div>
              <div className={styles.box5item2}>{SaveChooseData.serviceScope}</div>
            </div>

            <div className={styles.box6}>
              <div className={styles.box1item1}>Service Community</div>
            </div>
            {SaveChooseData.serviceCommunityList != null ? (
              <ShowOptions
                list={SaveChooseData.serviceCommunityList}
                defaultValue={'Put It Away'}
              />
            ) : (
              <></>
            )}
          </div>
          {SaveChooseData.serviceScopeList.some((v: any) => v === 'Security Guards') ? (
            <>
              <div className={styles.box7}>
                <div className={styles.box1item1}>Security Guard Account</div>
              </div>
              <Table
                rowKey={'id'}
                style={{ marginTop: 16 }}
                dataSource={CurDataFollow}
                columns={columns}
                pagination={pagination}
              />
            </>
          ) : null}
        </>
      ) : null}
    </div>
  );
};

function mapStateToProps(state: any) {
  const { Data, CurDataFollow, SaveChooseData } = state.ServiceProvider;
  return {
    Data,
    CurDataFollow,
    SaveChooseData,
  };
}
export default connect(mapStateToProps)(Detail);
