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

import { connect } from 'umi';

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

const { confirm } = Modal;
const AccoutingContent = (props: {
  SaveChooseData: any;
  dispatch: any;
  Result: Boolean;
  history: any;
}) => {
  const { SaveChooseData, dispatch, Result, history } = props;

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

  const goToReturn = () => {
    history.goBack();
  };

  useEffect(() => {
    console.log(SaveChooseData);
    if (!SaveChooseData) {
      goToReturn();
    }
  }, []);

  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() {
        setLoading(true);
        dispatch({ type: 'ServiceProvider/DelServiceProvider', playload: { id } });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  useEffect(() => {
    console.log(Result);
    if (Result !== null) {
      dispatch({ type: 'ServiceProvider/ResultClear' });
      setLoading(false);
      if (Result) {
        message.success('Logout successful!');
        history.goBack();
      } else {
        message.error('Logout failed. Please try again!');
      }
    }
  }, [Result]);

  const copy = () => {
    const copyEle = document.querySelector('#copy'); // 获取要复制的节点
    const range = document.createRange(); // 创造range
    window.getSelection()?.removeAllRanges(); //清除页面中已有的selection
    range.selectNode(copyEle as any); // 选中需要复制的节点
    window.getSelection()?.addRange(range); // 执行选中元素
    const copyStatus = document.execCommand('Copy'); // 执行copy操作
    // 对成功与否定进行提示
    if (copyStatus) {
      message.success('Copy Success');
    } else {
      message.error('Copy Failure,Please copy manually');
    }
    window.getSelection()?.removeAllRanges(); //清除页面中已有的selection
  };

  return (
    <div className={styles.base}>
      {SaveChooseData ? (
        <Spin spinning={loading}>
          {/* 头部组件 */}
          <div className={styles.box}>
            <div className={styles.item1}>Accounting information</div>
            <button className={styles.item3} onClick={goToReturn}>
              Back
            </button>
          </div>

          {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.box1}>
            <div className={styles.box1item1}>Company Name</div>
            <div className={styles.box1item2}>{SaveChooseData.providerName}</div>
            <div className={styles.box1item3}>Office Address</div>
            <div className={styles.box1item4}>{SaveChooseData.providerAddress}</div>
          </div>
          <Line />
          <div style={{ marginBottom: 28 }}>Service Community</div>
          <ShowOptions list={SaveChooseData.serviceCommunityList} />
          <div className={styles.box2}>
            <div className={styles.box2item1}>Services Available</div>
            <div className={styles.box2item2}>Accounting</div>
          </div>

          <div className={styles.box2}>
            <div className={styles.box2item1}>Person In Charge</div>
            <div className={styles.box2item2}>{SaveChooseData.contactName}</div>
          </div>

          <div className={styles.box3}>
            <div className={styles.box3item1}>Contact Details</div>
            <div className={styles.box3item2}>{SaveChooseData.contactPhone}</div>
            <div className={styles.box3item3}>{SaveChooseData.contactEmail}</div>
          </div>
          <div className={styles.box4}>
            <div className={styles.box3item1}>Upload the address</div>
            <div className={styles.box3item2} id="copy">
              http://bill.huahuico.com/
            </div>
            <Button size="small" className={styles.box3item3} onClick={copy.bind(this)}>
              复制
            </Button>
          </div>
        </Spin>
      ) : (
          <></>
        )}
    </div>
  );
};

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

export default connect(mapStateToProps)(AccoutingContent);
