import React, { useState, useEffect, useRef } from 'react';

import styles from './index.less';
import { Form, Input, Spin, Table, Space, Button } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

import { urlEncode, filterObj, filterObjbyTg } from '@/utils/method';

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

import TitleSearch from '../../../components/TitleSearch/TitleSearch';

const ServiceProviderManagement = (props: any) => {
  const { formatMessage } = useIntl();

  const [pageNum, setPageNum] = useState(1)

  const [loading, setLoading] = useState(false)

  const [testData, setTestData] = useState(null as any);

  const { dispatch, location, Data, CommunityList } = props;
  const RA = (index: any, values: any) => { dispatch({ type: 'ServiceProvider/RA', playload: { index: index, body: values } }) };
  const TosTosServiceProviderGet = (values: any) => {
    dispatch({
      type: 'ServiceProvider/TosTosServiceProviderGet',
      playload: values
    })
  };

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

  // const GetList = () => {
  //   if (CommunityList != null) {
  //     TosTosServiceProviderGet({
  //       providerName: "",
  //       serviceCommunityList: CommunityList
  //     })
  //   }
  // }
  // useEffect(() => {
  //   console.log(CommunityList)
  //   GetList()
  // }, [CommunityList]);

  const goToDetail = (values: any, e: any) => {
    SaveChooseData(values)
    history.push(location.pathname + '/Detail')
  }
  const goToCreate = () => {
    SaveChooseData(null)
    history.push(location.pathname + '/Edit')
  }
  const goToEdit = (values: any, e: any) => {
    SaveChooseData(values)
    history.push(location.pathname + '/Edit')
  }
  const goToServices = () => { history.push(location.pathname + '/Services') }

  const columns = [
    { title: "Service Provider", dataIndex: 'providerName', },
    { title: "contact Name", dataIndex: 'contactName', },

    {
      title: "Contacts",
      dataIndex: 'contactPhone',
    },
    /*{ title: "Contact Details",dataIndex: 'contactEmail',},*/
    {
      title: "Services Available",
      dataIndex: 'serviceScope',
    },
    { title: "Account Status", dataIndex: 'enable', },
    {
      title: "Actions",
      render: (text: any, record: any) => (
        <Space size="middle"><a onClick={goToDetail.bind(this, record)}>Detail</a><a onClick={goToEdit.bind(this, record)}>edit</a></Space>
      ),
    },
  ];
  const dataSource = (values: any) => {
    let tmp = values;
    for (let items in tmp) {
      switch (tmp[items].enable) {
        case 0: tmp[items].enable = "unregistered"; break;
        case 1: tmp[items].enable = "registered"; break;
        case 2: break;
      }
    }
    for (let items in tmp) {
      switch (tmp[items].serviceScope) {
        case 0: tmp[items].serviceScope = "清洁"; break;
        case 1: tmp[items].serviceScope = "维修"; break;
        case 2: tmp[items].serviceScope = "保安"; break;
        case 3: tmp[items].serviceScope = "会计"; break;
      }
    }

    return tmp;
  }

  useEffect(() => {
    if (Data != null) {
      setLoading(false)
      console.log("核查的地方")
      console.log(Data)
    }
  }, [Data])

  useEffect(() => {
    //分页设置
    // if (location.query.pageNum != null) {
    //   setPageNum(parseInt(location.query.pageNum))
    // } else {

    // }
    setPageNum(1)

    setLoading(true)
    //获取数据
    TosTosServiceProviderGet({
      ...location.query,
      serviceCommunityList: (testData === null || testData.length === 0) ? CommunityList : testData,
      pageNum: 1
    })

  }, [location])

  const CallBackTitleSearch = (comment: any) => {
    console.log(comment)
    console.log(location.pathname)

    //页面搜索
    setTestData(comment.serviceCommunityList)
    history.push(location.pathname + urlEncode(filterObj({
      providerName: comment.providerName,
      serviceScope: comment.status,
      pageNum: location.query.pageNum || 1
    })))
  }

  const pageChange = (values: any) => {
    // setPageNum(values.current)
    console.log(values)
    /*页面跳转*/
    var tmp = filterObjbyTg(location.query, [])
    tmp["pageNum"] = values.current
    history.push(location.pathname + urlEncode(tmp))
  }


  const pagination = {
    current: pageNum,
    total: Data !== null ? Data.page.totalRow : null,
    showSizeChanger: false
  }


  return (

    <div className={styles.base}>
      {/* 头部组件 */}

      <TitleSearch
        listkey={["providerName"]}
        list={["Service Provider"]}
        status={[{
          name: ["status", "服务范围"],
          data: [[null, "全部"], [0, "清洁"], [1, "维修"], [2, "保安"], [3, "会计"]]
        }]}
        community={"serviceCommunityList"}
        onSubmit={CallBackTitleSearch} />

      {/* 内容组件 */}
      <div className={styles.box2}>
        <button className={styles.buttonAdd2} onClick={goToServices}>Avail Services</button>
        <button className={styles.buttonAdd} onClick={goToCreate}>Create New</button>
      </div>

      {/* 列表组件 */}
      <Spin spinning={Data != null ? false : true}>
        <Table size="small" rowKey={"id"}
          style={{ marginTop: 16 }}
          loading={loading}
          columns={columns}
          dataSource={Data != null ? dataSource(Data.rows) : null}
          pagination={Data != null ? pagination : {}}
          onChange={pageChange}
        />
      </Spin>

    </div>

  );
};

function mapStateToProps(state: any) {
  const { Data } = state.ServiceProvider;
  const { DataProvider } = state.User;
  const { CommunityList } = state.Init;
  return {
    Data,
    DataProvider,
    CommunityList
  };
}

export default connect(mapStateToProps)(ServiceProviderManagement);
