import React, { useEffect, useRef, useReducer } from 'react';
import { Modal, Button, Drawer, Tooltip, Popconfirm, message, Switch } from 'antd';
import AutoTable from '@/components/AutoTable';
import getPrem from '@/utils/getPrem';//权限判断fn
import InitForm from '@/components/InitForm';
import { useRequest } from "umi";
import defaultFields from "./fields";
import { doFetch } from '@/utils/doFetch';
import { deviceprovideDetail, deleteProvideCheck } from "@/services/device";
import { deviceprovideDetails } from "@/utils/detailTotalCard";
import Deletecheck from '@/components/Deletecheck';
import Details from "@/components/Details";
const initState = {
    vs: false,
    fields: {},
    iftype: {},
    curitem: {},
    details: {
        dataSource: {},
        totalCard: []
    },
    visible: false
};
function reducer(state, action) {
    let { type } = action, newState = {};
    switch (type) {
        case "add":
            newState = {
                ...state,
                vs: true,
                iftype: {
                    title: "新增供应商",
                    val: type
                },
                fields: { ...action.fields }
            };
            break;
        case "edit":
            newState = {
                ...state,
                vs: true,
                iftype: {
                    title: "编辑供应商",
                    val: type
                },
                fields: { ...action.fields },
                curitem: action.curitem
            }
            break;
        case "cdetails":
            newState = {
                ...state,
                details: {
                    dataSource: action.dataSource,
                    totalCard: [...deviceprovideDetails]
                },
                visible: true
            }
            break;
        case "close":
            newState = {
                vs: false,
                fields: {},
                iftype: {},
                curitem: {},
                details: {
                    dataSource: {},
                    totalCard: []
                },
                visible: false
            };
            break;

    }
    return newState;

}

const Deviceprovide = (props) => {
    let actionRef = useRef(), ChildRef = null;
    function reload() {
        actionRef?.current?.reload();
        ChildRef?.onRefresh();
    }
    const [state, dispatch] = useReducer(reducer, initState),
        { vs, fields, iftype, curitem, details, visible } = state,
        columns = [
            {
                "title": "供应商编号",
                "dataIndex": "supplierNo",
                "key": "supplierNo"
            },
            {
                "title": "供应商名称",
                "dataIndex": "supplierName",
                "key": "supplierName",
                render: (_, row) => {
                    return <div style={{ padding: '3px 0', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                        <Tooltip title={row.supplierName}>
                            <a onClick={() => {
                                deviceprovideDetail({ id: row.id }).then(res => {
                                    let data = res?.data?.data || {};
                                    dispatch({ type: "cdetails", dataSource: data })
                                })

                            }}>{row.supplierName}</a>
                        </Tooltip>
                    </div>
                }
            },
            {
                "title": "联系电话",
                "dataIndex": "telephone",
                "key": "telephone"
            },
            {
                "title": "邮箱",
                "dataIndex": "email",
                "key": "email"
            },
            {
                "title": "地址",
                "dataIndex": "address",
                "key": "address",
                "search": false
            },
            {
                "title": "备注",
                "dataIndex": "remark",
                "key": "remark",
                "search": false
            },
            {
                "title": "评分",
                "dataIndex": "score",
                "key": "score",
                render: (_, row) => {
                    return <div>{row.score}星</div>
                }
            },
            {
                "title": "状态",
                "dataIndex": "status",
                "key":"status",
                valueType: "select",
                options: [
                    {
                        label: "启用",
                        value: 1
                    },
                    {
                        label: "关闭",
                        value: 0
                    }
                ],
                render: (text, row, _, action) => {
                    return <Popconfirm
                        title="是否开启或关闭供应商?"
                        onConfirm={() => {
                            run({ url: "/ngic-auth/sysSupplier/update/status", params: { id: row.id, status: row.status == 1 ? 0 : 1 } })
                        }}
                        onCancel={() => {

                        }}
                        okText="确定"
                        cancelText="取消"
                        disabled={!getPrem("equipmentSupplier_updatestatus", "ifs")}
                    >
                        < Switch checked={row.status == 1 ? true : false} checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={false} />
                    </Popconfirm>
                },
            },
            {
                title: '操作',
                valueType: 'option',
                width: 150,
                render: (text, row, _, action) => extraAction(text, row, _, action)
            },
        ],
        { run, loading } = useRequest(doFetch, {
            manual: true,
            formatResult: (res) => res,
            onSuccess: (result, params) => {
                if (result.code == "0000") {
                    message.success("操作成功！")
                    reload();
                    dispatch({ type: "close" })
                }
            }
        });
    function extraAction(text, record, _, action) {
        return [
            getPrem("equipmentSupplier_save", action, '修改', () => {
                deviceprovideDetail({ id: record.id }).then(res => {
                    if (res.code == "0000") {
                        let data = res?.data?.data || {};
                        for (let i in defaultFields) {
                            defaultFields[i].value = data[i];
                        }
                        dispatch({ type: "edit", fields: defaultFields, curitem: data })
                    }
                })
            }),
            getPrem("equipmentSupplier_deleteById", action, '删除', null,{
                title: "确认删除该供应商？",
                onConfirm: () => {
                    run({ url: "/ngic-auth/sysSupplier/deleteById", params: { id: record.id } })
                }
            })
        ];
    };
    let saveData = (values, fn) => {
        let newfields = JSON.parse(JSON.stringify(values));
        //新增&修改
        let difrid = iftype.val == "edit" ? { id: curitem.id } : {};
        let supplierUserList = newfields?.supplierUserList?.map(it => {
            delete it.id;
            return it
        });
        let params = {
            ...newfields,
            supplierUserList
        }
        run({ url: "/ngic-auth/sysSupplier/save", params: { ...params, ...difrid } })
    };
    let extrarender = ([
        <Button disabled={!getPrem("equipmentSupplier_save", "ifs")} type="primary" onClick={() => {
            for (let i in defaultFields) {
                defaultFields[i].value = null;
                if (i == "supplierUserList") {
                    defaultFields[i].value = []
                }
            }
            dispatch({ type: "add", fields: defaultFields })
        }}>新增</Button>
    ]);
    return <div>
        <AutoTable
            pagetitle={props.route.name} //页面标题
            pageextra={extrarender} //页面操作 新增or批量删除
            columns={columns}
            path="/ngic-auth/sysSupplier/queryList"
            actionRef={actionRef}
            onRef={node => ChildRef = node}
        ></AutoTable>

        <Modal
            maskClosable={false}
            title={iftype.title}
            visible={vs}
            onCancel={() => dispatch({ type: "close" })}
            footer={false}
            destroyOnClose={true}
            width={1000}
        >
            <InitForm
                fields={fields}
                submitData={(values) => {
                    saveData(values)
                }}
                onChange={(changedValues, allValues) => {
                    //联动操作
                }}
                submitting={
                    loading || !vs
                }
            >
            </InitForm>
        </Modal>
        <Drawer
            title="供应商详情"
            closable={true}
            visible={visible}
            onClose={() => dispatch({ type: "close" })}
            destroyOnClose={true}
            afterVisibleChange={(v) => {

            }}
            width="100%"
            className="drawerDetails"
        >
            <Details {...details}></Details>
        </Drawer>
    </div>
}
export default Deviceprovide;