import React, { useState, useEffect } from 'react';
import styles from './Guard.less';
import { Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
import { Link, useIntl, connect, Dispatch } from 'umi';

import Line from '../../../components/Line/Line';
import BackButton from '../../../components/BackButton/BackButton';
import TitleGet from '../../../components/TitleGet/TitleGet';
import { timestampToTime } from '../../../utils/time';

const Guard = (props: any) => {
  const { CurDataFollowDetail, dispatch, history } = props;

  console.log(CurDataFollowDetail);

  useEffect(() => {
    if (!CurDataFollowDetail) {
      history.goBack();
    }
  }, []);

  // 删除保安
  const handleClickBtn = (id: string) => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        dispatch({
          type: 'ServiceProvider/DelGuarder',
          playload: { id },
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  return CurDataFollowDetail ? (
    <div className={styles.base}>
      <div className={styles.item0}>
        <TitleGet title={'Edit Security Guard Account'} />
      </div>
      <div className={styles.item0_1}>Status：Normal</div>
      <div className={styles.item0_1}>
        Registration Date：
        {CurDataFollowDetail.createTime !== null
          ? timestampToTime(CurDataFollowDetail.createTime.time)
          : ''}
      </div>
      <div className={styles.item2}>
        <BackButton />
      </div>
      <div className={styles.clear0}></div>

      <div className={styles.item1}>Company Name</div>
      <div className={styles.item1_1}>{CurDataFollowDetail.companyName}</div>
      <div className={styles.clear1}></div>

      <div className={styles.item1}>User Name</div>
      <div className={styles.item1_1}>{CurDataFollowDetail.saferName}</div>
      <div className={styles.clear1}></div>

      <div className={styles.item1}>Contact Details</div>
      <div className={styles.item1_1}>{CurDataFollowDetail.saferPhone}</div>
      <div className={styles.clear1}></div>

      <div className={styles.item1}>Email</div>
      <div className={styles.item1_1}>{CurDataFollowDetail.saferEmail}</div>
      <div className={styles.clear1}></div>

      <Line />

      <Button onClick={handleClickBtn.bind(this, CurDataFollowDetail.id)}>Cancellation</Button>
    </div>
  ) : (
    <></>
  );
};

function mapStateToProps(state: any) {
  const { CurDataFollowDetail } = state.ServiceProvider;
  return {
    CurDataFollowDetail,
  };
}

export default connect(mapStateToProps)(Guard);
