import React, { useState, useEffect } from 'react';
import styles from './Detail.less';
import { Button, Table, Space, message, Modal, Spin } from 'antd';

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

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

const { confirm } = Modal;

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

  const status = ['Normal', 'Cancelled'];

  const [loading, setLoding] = useState(false);

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

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

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

  // 监听保安数据
  // useEffect(() => {

  //   if (CurDataFollow) {
  //     // 处理数据
  //   }

  // }, [CurDataFollow]);

  // 保安详情页
  const goToGuard = (values: any, e: any) => {
    GuarderById(values);
    history.push(location.pathname + '/Guard?saferName=' + values.saferName);
  };

  // 分页配置
  const pagination = {
    current: 1,
    total: CurDataFollow != null ? CurDataFollow.length : CurDataFollow,
  };

  // 列表数据
  const columns = [
    { title: 'User Name', dataIndex: 'saferName' },
    { title: 'Service Community', dataIndex: 'projectName' },
    { title: 'Job Title', dataIndex: 'jobTitle' },
    {
      title: 'User Status',
      dataIndex: 'cdkStatus',
      render: (text: number, record: any) => <div>{status[text]}</div>,
    },
    {
      title: 'Actions',
      render: (text: any, record: any) => (
        <Space size="middle">
          <a onClick={goToGuard.bind(this, record)}>Detail</a>
        </Space>
      ),
    },
  ];

  // 注销
  const handleClick = (id: string) => {
    const permissionArr = JSON.parse(localStorage.getItem('permission') || '');
    if (permissionArr.indexOf('9') < 0) {
      message.error('No Permissions!!!', 3);
      return;
    }
    confirm({
      title: 'Warning',
      icon: <ExclamationCircleOutlined />,
      content: 'Are you sure want to Delete?',
      onOk() {
        setLoding(true);
        dispatch({ type: 'ServiceProvider/DelServiceProvider', playload: { id } });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  // 监听注销结果
  useEffect(() => {
    console.log(Result);
    if (Result !== null) {
      dispatch({ type: 'ServiceProvider/ResultClear' });
      setLoding(false);
      if (Result) {
        message.success('Logout successful!');
        console.log('跳转页面');
        history.goBack();
      } else {
        message.error('Logout failed. Please try again!', 3);
      }
    }
  }, [Result]);

  return (
    <div className={styles.base}>
      <Spin spinning={loading}>
        {SaveChooseData !== null ? (
          <>
            <TitleBack title="Service Provider Details" />
            {SaveChooseData.enable === 'Normal' ? (
              <div className={styles.writeOff}>
                <Button
                  icon={<PoweroffOutlined />}
                  type="primary"
                  danger
                  onClick={handleClick.bind(this, SaveChooseData.id)}
                >
                  Delete
                </Button>
              </div>
            ) : (
                <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={'Close'} />
              ) : (
                  <></>
                )}
            </div>

            <div className={styles.box7}>
              <div className={styles.box1item1}>Security Guard Account</div>
            </div>
            <Table
              rowKey={'id'}
              style={{ marginTop: 16 }}
              dataSource={
                CurDataFollow && CurDataFollow.filter((v: { deleted: number }) => v.deleted !== 1)
              }
              columns={columns}
              pagination={pagination}
            />
          </>
        ) : null}
      </Spin>
    </div>
  );
};

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