
import { PlusOutlined } from '@ant-design/icons';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import ProDescriptions from '@ant-design/pro-descriptions';
import {
    getintegral,
    editintegral,
    getStoreList,
    getallrule,
    testaddinteg
} from './service';
import { Button, Checkbox, Card, List, Tree, message, Drawer } from 'antd';
const Distribute = () => {
    const onSelect = (_, record) => {
        console.log(_[0]);
        SetthisRuleId(_[0]);
        SetthisRuleType(record.node.type);
    };


    const [StoreData, SetStoreData] = useState();
    const [AllRuleTree, setAllRuleTree] = useState([]);
    const [thisRuleType, SetthisRuleType] = useState();
    const [dwselected, setdwselected] = useState([]);
    const [dwvisible, setdwVisible] = useState(false);
    const [thisRuleId, SetthisRuleId] = useState();
    const storecolumns = [
        {
            title: '规则id',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,
        },
        {
            title: '门店名称',
            dataIndex: 'orgName',
        },
    ];

    const showDrawer = () => {
        setdwVisible(true);
    };

    const onClose = () => {
        setdwVisible(false);
    };
    function saveStoreRule() {
        editintegral({
            thisRuleid: thisRuleId,
            thisRuletype: thisRuleType,
            orglist: dwselected,
        }).then((r) => {
            if (r.data == true) {
                message.success('配置成功');
            }
            SetthisRuleId(thisRuleId);
        });
    }

    // 移除指定属性的项
    function removeByValue(arr, attr, value) {
        var index = 0;
        for (var i in arr) {
            if (arr[i][attr] == value) {
                index = i;
                break;
            }
        }
        arr.splice(index, 1);
    }
    /**
       * 绑定数据
       */
    /*绑定数据 */
    const actionRef = useRef();
    // 监控数据变化
    useEffect(() => {
        const parmar = {
            current: 1,
            pagesize: 30
        };

        getStoreList(parmar).then((r) => {
            SetStoreData(r.data);
        });

        getallrule({ current: 0, pagesize: 0 }).then((r) => {
            var source = [];
            var allCommonSource = [];
            (r.data.allCommon || []).map((item, index) => {
                allCommonSource.push({
                    title: item.name,
                    key: item.id,
                    parentId: 0,
                    type: 0,
                    children: []
                });
            });
            source.push({
                title: '通用规则',
                key: 0,
                parentId: 0,
                type: 0,
                children: allCommonSource
            });

            (r.data.allChild || []).map((item, index) => {
                var parTitle = GetTypeName(item.typeId);
                var childSource = [];
                item.child.map((itemChild, index) => {
                    childSource.push({
                        title: itemChild.ruleRemark,
                        key: itemChild.id,
                        parentId: item.typeId,
                        type: item.typeId,
                        children: []
                    });
                });
                source.push({
                    title: parTitle,
                    key: item.typeId,
                    parentId: 0,
                    type: item.typeId,
                    children: childSource
                });
            });
            setAllRuleTree(source);
        });


    }, []);
    function GetTypeName(type) {
        var typeName = "未定义规则";
        switch (type) {
            case 1:
                typeName = "按消费金额积分规则";
                break;
            case 2:
                typeName = "按大类积分规则";
                break;
            case 3:
                typeName = "按小类积分规则";
                break;
            case 4:
                typeName = "按消费次数积分规则";
                break;
            case 5:
                typeName = "按消费人数积分规则";
                break;
            case 6:
                typeName = "按出品数量积分规则";
                break;
            default:
                break;
        }
        return typeName;
    }


    return (
        <div>
            <Drawer title="选择门店" placement="right" onClose={onClose} visible={dwvisible} destroyOnClose={true}>
                <List style={{ height: '80%' }}>
                    {
                        (StoreData || []).map((item, index) => {
                            return (
                                <List.Item>
                                    <Checkbox defaultChecked={dwselected.filter((x) => x.id == item.key).length > 0} key={item.key} onChange={(_, record) => {
                                        var index = dwselected.filter((x) => x.id == item.key);
                                        if (_.target.checked == true && index.length == 0) {
                                            dwselected.push({
                                                id: item.key,
                                                name: item.title
                                            });
                                        }
                                        if (_.target.checked == false && index.length > 0) {
                                            removeByValue(dwselected, 'id', item.key);
                                        }
                                        console.log(dwselected);
                                    }}><a href='#'>{item.title}</a></Checkbox>
                                </List.Item>
                            );
                        })
                    }
                </List>
                <Button onClick={saveStoreRule}>确定</Button>
            </Drawer>

            <ProTable
                columns={storecolumns}
                search={false}
                style={{ width: '100%', float: 'right' }}
                tableRender={(_, dom) => (
                    <div
                        style={{
                            display: 'flex',
                            width: '100%',
                        }}
                    >
                        <Card title="规则列表" bordered={false} style={{ width: '19%', float: 'left' }}>
                            <Tree
                                checkable={false}
                                treeData={AllRuleTree}
                                onSelect={onSelect}

                            />
                        </Card>

                        <div
                            style={{
                                flex: 1,
                            }}
                        >
                            {dom}
                        </div>
                    </div>
                )}
                toolBarRender={() => [
                    <Button
                        type="primary"
                        key="primary"
                        onClick={showDrawer}
                    >
                        <PlusOutlined /> 添加门店
                    </Button>,
                    // <Button onClick={testaddinteg}>
                    //     测试
                    // </Button>
                ]}
                params={{
                    ruleId: thisRuleId,
                    ruleType: thisRuleType
                }}
                request={async (params) => {
                    var datas = [];
                    var total = 0;
                    await getintegral(params).then((r) => {
                        datas = r.data.data;
                        total = r.data.total;
                        var arr = [];
                        r.data.data.map((ida, idaindex) => {
                            arr.push({
                                id: ida.orgId,
                                name: ida.orgName
                            });
                        });
                        setdwselected(arr);
                    });

                    return {
                        data: datas,
                        success: true,
                        total: total,
                    };
                }}
            >

            </ProTable>
        </div>
    );
}

export default Distribute;
