/**
 * Title: 地产详情
 * Routes:
 *   - ./src/pages/routes
 */
import React, { useState } from 'react';
import { connect, DispatchProp, routerRedux } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import { Button, Modal, Input } from 'antd';
import Header from '@/components/Header';
import ChoiceModal from '@/components/ChoiceModal';
import AccountItem from '@/components/AccountItem';
import { UserModelState } from '@/models/user';

import styles from './style.less';
import { IdentityModelState } from './model';

const idtypes = [
  {key:'idcard', value:'身份证'},
  {key:'passport', value:'护照'}]

const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState> = ({
  dispatch,
  user,
  nameEditable,
  nameInput,
  nameSubmitting,
  real1Submitting
}) => {

  const [idtypesVisible, setIdtypesVisible] = useState(false);

  const onItemSelected = (key: string) => {
    setIdtypesVisible(false);
//    dispatch({ type: 'user/changeIdtype', payload: key });
  };

  const idtypeModal = (
    <ChoiceModal
      closable={false}
      data={idtypes}
      selectedKey='idcard'
      onItemSelected={onItemSelected}
      visible={idtypesVisible}
      onCancel={() => setIdtypesVisible(false)}
      title={formatMessage({ id: 'identity.chooseIdtype' })}
    />
  );

  return (
    <div className={styles.container}>
      <Header
        className={styles.header}
        title={formatMessage({ id: 'identity.title' })}
      />
      {user && <div className={styles.content}>
        <AccountItem
          className="group"
          title="identity.realname"
          message={user.realname}
          showGo={false}
          onClick={() => dispatch({
            type: 'identity/onUpdateState',
            nameEditable: true,
            nameInput: user.realname,
          })}
        />
        <AccountItem
          className="group"
          title="identity.nationality"
          message={user.nationality}
//          preview={fromLangToText(lang)}
//          onClick={() => setNationsVisible(true)}
        />
        <AccountItem
          className="group"
          title="identity.idtype"
          message={user.idtype}
//          preview={fromLangToText(lang)}
          onClick={() => setIdtypesVisible(true)}
        />
        <AccountItem
          className="group"
          title="identity.idcode"
          message={user.idcode}
//          onClick={() => dispatch(routerRedux.push('/chphone'))}
        />
        <AccountItem
          className="group"
          title="identity.idphoto"
//          onClick={() => dispatch(routerRedux.push('/lgpwd'))}
        />
// 此处应当加一个label，显示后台驳回理由
        <Button
          className={styles.input}
          type="primary"
          size="large"
          loading={real1Submitting}
          onClick={() => dispatch({ type: 'identity/real1submit' })}
        >{formatMessage({ id: 'identity.real1btn' })}</Button>
      </div>}
    </div>
  );
};

export default connect(
  ({ user, account }: any) => ({ ...user, ...account }),
)(IdentityPage);