import { Space, Table, Button, Popconfirm, notification, Divider, Checkbox, Spin } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../dimensionsConfig.less'
import VisibleRoleModal from '@/pages/platformCenter/messageManage/projectManage/components/RolseSelect/VisibleRoleModal'
import {
    PlusOutlined
} from '@ant-design/icons';
import {
    deleteConfig, SettingRoleWebSchema, SetServiceConfig,DeleteWebSchema,GetWebSchemaList,GetSchemaInfoList,IsActionWebSchema
} 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',
            render: (text, record, index) => (
                <Space>
                    <Checkbox
                        checked={webStatus[index + webCurrent * 5]}
                        onChange={e => {
                            onChangeCheck(e, record, index + webCurrent * 5);
                        }}
                    />
                </Space>
            ),
        },
        {
            title: '方案名',
            align: 'center',
            render: (text, record, index) => (
                <Space>
                  {record.scheme.schemename}
                </Space>
            ),
        },
        {
            title: '关联角色',
            align: 'center',
            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',
            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',
    //         render: (text, record, index) => (
    //             <Space>
    //                 <Checkbox
    //                     checked={handStatus[index + handCurrent * 5]}
    //                     onChange={e => {
    //                         onChangeHand(e, record, index + handCurrent * 5);
    //                     }}
    //                 />
    //             </Space>
    //         ),
    //     },
    //     {
    //         title: '方案名',
    //         align: 'center',
    //         render: (text, record, index) => (
    //             <Space>
    //               {record.scheme.schemename}
    //             </Space>
    //         ),
    //     },
    //     {
    //         title: '关联角色',
    //         align: 'center',
    //         render: (text, record, index) => (
    //             <Space>
    //                 <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}>
    //                     <VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} initValues ={record.roles!=null?record.roles.split(","):[]} operate={<UserAddOutlined />} />
    //                 </div>
    //             </Space>
    //         ),
    //     },
    //     {
    //         title: '编辑',
    //         align: 'center',
    //         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 = {
                schemaname: record.scheme.schemename,
                roles: id.join(',')
            }
            SettingRoleWebSchema(query).then(res => {
                if (res.msg === "") {
                    prompt('success', '关联角色成功')
                    setFlag(flag + 1)
                }
                else {
                    prompt('fail', '关联角色失败')
                }
            }).catch(err=>{
                prompt('fail', '网络请求失败')
            })
          
        }


    }
    //获取角色
    const pickRole = (record) => {
        setRecord(record)
    }
    //设置web方案
    const onChangeCheck = (e, record, index) => {
        setCheckLoading(true)
        IsActionWebSchema({schemaname :record.scheme.schemename}).then(res=>{
            setCheckLoading(false)
            if(res.msg===''){
                prompt('success', '设置成功')
                setFlag(flag + 1)
            }
            else{
                prompt('fail', res.msg)
            }
        })
     
    }


    //选择手持方案
    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) => {
        DeleteWebSchema( record.scheme.schemename).then(res => {
            if (res.msg === "") {
                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);
        GetSchemaInfoList().then(
            res => {
                if (res.data && res.data.length) {
                    setTreeLoading(false);
                    listData.map(item => {
                        webSchemenameArr.push(item.scheme.schemename)
                    })
                    res.data.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 = GetWebSchemaList()
        Promise.all([ webSchemeQueryRequest]).then(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[0].msg==="Ok" && res[0].data) {
                let arr = []
                res[0].data.map((item, index) => {
                    if (item.isDefault) {
                        arr.push(true)
                    } else {
                        arr.push(false)
                    }
                    item.isStatus = 'web'
                    return item
                })
                setWebData(res[0].data)
                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={(record, index) => record.scheme.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