/**
 * Title: 地产详情
 * Routes:
 *   - ./src/pages/routes
 */
import React, { useEffect } from 'react';
import { connect, DispatchProp } from 'dva';
import { Spin, Tabs } from 'antd';
import { formatMessage } from 'umi-plugin-locale';
import FittedImage from 'react-fitted-image';
import { EstateModelState, PageTab } from './model';
import { ExtModelState } from '@/models/ext';
import { PageState, EstateType } from '@/types/common';
import Header from '@/components/Header';
import Info, { InfoItem } from '@/components/Info';
import Failure from '@/components/Failure';

import styles from './style.less';

const EstatePage: React.FC<DispatchProp & EstateModelState & ExtModelState> = ({
  dispatch,
  tab,
  estate,
  estateExt,
  pageState,
}) => {
  useEffect(() => {
    dispatch({ type: 'estate/load', payload: estateExt });
    return () => {
      dispatch({ type: 'estate/clear' });
    };
  }, []);

  if (!estateExt) return null;

  let body = null;

  if (pageState === PageState.Failure) {
    body = (
      <div className={styles.loading}>
        <Failure />
      </div>
    );
  }

  if (pageState === PageState.Pending) {
    body = (
      <div className={styles.loading}><Spin /></div>
    );
  }

  if (pageState === PageState.Success && estate) {
    const image = (
      <FittedImage
        className="image"
        src={estate.image || ''}
        fit="cover"
      />
    );
    const record = (
      <div>
        <Info title={formatMessage({ id: 'estate.title1' })}>
          <InfoItem
            title={formatMessage({ id: 'estate.inPrice' })}
            info={`${estate.inPrice} LOG`}
            type="primary"
          />
          <InfoItem
            title={formatMessage({ id: 'estate.expectProfit' })}
            info={estate.profitShow}
            type="primary"
          />
          <InfoItem
            title={formatMessage({ id: 'estate.inTime' })}
            info={estate.inTime}
            type="primary"
          />
          <InfoItem
            title={formatMessage({ id: 'estate.lockTime' })}
            info={estate.lockTime}
            type="primary"
          />
        </Info>
        {estate.type === EstateType.Sold &&
          <Info title={formatMessage({ id: 'estate.title2' })}>
            <InfoItem
              title={formatMessage({ id: 'estate.outPrice' })}
              info={`${estate.outPrice} LOG`}
              type="secondary"
            />
            <InfoItem
              title={formatMessage({ id: 'estate.taxfee' })}
              info={`${estate.taxfeeAmount} LOG`}
              type="secondary"
            />
            <InfoItem
              title={formatMessage({ id: 'estate.actualProfit' })}
              info={`${estate.profitPrice} LOG`}
              type="secondary"
            />
            <InfoItem
              title={formatMessage({ id: 'estate.outTime' })}
              info={estate.outTime}
              type="secondary"
            />
          </Info>
        }
      </div>
    );
    const detail = (
      <div className="detail">{estate.desc}</div>
    );
    body = (
      <div className={styles.content}>
        <div className="banner">
          {image}
        </div>
        <div className="banner overlay">
          {image}
        </div>
        <Tabs
          className="tab-indicator"
          size="small"
          activeKey={tab}
          onChange={value => dispatch({ type: 'estate/onUpdateState', payload: { tab: value } })}
        >
          <Tabs.TabPane key={PageTab.Record} tab={formatMessage({ id: 'estate.tab1' })} />
          <Tabs.TabPane key={PageTab.Detail} tab={formatMessage({ id: 'estate.tab2' })} />
        </Tabs>
        <div className="tab-content">
          {tab === PageTab.Record ? record : detail}
        </div>
      </div>
    );
  }

  return (
    <div className={styles.estate}>
      <Header
        className={styles.header}
        title={estateExt.name}
      />
      <div className={styles.body}>{body}</div>
    </div>
  );
};

export default connect(
  ({ estate, ext }: any) => ({ ...estate, ...ext }),
)(EstatePage);
