import React from 'react';
import { Button, Space, Switch, Table, Tooltip, Modal, Select } from 'antd';
import Styles from './web.pc.module.less';
import { CheckOutlined, CloseOutlined, ExclamationCircleFilled } from '@ant-design/icons';
const { confirm } = Modal;
export default function render(props) {
    const { data, methods } = props;
    const { oakFullpath, oakDirty, oakExecutable, oakExecuting, applicationPassports, systemId, applications, passports, apArray, } = data;
    const { clean, execute, t, onCheckedChange, updateItem, checkLastOne } = methods;
    if (!(applications && applications.length > 0)) {
        return (<div>请先前往应用管理创建application</div>);
    }
    if (!(passports && passports.length > 0)) {
        return (<div>请先完成登录配置，启用登录方式</div>);
    }
    let columns = [
        {
            title: '',
            key: 'applicationName',
            dataIndex: 'aName',
            fixed: 'left',
        },
    ];
    const showConfirm = (apId, pId, aId) => {
        confirm({
            title: '当前application将无登录方式',
            icon: <ExclamationCircleFilled />,
            content: '关闭后，当前applicaion将无登录方式，可能影响用户登录',
            onOk() {
                onCheckedChange(apId, pId, aId, false);
            },
            onCancel() {
            },
        });
    };
    if (passports && passports.length > 0) {
        for (let idx = 0; idx < passports.length; ++idx) {
            columns.push({
                title: t(`passport:v.type.${passports[idx].type}`) + t('login'),
                dataIndex: 'passports[' + idx + ']',
                key: `${passports[idx].id} `,
                align: 'center',
                render: (_, { passports, aId }) => <Space direction="vertical">
                        <Tooltip title={passports[idx].disabled ? passports[idx].disabledTip : ''}>
                            <Switch disabled={passports[idx].disabled} checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} checked={passports[idx].checked} onChange={(checked) => {
                        if (!checked && checkLastOne(aId, passports[idx].apId)) {
                            showConfirm(passports[idx].apId, passports[idx].pId, aId);
                        }
                        else {
                            onCheckedChange(passports[idx].apId, passports[idx].pId, aId, checked);
                        }
                    }}/>
                        </Tooltip>
                    </Space>
            });
        }
        columns.push({
            title: '默认登录方式',
            key: 'default',
            dataIndex: 'defaultValue',
            fixed: 'right',
            width: 140,
            render: (_, { defaultOptions, defaultValue, aId }) => <>
                    <Select value={defaultValue} style={{ width: 120 }} onChange={(value) => { updateItem({ isDefault: true, }, value); }} options={defaultOptions}/>
                </>
        });
    }
    return (<>
            <div className={Styles.btns}>
                <Button disabled={!oakDirty} type="primary" danger onClick={() => clean()} style={{
            marginRight: 10,
        }}>
                    重置
                </Button>
                <Button disabled={!oakDirty} type="primary" onClick={async () => {
            await execute();
        }}>
                    确定
                </Button>
            </div>
            <Table columns={columns} dataSource={apArray} pagination={false} scroll={{ x: 1200 }}/>
        </>);
}