import React, { Component } from 'react'
import { List } from 'antd'
import { api } from 'common/api'
import { AntIcon, ModalForm, QueryTableActions } from 'components'
import PasswordForm from './password'

import Mail from './mail'
import Phone from './phone'

const apiAction = {
    updatePwd: api.sysUserUpdatePwd,
}

export default class form extends Component {
    updatePwdForm = React.createRef()
    mailForm = React.createRef()
    mhoneForm = React.createRef()

    onOpen(modal) {
        modal.current.open()
    }

    render() {
        const { user, loadData } = this.props

        const index = []
        //密码
        index.push({
            title: '登录密码',
            description:
                '安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。',
            // extra: (
            //     <div>
            //         当前密码强度为:
            //         {
            //             [
            //                 <span class="text-error">弱</span>,
            //                 <span class="text-warning">中</span>,
            //                 <span class="text-success">强</span>,
            //             ][user.securityLevel - 1]
            //         }
            //     </div>
            // ),
            done: true,
            action: () => {
                this.onOpen(this.updatePwdForm)
            },
        })
        //手机
        index.push({
            title: '手机绑定',
            description: (
                <div>
                    手机号可以直接用于登录、找回密码等。
                    {user.phone && (
                        <>
                            您已绑定了手机<b>{user.phone}</b>
                        </>
                    )}
                </div>
            ),
            done: !!user.phone,
            action: () => {
                this.onOpen(this.mhoneForm)
            },
        })
        //邮箱
        index.push({
            title: '邮箱绑定',
            description: (
                <div>
                    安全邮箱可以直接用于登录、找回密码等。
                    {user.email && (
                        <>
                            您已绑定了邮箱<b>{user.email}</b>
                        </>
                    )}
                </div>
            ),
            done: !!user.email,
            action: () => {
                this.onOpen(this.mailForm)
            },
        })

        return (
            <>
                <List
                    dataSource={index}
                    itemLayout="vertical"
                    renderItem={item => (
                        <List.Item
                            extra={item.extra}
                            actions={[
                                item.done == true ? (
                                    <QueryTableActions>
                                        <span className="text-success">
                                            <AntIcon className="mr-xxs" type="check-circle" />
                                            已设置
                                        </span>
                                        <a onClick={item.action}>修改</a>
                                    </QueryTableActions>
                                ) : (
                                    <QueryTableActions>
                                        <span className="text-warning">
                                            <AntIcon className="mr-xxs" type="exclamation-circle" />
                                            未设置
                                        </span>
                                        <a onClick={item.action}>设置</a>
                                    </QueryTableActions>
                                ),
                            ]}
                        >
                            <List.Item.Meta description={item.description} title={item.title} />
                        </List.Item>
                    )}
                />
                {/* <ModalForm title={`更新密码`} action={apiAction.updatePwd} ref={this.updatePwdForm}> */}
                <PasswordForm ref={this.updatePwdForm} loadData={loadData} />
                {/* </ModalForm> */}
                <Phone ref={this.mhoneForm} loadData={loadData} />
                <Mail ref={this.mailForm} loadData={loadData} />
            </>
        )
    }
}
