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';

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(() => {
    TosSecurityGuarderGet({ companyName: SaveChooseData.providerName })
  }, []);

  const [showList, setShowList] = useState([])
  useEffect(() => {
    console.log(CurDataFollow)
  }, [CurDataFollow]);


  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 printContent = (comment: any) => {
    console.log(comment)
  }


  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>
      ),
    },
  ];

  return (
    <div className={styles.base}>


      <TitleBack title="Service Provider Details" />


      <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} {SaveChooseData.contactEmail}</div>
        </div>

        <div className={styles.box5}>
          <div className={styles.box5item1}>Services Available</div>
          <div className={styles.box5item2}>Cleaning，Security Guard</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"} onSubmit={printContent} />
            : <></>
        }

        <div className={styles.box7}>
          <div className={styles.box1item1}>Security Guard Account</div>
        </div>
      </div>
      <Table rowKey={"id"} style={{ marginTop: 16 }} dataSource={CurDataFollow} columns={columns} pagination={pagination} />

    </div>
  );
};

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