/*
 * @Author: your name
 * @Date: 2022-04-28 10:47:35
 * @LastEditTime: 2024-09-12 16:48:40
 * @LastEditors: cclu 1106109051@qq.com
 * @Description: 经营商户相关联系人管理组件 未对接接口
 * @FilePath: \cloud-platform\src\pages\basicManage\Merchats\components\LinkManTable.tsx
 */
import useRequest from '@ahooksjs/use-request';
import { Popconfirm } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { EditableProTable } from '@ant-design/pro-table';

import type { ActionType, ProColumns } from "@ant-design/pro-table";
import type { LinkManModel } from "../data";
import { getLinkManList, updateLinkMan, delLinkMan } from '../service';
import { getBusniessBrandTree } from "@/pages/basicManage/service";

const LinkManTable = ({ merchartsId, show }: { merchartsId: number, show: boolean }) => {
    const actionRef = useRef<ActionType>();
    // const { loading, data } = useRequest(async () => {
    //     console.log('merchartsId', merchartsId);

    //     if (merchartsId) {
    //         const data = await getLinkManList(merchartsId)
    //         console.log('datadasdasdasdas', data);

    //         return data
    //     }
    //     return []
    // })
    // 请求经营品牌树

    const [dataSource, setDataSource] = useState<LinkManModel[]>()
    const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
    // if (!loading && !dataSource) {
    //     setDataSource(data)
    // }
    const columns: ProColumns<LinkManModel>[] = [
        {
            title: '联系人',
            dataIndex: 'LINKER_NAME',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules: rowIndex > 2 ? [{ required: true, message: '此项为必填项' }] : [],
                };
            },
        },
        {
            title: '联系方式',
            dataIndex: 'LINKER_MOBILEPHONE'
        },

        {
            title: '状态',
            dataIndex: 'LINKER_STATE',

            valueType: 'select',
            // width:120,
            valueEnum: { 1: { text: '有效', status: 'sucess' }, 0: { text: '无效', status: 'error' } }
        },
        {
            title: '操作',
            valueType: 'option',
            width: 160,
            render: (text, record, _, action) => [
                <a
                    key="editable"
                    onClick={() => {
                        action?.startEditable?.(record.COOPMERCHANTS_LINKER_ID);
                    }}
                >
                    编辑
                </a>,
                // <Popconfirm
                //     title="确认删除该联系人吗?"
                //     onConfirm={async () => {
                //         const sucesse = await delLinkMan(record.COOPMERCHANTS_LINKER_ID);
                //         if (sucesse && actionRef.current) {
                //             actionRef.current.reload();
                //         }
                //     }}
                // >
                //     <a>删除</a>
                // </Popconfirm>
                // <a
                //     key="delete"
                //     onClick={() => {
                //         if (record.COOPMERCHANTS_LINKER_ID) {
                //             delLinkMan(record.COOPMERCHANTS_LINKER_ID);
                //         }
                //     }}
                // >
                //     移除
                // </a>
            ],
        }
    ]


    // 拿到表格数据的方法
    const handleGetTableData = async () => {
        const data = await getLinkManList(merchartsId)
        setDataSource(data)
        console.log('datadasdasdasdas', data);
    }

    useEffect(async () => {
        console.log('merchartsId', merchartsId);
        if (merchartsId) {
            handleGetTableData()
        }
    }, [])




    return (
        <EditableProTable<LinkManModel>
            rowKey="COOPMERCHANTS_LINKER_ID"
            columns={columns}
            recordCreatorProps={{
                // newRecordType: "dataSource",
                record: () => ({
                    COOPMERCHANTS_LINKER_ID: new Date().getTime(),
                    LINKER_STATE: "1"
                }),

            }}
            // request={async () => dataSource}
            value={dataSource}
            onChange={setDataSource}
            editable={{
                type: 'multiple',
                editableKeys,
                onSave: async (rowKey, data, row) => {
                    data.COOPMERCHANTS_ID = merchartsId;
                    await updateLinkMan(data)
                    await handleGetTableData()
                },
                onDelete: async (key, row) => {
                    console.log('row', row);
                    delLinkMan(row.COOPMERCHANTS_LINKER_ID)
                },
                onValuesChange: (record, recordList) => {
                    setDataSource(recordList);
                },
                onChange: setEditableRowKeys,
            }}
        ></EditableProTable>

    )
}

export default LinkManTable;
