import { FontColorsOutlined, PlusOutlined, DownOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Modal, Form, Input, Button, Select, TreeSelect, Space, Checkbox, Col, Row, DatePicker, Card, List, Tree, message, Drawer, Divider, Tag, Tabs } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import moment from 'moment';
const { TabPane } = Tabs;
import {
    addPracticeType,
    getPracticeType,
    editPracticeType,
    removePracticeType
} from './service';

import CreateTypeForm from './components/createTypeForm';

const PageIndex = (props) => {
    const actionRef = useRef();
    const [createTypeModalVisible, handleTypeModalVisible] = useState()
    const [TypecurrentRow, setTypecurrentRow] = useState();
    const [selectedRowsState, setSelectedRows] = useState([]);
    //删除
    const handleRemove = async () => {
        try {
            message.loading('正在删除');
            let ids = [];
            selectedRowsState.forEach((item) => {
                ids.push(item.id);
            });
            await removePracticeType(ids).then((r) => {
                if (r.data) {
                    message.success('删除成功');
                    setSelectedRows([]);
                    return true;
                } else {
                    message.success('删除失败');
                    return false;
                }
            });
        } catch (error) {
            message.error('删除失败请重试！');
            return false;
        }
    };

    function handleTypeAdd(fields) {
        try {
            addPracticeType(fields)
                .then((r) => {
                    if (r.data) {
                        message.success('添加成功');
                        //刷新数据
                        actionRef.current.reload();
                    } else {
                        message.error('添加失败请重试！');
                    }
                });
            return true;
        } catch (error) {
            message.error('添加失败请重试！');
            return false;
        }
    }


    function handleTypeUpdate(fields) {
        try {
            editPracticeType(fields)
                .then((r) => {
                    if (r.data) {
                        message.success('配置成功');
                    } else {
                        message.error('配置失败请重试！');
                    }
                    setTypecurrentRow(undefined);
                    //刷新数据
                    actionRef.current.reload();
                });
            return true;
        } catch (error) {
            message.error('配置失败请重试！');
            return false;
        }
    }

    /**
     * 做法类别列表
     */
    const PracticeTypecolumns = [
        {
            title: '规则id',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,
        },
        {
            title: '做法名称',
            dataIndex: 'typeName',
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => [
                <a
                    key="primary"
                    onClick={() => {
                        handleTypeModalVisible(true);
                        setTypecurrentRow(record);
                    }}
                >
                    {' '}
                    修改
                </a>,
                <a
                    key="primary"
                    onClick={async () => {
                        record.status = record.status == 0 ? 1 : 0;
                        await handleTypeUpdate(record);
                    }}
                >
                    {' '}
                    {record.status == 0 ? '停用' : '启用'}
                </a>,

            ],
        },
    ];

    return (
        <PageContainer>
            <ProTable
                actionRef={actionRef}
                rowKey="id"
                search={{
                    labelWidth: 120,
                }}
                toolBarRender={() => [
                    <Button
                        type="primary"
                        key="primary"
                        onClick={() => {
                            setTypecurrentRow({
                                id: '',
                                typeName: ''
                            });
                            handleTypeModalVisible(true);
                        }}
                    >
                        <PlusOutlined /> 添加
                        
                    </Button>,
                    <Button
                        type="primary"
                        key="primary"
                        onClick={ async () => {
                            await handleRemove();
                            actionRef.current.reload();
                        }}
                    >
                        删除
                    </Button>,
                ]}
                request={async (params) => {
                    var datas = [];
                    var total = 0;
                    await getPracticeType(params).then((r) => {
                        // setAllTypeList(r.data.data);
                        datas = r.data.data;
                        total = r.data.total;
                    });
                    return {
                        data: datas,
                        success: true,
                        total: total,
                    };
                }}
                modalVisible={createTypeModalVisible}
                columns={PracticeTypecolumns}
                rowSelection={{
                    onChange: (_, selectedRows) => {
                        setSelectedRows(selectedRows);
                    },
                }}
            />
            <CreateTypeForm
                onFinish={async (value) => {
                    var success = false;
                    if (value.id) {
                        success = handleTypeUpdate(value);
                    } else {
                        success = handleTypeAdd(value);
                    }
                    if (success) {
                        handleTypeModalVisible(false);
                        setTypecurrentRow(undefined);
                        if (actionRef.current) {
                            actionRef.current.reload();
                        }
                    }
                }}
                onCancel={() => {
                    setTypecurrentRow(undefined);
                    handleTypeModalVisible(false);
                    actionRef.current.reload();
                }}
                createModalVisible={createTypeModalVisible}
                values={TypecurrentRow || {}}
            >
            </CreateTypeForm>

        </PageContainer>
    );
};

export default PageIndex;
