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

import styles from './css/index.less';
import { Input ,Tabs,Table,Space, Button} from 'antd';
const { TabPane } = Tabs;

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


import { objectColumns } from '../../../utils/string';
import { timestampToTime } from '../../../utils/time';
import TitleSearch from '../../../components/TitleSearch/TitleSearch';


// const managerFeeStatusDes= ["未交", "已交", "已退"]
// const marginFeeStatusDes = ["未交", "已交", "未退", "已退部分", "已退全部"]
// const statusDes = ["全部", "已申请", "已预订", "已使用", "已取消", "已完成"]

const managerFeeStatusDes= ["Not paid", "Paid", "Returned"]
const marginFeeStatusDes = ["Not paid", "Paid", "Not Returned", "Returned part", "Returned all"]
const statusDes = ["All", "Applied", "Reserved", "Used", "Cancelled", "Completed"]


import { getUrlLastParams } from '../../../utils/string';

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

  const { dispatch, location, Data, Data2, token,DataSave,curString,Result } = props;

  
  const RA = (index:any,values: any) => { 
    console.log(values)
    dispatch({ 
      type: 'FacilityBookings/RA', 
      playload: {index:index, body:values } 
    }) 
  };
  const SA = (values: any) => { dispatch({ type: 'FacilityBookings/SA', playload: values }) };
  const QA = (values: any) => { dispatch({ type: 'FacilityBookings/QA', playload: values }) };
  
  const CA = () => { dispatch({ type: 'FacilityBookings/CA',  playload: null }) };

    
  const [loading, setLoading] = useState(false)
  const [columns, setColumns] = useState([])
  const [columns2, setColumns2] = useState([])


 
  const goToFunction = () => {
    if(curString.tab==2){CA()}
    history.push(location.pathname + (curString.tab==1?'/Booking':'/Adding'))
  }
  const goToDetail = (values:any) => {
    SA(values)
    console.log("准备页面跳转")
    console.log(curString)
    history.push(location.pathname + '/Detail')
  }
  const makeOperator = (values: any,index:any, e: any) => {
    
    const path = ['/FacilityDetail', '/FacilityEdit', '/FacilityApply']
    SA(values)
    console.log("准备页面跳转")
    console.log(curString)
    history.push(location.pathname + path[index])
  }
  

  useEffect(() => {

  
    const key = [
      ["Service Community", "communityName"],
      ["User Name", "accountName"],
      ["Facility Bookings", "facilityTitle"],      
      ["Order Time", null, (text: any, record: any) => (<div>{timestampToTime(record.createTime.time)}</div>)],

      ["Booking Schedule", "subscribeDate"],
      ["Fee", "managerFeeStatus",(text: any) => (<div>{managerFeeStatusDes[text]}</div>)],
      ["Deposit", "marginFeeStatus",(text: any) => (<div>{marginFeeStatusDes[text]}</div>)],
      ["Status", "status", (text: any) => (<div>{statusDes[text]}</div>)],
      
      ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a onClick={goToDetail.bind(this,record)}>Detail</a></Space>)],
    ]
    const key2 = [
      ["Community", "communityName"],
      ["Facilty", "facilityName"],
      ["Open Time", "categoriesOpenTime"],
      ["Action", null, (text: any, record: any) => (<Space size="middle">
        <a onClick={makeOperator.bind(this,record,0)}>Detail</a>
        <a onClick={makeOperator.bind(this,record,1)}>Edit</a>
        <a onClick={makeOperator.bind(this,record,2)}>Booking</a>
      </Space>)]
    ]   
    setColumns(objectColumns(key))
    setColumns2(objectColumns(key2))     
    console.log("页面刷新")
    console.log(DataSave)
    console.log(curString)
    if (curString.tab == 1) {
      RA(9, { userToken: token, pageNum: curString.curPage, subscribeDate: curString.subscribeDate, status: curString.status,communityNameList:curString.communityNameList  })
    } else {
      RA(8,{ userToken: token, pageNum:  curString.curPage2 })
    }
    
  },[]);

  useEffect(() => {
    setLoading(false)
  }, [Data,Data2]); 


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

    if (curString.tab == 1) {  
      if (comment.communityName != null || comment.key != null || comment.status != null) {  
        var tmp = curString      
        tmp.subscribeDate = comment.key
        if (comment.status == null||comment.status==undefined) {
          tmp.status = 0; 
        } else {
          tmp.status = comment.status
        }
        tmp.communityNameList = comment.communityName
        tmp.curPage=1
        QA(tmp) 
        console.log(tmp)
        //中断
        RA(9, { userToken: token, pageNum: "1", subscribeDate: tmp.subscribeDate, status: tmp.status,communityNameList:comment.communityName })
      }
    } else {
      if (comment.communityName != null || comment.facilityName != null) {
        var tmp = curString      
        tmp.communityNameList = comment.communityName
        tmp.facilityName = comment.facilityName
        tmp.curPage=1
        QA(tmp) 
        RA(8, {communityNameList: comment.communityName, facilityName: comment.facilityName, pageNum: "1"})
                                    
      }
    }
  }
  function TabCallback(tab: any) {
    setLoading(true)
    var tmp = curString      
    tmp.tab = tab
    QA(tmp) 
    if (tab == 1) {
        RA(9, { userToken: token, pageNum: curString.curPage, subscribeDate: curString.subscribeDate, status: curString.status,communityNameList:curString.communityNameList })
    } else {
        RA(8,{ userToken: token, pageNum: curString.curPage2 })
    }
  }
  function Pagechange(current: any, pageSize: any) {  
    setLoading(true)
    if (curString.tab == 1) {
      var tmp = curString
      tmp.curPage = current  
      QA(tmp)  
      RA(9, { userToken: token, pageNum: current, subscribeDate: curString.subscribeDate, status: curString.status,communityNameList:curString.communityNameList})

    } else {
      var tmp = curString
      tmp.curPage2 = current  
      QA(tmp)          
      if (curString.communityNameList != null) {
        RA(8, { userToken: token, pageNum: current, communityNameList: curString.communityNameList})
      } else {
        RA(8, { userToken: token, pageNum: current,})
      }
    }    
  }



  return (
    <div className={styles.base}>       
        {/* 头部组件 */}
      {
        curString.tab == 1 ?
        <>
        <TitleSearch
              status={[{
                name: ["status", "Order status"],
                data: [[0, "All"], [1, "Applied"], [2, "Reserved"], [3, "Used"], [4, "Cancelled"]]
              }]}
        time={["key", "Booking time "]}
        community={"communityName"}  
        checklist={curString.communityNameList!=null?curString.communityNameList:null}
        onSubmit={CallBackTitleSearch} />
        </> :
        <>
        <TitleSearch
        listkey={['facilityName']}    list={['Facility name']}
        community={"communityName"}
        onSubmit={CallBackTitleSearch} />
        </>
      }  


      <div style={{position:"relative",height:40}}>
            <Button type="primary" style={{ position: "absolute", right: 0 }} onClick={goToFunction}>{curString.tab==1?"Booking":"Add Facility"}</Button>
      </div>    

      <Tabs defaultActiveKey={curString.tab.toString()} onChange={TabCallback}>   
        <TabPane tab="Facility Bookings" key="1">  
        <Table loading={loading} rowKey="id" style={{ marginTop: 16 }} dataSource={Data.data } columns={columns} pagination={{ current: curString.curPage, total: Data.total.totalRow, showSizeChanger: false, onChange:Pagechange }} />  
        </TabPane>
        
        <TabPane tab="Facility Management" key="2">     
          <Table loading={loading} rowKey="id" style={{ marginTop: 16 }} dataSource={Data2.data} columns={columns2} pagination={{ current: curString.curPage2, total: Data2.total.totalRow, showSizeChanger: false, onChange: Pagechange }} />  
        </TabPane>
      </Tabs>
      
    </div>
  );
};

function mapStateToProps(state:any) {
  const { Data, Data2,DataSave,curString,Result } = state.FacilityBookings;
  const { token } = state.login;  
  return {
    Data,
    Data2,
    DataSave,
    curString,
    Result,
    token
  };
}
export default connect(mapStateToProps)(FacilityBookings);


// status：预约设施状态 0:全部 1：已申请 2：已预订 3：已使用 4：已取消 5：已完成
// manager_fee_status：管理费 0：未 1：已交 2：已退
// margin_fee_status：押金 0：未 1：已交 2：未退 3：已退部分 4：已退全部 5：
