import { Space, Table, Button, Popconfirm, notification, Divider, Checkbox, Spin } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../SchemeConfig.less'
import VisibleRoleModal from '@/pages/platformCenter/messageManage/projectManage/components/RolseSelect/VisibleRoleModal'
import {
    PlusOutlined
} from '@ant-design/icons';
import {
    deleteConfig, setServiceType, SetServiceConfig, GetMaplayerByTerminalType
} from '@/services/webConfig/api';
import {
    UserAddOutlined
} from '@ant-design/icons';
import AddModal from './AddModal'
const VectorData = props => {
    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
    const [schemename, setSchemename] = useState([]);
    const [record, setRecord] = useState({}); //选中关联角色的方案名
    const [webCurrent, setWebCurrent] = useState(0); // web列表下标
    const [handCurrent, setHandCurrent] = useState(0); // hand列表下标
    const [webData, setWebData] = useState([]); // web数据
    const [handData, setHandData] = useState([]); //手持数据
    const [visible, setVisible] = useState(false); // 弹窗
    const [flag, setFlag] = useState(0); // 更新list
    const [handStatus, setHandStatus] = useState([]); // 更新状态
    const [webStatus, setWebStatus] = useState([]); // 更新状态
    const [type, setType] = useState(''); // 弹窗类型
    const [checkLoading, setCheckLoading] = useState(false)
    const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
    const columns = [
        {
            title: '默认方案',
            align: 'center',
            key: 'url',
            render: (text, record, index) => (
                <Space>
                    <Checkbox
                        checked={webStatus[index + webCurrent * 5]}
                        onChange={e => {
                            onChangeCheck(e, record, index + webCurrent * 5);
                        }}
                    />
                </Space>
            ),
        },
        {
            title: '方案名',
            dataIndex: 'schemename',
            key: 'schemename',
            align: 'center'
        },
        {
            title: '关联角色',
            align: 'center',
            key: 'type',
            render: (text, record, index) => (
                <Space>
                    <Space>
                        <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}>
                            <VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} initValues={record.roles != null ? record.roles.split(",") : []} operate={<UserAddOutlined />} />
                        </div>
                    </Space>
                </Space>
            ),
        },
        {
            title: '编辑',
            align: 'center',
            key: 'schemename',
            render: (text, record, index) => (
                <Space>
                    <div onClick={e => e.stopPropagation()}>
                        <Popconfirm
                            title="是否删除此条方案?"
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => {
                                delWebConfirm(record);
                            }}
                        >
                            <Button size="small" danger>
                                删除
                            </Button>
                        </Popconfirm>
                    </div>
                </Space>
            ),
        }

    ];
    const columns1 = [
        {
            title: '查询方案',
            align: 'center',
            key: 'url',
            render: (text, record, index) => (
                <Space>
                    <Checkbox
                        checked={handStatus[index + handCurrent * 5]}
                        onChange={e => {
                            onChangeHand(e, record, index + handCurrent * 5);
                        }}
                    />
                </Space>
            ),
        },
        {
            title: '方案名',
            dataIndex: 'schemename',
            key: 'schemename',
            align: 'center'
        },
        {
            title: '关联角色',
            align: 'center',
            key: 'type',
            render: (text, record, index) => (
                <Space>
                    <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}>
                        <VisibleRoleModal onSubmit={onPushSubmit} selectValue={[]} title={"关联角色"} initValues={record.roles != null ? record.roles.split(",") : []} operate={<UserAddOutlined />} />
                    </div>
                </Space>
            ),
        },
        {
            title: '编辑',
            align: 'center',
            key: 'schemename',
            render: (text, record, index) => (
                <Space>
                    <div onClick={e => e.stopPropagation()}>
                        <Popconfirm
                            title="是否删除此条方案?"
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => {
                                delhandConfirm(record);
                            }}
                        >
                            <Button size="small" danger>
                                删除
                            </Button>
                        </Popconfirm>
                    </div>
                </Space>
            ),
        }

    ];
    //获取选中的角色
    const onPushSubmit = (value) => {
        let id = []
        if (value.length) {
            id = value.map(item => { return item.id })
            let query = {
                schemename: record.schemename,
                terminalType: record.isStatus,
                isBaseMap: false,
                jsonCfg: JSON.stringify({
                    roles: id.join(',')
                })
            }
            SetServiceConfig(query).then(res => {
                if (res.msg === "Ok") {
                    prompt('success', '关联角色成功')
                    setFlag(flag + 1)
                }
                else {
                    prompt('fail', '关联角色失败')
                }
            }).catch(err => {
                prompt('fail', '网络请求失败')
            })

        }


    }
    //获取角色
    const pickRole = (record) => {
        console.log('recird', record);
        setRecord(record)
    }
    //设置web方案
    const onChangeCheck = (e, record, index) => {
        setCheckLoading(true)
        const newLoadings = [...webStatus];
        newLoadings.map((item, loadIndex) => {
            return loadIndex == index ? newLoadings[loadIndex] = !newLoadings[loadIndex] : newLoadings[loadIndex] = false
        })
        setWebStatus(newLoadings)
        let query = {
            schemename: record['schemename'],
            type: 'dynamic'
        }
        if (!newLoadings[index]) {
            setServiceType(query).then(res => {
                setCheckLoading(false)
                if (res.IsSuccess) {
                    const changehandData = [...webData];
                    changehandData[index].type = 'dynamic'
                    setWebData(changehandData)
                    prompt('success', '设置成功')
                } else {
                    prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message)
                }

            })
            return
        }
        var beforeDefault = webData.findIndex((item) => item['type'] == 'pipenet');
        setServiceType({
            schemename: record['schemename'],
            type: 'pipenet'
        }).then(res => {
            setCheckLoading(false)
            if (res.IsSuccess) {
                const changehandData = [...webData];
                changehandData[index].type = 'pipenet'
                setWebData(changehandData)
                if (beforeDefault != -1) {
                    setServiceType({
                        schemename: changehandData[beforeDefault].schemename,
                        type: 'dynamic'
                    }).then(res => {
                        setCheckLoading(false)
                        if (res.IsSuccess) {
                            const changehandData1 = [...webData];
                            changehandData1[beforeDefault].type = 'dynamic'
                            setWebData(changehandData1)
                            prompt('success', '设置成功')
                            return;
                        }
                        prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message)
                    })
                }
            }
        })
    }


    //选择手持方案
    const onChangeHand = (e, record, index) => {
        setCheckLoading(true)
        const newLoadings = [...handStatus];
        newLoadings.map((item, loadIndex) => {
            return loadIndex == index ? newLoadings[loadIndex] = !newLoadings[loadIndex] : newLoadings[loadIndex] = false
        })
        setHandStatus(newLoadings)
        let query = {
            schemename: record['schemename'],
            terminalType: 'phone',
            isBaseMap: false,
            jsonCfg: JSON.stringify({
                isDefault: newLoadings[index],
            })
        }
        if (!newLoadings[index]) {
            SetServiceConfig(query).then(res => {
                setCheckLoading(false)
                if (res.msg === "Ok") {
                    const changehandData = [...handData];
                    changehandData[index].isDefault = false
                    setHandData(changehandData)
                    prompt('success', '设置成功')
                } else {
                    prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message)
                }

            })
            return
        }
        var beforeDefault = handData.findIndex((item) => item['isDefault']);
        SetServiceConfig({
            schemename: record['schemename'],
            terminalType: 'phone',
            isBaseMap: false,
            jsonCfg: JSON.stringify({
                isDefault: true,
            })
        }).then(res => {
            setCheckLoading(false)
            if (res.msg === "Ok") {
                const changehandData = [...handData];
                changehandData[index].isDefault = true
                setHandData(changehandData)
                if (beforeDefault != -1) {
                    SetServiceConfig({
                        schemename: changehandData[beforeDefault].schemename,
                        terminalType: 'phone',
                        isBaseMap: false,
                        jsonCfg: JSON.stringify({
                            isDefault: false,
                        })
                    }).then(res => {
                        setCheckLoading(false)
                        if (res.IsSuccess) {
                            const changehandData1 = [...handData];
                            changehandData1[beforeDefault].isDefault = false
                            setHandData(changehandData1)
                            prompt('success', '设置成功')
                            return;
                        }
                        prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message)
                    })
                }
            }
        })
    }
    const prompt = (type, content) => {
        if (type == 'success') {
            notification.success({
                message: '提示',
                duration: 3,
                description: content,
            });
        }
        else {
            notification.error({
                message: '提示',
                duration: 3,
                description: content,
            });
        }
    }
    const onSubmit = prop => {
        setVisible(false);
        setFlag(flag + 1)
    };
    //删除web配置方案
    const delWebConfirm = (record) => {
        deleteConfig({
            schemename: record['schemename'],
            terminalType: 'web',
            isBaseMap: false
        }).then(res => {
            if (res.msg === "Ok") {
                prompt('success', '删除成功')
                setFlag(flag + 1)

            } else {
                prompt('fail', '删除失败')
            };
        })
    }
    //删除手持配置方案
    const delhandConfirm = (record) => {
        deleteConfig({
            schemename: record['schemename'],
            terminalType: 'phone',
            isBaseMap: false
        }).then(res => {
            if (res.msg === "Ok") {
                prompt('success', '删除成功')
                setFlag(flag + 1)

            } else {
                prompt('fail', '删除失败')
            };
        })
    }
    //添加方案
    const addType = (type) => {
        setType(type);
        let listData = []
        type == 'add' ? listData = webData : listData = handData
        let webSchemenameArr = [], schemeArr = []
        setTreeLoading(true);
        GetMaplayerByTerminalType({
            terminalType: 'scheme',
            isBaseMap: false
        }).then(
            res => {
                if (res.data.scheme && res.data.scheme.optionalLayer.layers.length) {
                    setTreeLoading(false);
                    listData.map(item => {
                        webSchemenameArr.push(item.schemename)
                    })
                    res.data.scheme.optionalLayer.layers.map(item => {
                        if (!webSchemenameArr.includes(item.schemename))
                            schemeArr.push(item.schemename)
                    })
                    setSchemename(schemeArr)
                    if (schemeArr.length) {
                        setVisible(true);
                    }
                    else {
                        notification.warning({
                            message: '提示',
                            duration: 3,
                            description: '请先配置方案',
                        });
                    }


                } else {
                    setTreeLoading(false);
                    notification.warning({
                        message: '提示',
                        duration: 3,
                        description: '请先配置方案',
                    });
                }
            }
        )
    }
    useEffect(() => {
        renderTile();
    }, [flag]);
    // 获取瓦片数据配置数据
    const renderTile = () => {
        setCheckLoading(true)
        //查询手持方案
        var schemeConfigQueryRequest = GetMaplayerByTerminalType({
            terminalType: 'phone',
            isBaseMap: false
        })
        //查询web方案
        var webSchemeQueryRequest = GetMaplayerByTerminalType({
            terminalType: 'web',
            isBaseMap: false
        })
        Promise.all([schemeConfigQueryRequest, webSchemeQueryRequest]).then(res => {
            console.log('res', res);
            if (res[0].msg === "Ok" && res[0].data.phone) {
                let arr = []
                res[0].data.phone.optionalLayer.layers.map((item, index) => {
                    if (item.isDefault) {
                        arr.push(true)
                    } else {
                        arr.push(false)
                    }

                    item.isStatus = 'phone'
                    return item
                })
                setHandData(res[0].data.phone.optionalLayer.layers)
                setHandStatus(arr)

            }
            if (res[1].msg === "Ok" && res[1].data.web) {
                let arr = []
                res[1].data.web.optionalLayer.layers.map((item, index) => {
                    if (item.type === "pipenet") {
                        arr.push(true)
                    } else {
                        arr.push(false)
                    }
                    item.isStatus = 'web'
                    return item
                })
                setWebData(res[1].data.web.optionalLayer.layers)
                setWebStatus(arr)
            }
            setCheckLoading(false)
        }).catch(e => {
            setCheckLoading(false)
        })

    };



    return (
        <>
            <Spin tip="loading..." spinning={checkLoading}>
                <div className={styles.solutionConfig}>
                    <div >
                        <Divider orientation="left"><div className={styles.divider}> Web <PlusOutlined
                            onClick={() => { addType('add') }}
                            className={styles.dividerIcon} /></div></Divider>
                        <Table
                            columns={columns}
                            dataSource={webData}
                            bordered
                            pagination={{
                                showTotal: (total, range) =>
                                    `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                                defaultPageSize: 8,
                                onChange: (value) => {
                                    setWebCurrent(value - 1)
                                }

                            }}
                            rowKey="schemename"
                            scroll={{ y: 400 }}
                        >
                        </Table>
                    </div>
                    <Divider orientation="left"><div className={styles.divider}>手持 <PlusOutlined
                        onClick={() => { addType('addHand') }}
                        className={styles.dividerIcon} /></div> </Divider>
                    <Table
                        columns={columns1}
                        dataSource={handData}
                        bordered
                        rowKey="schemename"
                        scroll={{ y: 400 }}
                        pagination={{
                            showTotal: (total, range) =>
                                `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                            defaultPageSize: 8,
                            onChange: (value) => {
                                setHandCurrent(value - 1)
                            }

                        }}
                    >
                    </Table>
                </div>
            </Spin>
            <AddModal
                visible={visible}
                onCancel={() => setVisible(false)}
                callBackSubmit={onSubmit}
                type={type}
                formObj={formObj}
                listData={schemename}
            />
        </>
    )
}
export default VectorData