import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, Image, Select, message, Modal, Input, Upload, Popconfirm } from 'antd';
import React, { useRef, useState } from 'react';
import appletAPI from "../service";
import { useEffect } from 'react';
import styles from "./index.less";
import axios from 'axios';

const getBase64 = (file) =>
    new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });


const Material = () => {
    const actionRef = useRef();
    const [selectedStore, setSelectedStore] = useState('');
    const [selectedPage, setSelectedPage] = useState('');
    const [storeList, setStoreList] = useState([]);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentImage, setCurrentImage] = useState({
        id: '',
        pageId: '',
        materialName: '',
        materialCode: '',
        materialPath: [],
        materialType: 0
    });

    const [previewVisible, setPreviewVisible] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [previewTitle, setPreviewTitle] = useState('');
    const [fileList, setFileList] = useState([]);

    const [miniPageList, setMiniPageList] = useState([]);

    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(0);

    const handleCancel = () => setPreviewVisible(false);
    const handlePreview = async (file) => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        setPreviewImage(file.url || file.preview);
        setPreviewVisible(true);
        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
    };

    const handleChange = ({ fileList: newFileList }) => {
        newFileList.forEach(item => {
            item.status = 'done'
        });
        setFileList(newFileList)
    };

    const columns = [
        {
            title: '素材名称',
            dataIndex: 'materialName',
            ellipsis: true,
        },
        {
            title: '素材编码',
            dataIndex: 'materialCode',
            ellipsis: true,
        },
        {
            title: '素材图片',
            dataIndex: 'materialPath',
            render: (_, record) => (
                <Image
                    style={{ width: '50%', height: '50%' }}
                    src={JSON.parse(record.materialPath)[0]}
                    fallback="data:image/png;base64,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">
                </Image>
            )
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            render: (_, record) => [
                <a onClick={() => onEditMaterial(record)}>
                    更新
                </a>,
                <Popconfirm
                    title="确定要删除此素材吗？"
                    onConfirm={() => onDeleteMaterial(record)}
                    okText="确定"
                    cancelText="取消"
                >
                    <a href="#">删除</a>
                </Popconfirm>
            ]
        },
    ];

    const uploadButton = (
        <div>
            <PlusOutlined />
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );

    /**
     * 获取店铺列表
     */
    const onFetchStoreList = async () => {
        const response = await appletAPI.GetAllStore();
        if (response.statusCode === 200) {
            setStoreList(response.data);
            setSelectedStore(response.data[0]?.id);
        } else {
            message.error(response.msg || '获取店铺列表失败');
        }
    }

    const uploadProp = {
        name: 'file',
        showUploadList: true,
        multiple: false,
        accept: '.png, .jpg, .jpeg, .gif',
        // 这里需要指定文件上传的content-type
        headers: {
            'Content-Type': 'application/octet-stream',
        },
        customRequest({
            action,
            file,
            headers,
            onError,
            onProgress,
            withCredentials,
        }) {
            //覆盖action 上传之前获取上传地址
            var index = file.name.lastIndexOf(".");
            var ext = file.name.substr(index + 1);
            let fileData = null;
            appletAPI.GetCosRequestURL({ directory: "applet", fileExtension: ext, method: "PUT" }).then((r) => {
                action = r.data.allUrl;
                const reader = new FileReader();
                reader.readAsArrayBuffer(file);
                reader.onload = (e) => {
                    fileData = e.target.result;
                    axios.put(action, fileData, {
                        withCredentials,
                        headers,
                        onUploadProgress: ({ total, loaded }) => {
                            onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
                        },
                    }).then(response => {

                        if (response.status == 200 || response.statusText == 'OK') {
                            const tempUploadImage = JSON.parse(JSON.stringify(currentImage));
                            tempUploadImage.materialPath.push(r.data.seeUrl);
                            setCurrentImage(tempUploadImage);
                            message.success('上传成功！');
                        }
                    }).catch(onError);
                };
            });
            return {
                abort() {
                    console.log('upload progress is aborted.');
                },
            };
        },
    };

    /**
     * 添加、更新页面素材
     */
    const onAddPageMaterial = async () => {
        if (!currentImage.pageId) {
            message.info('请选择所属页面');
            return;
        } else if (!currentImage.materialName) {
            message.info('请填写素材名称');
            return;
        } else if (!currentImage.materialCode) {
            message.info('请填写素材编码');
            return;
        } else if (currentImage.materialPath.length === 0) {
            message.info('请选择至少上传一张素材图片');
            return;
        }
        const jsonData = {
            pageId: currentImage.pageId,
            materialName: currentImage.materialName,
            materialCode: currentImage.materialCode,
            materialPath: JSON.stringify(currentImage.materialPath),
            materialType: currentImage?.materialType?.toString()
        }
        if (currentImage.id) {
            jsonData.id = currentImage.id;
            const response = await appletAPI.UpdateMiniMaterial(jsonData);
            if (response.statusCode === 200) {
                message.success('更新成功');
                setIsModalVisible(false);
                actionRef.current.reloadAndRest();
            } else {
                message.error(response.errors||'更新失败')
            }
        } else {
            const response = await appletAPI.AddMinimaterial(jsonData);
            if (response.statusCode === 200) {
                message.success('添加成功');
                setIsModalVisible(false);
                actionRef.current.reloadAndRest();
            } else {
                message.error(response.errors||'添加失败')
            }
        }
    }

    /**
     * 编辑素材
     * @param {*} record
     */
    const onEditMaterial = (record) => {
        const materialPath = JSON.parse(record.materialPath);
        const material = {
            id: record.id,
            pageId: record.pageId,
            materialName: record.materialName,
            materialCode: record.materialCode,
            materialPath: materialPath
        }
        if (materialPath.length > 1) {
            material.materialType = "1";
        } else {
            material.materialType = "0";
        }
        const fileList = [];
        materialPath.forEach((item, index) => {
            fileList.push({
                uid: index,
                name: item.split('/applet/')[1] || "图片.jpg",
                status: 'done',
                url: item,
            });
        });
        setFileList(fileList);
        setCurrentImage(material);
        setIsModalVisible(true);
    }

    /**
     * 删除素材
     * @param {*} record
     */
    const onDeleteMaterial = async (record) => {
        const response = await appletAPI.DeleteMiniMaterial(record.id);
        if (response.statusCode === 200) {
            actionRef.current.reloadAndRest();
            message.success('删除成功');
        } else {
            message.error(response.errors || '删除失败');
        }
    }

    /**
     * 获取小程序页面
     */
    const onFetchMiniPageList = async () => {
        const response = await appletAPI.MiniPageList({
            current: 1,
            pageSize: 999,
            storeId: selectedStore
        });
        if (response.statusCode === 200) {
            setMiniPageList(response.data.items);
            setSelectedPage(response?.data?.items[0]?.id);
        } else {
            message.error(response.errors || '获取页面列表失败')
        }
    }

    const onBeforeCreate = () => {
        setFileList([]);
        setCurrentImage({
            pageId: '',
            materialName: '',
            materialCode: '',
            materialPath: [],
            materialType: "0"
        });
    }

    useEffect(() => {
        onFetchStoreList();
    }, []);

    useEffect(() => {
        if (!selectedStore) return;
        onFetchMiniPageList();
        if(!selectedPage) return;
        actionRef.current.reloadAndRest();
    }, [selectedStore]);

    useEffect(() => {
    actionRef.current.reloadAndRest();
    }, [selectedPage]);

    return <PageContainer header={{
        title: '',
        breadcrumb: {},
    }}>
        <Card style={{ marginBottom: '10px' }}>
            <div className={styles.table_search_item} style={{float:"left"}}>
                <div>
                    当前门店：
                </div>
                <Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
                    setSelectedStore(value);
                    setSelectedPage(miniPageList[0]?.id);
                }}>
                    {
                        storeList.map(item => {
                            return <Option value={item.id} key={item.id}>{item.name}</Option>
                        })
                    }
                </Select>
            </div>
           <div style={{float:"left"}}>&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div className={styles.table_search_item} style={{float:"left"}}>
                <div>
                    所属页面：
                </div>
                <Select style={{ width: 300 }} value={selectedPage} onChange={(value) => {
                    setSelectedPage(value);
                    actionRef.current.reloadAndRest();
                }}>
                    {
                        miniPageList.map(item => {
                            return <Option value={item.id} key={item.id}>{item.pageName}</Option>
                        })
                    }
                </Select>
            </div>
        </Card>
        <ProTable
            search={false}
            columns={columns}
            actionRef={actionRef}
            cardBordered
            editable={{
                type: 'multiple',
            }}
            pagination={{
                pageSize: 10,
              }}
            request={async (params) => {
                debugger
                if (!selectedStore) return;
                const jsonData = {
                    "current": params.current,
                    "pageSize": params.pageSize,
                    "storeId": selectedStore,
                    "pageId":selectedPage
                }
                const response = await appletAPI.MinimaterialListByStore(jsonData);
                const pageList = [];
                response.data.items.forEach(item => {
                    pageList.push(...item.list);
                });
                return {
                    data: pageList,
                    success: true,
                    total: response.data.totalCount,
                }
            }}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                onChange(value) {
                },
            }}
            rowKey="id"
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}
            dateFormatter="string"
            headerTitle="图片管理"
            toolBarRender={() => [
                <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => { setIsModalVisible(true); onBeforeCreate() }}>
                    新建
                </Button>
            ]}
        />
        <Modal
            title="编辑素材"
            maskClosable={false}
            visible={isModalVisible} footer={null} onOk={onAddPageMaterial} onCancel={() => setIsModalVisible(false)} bodyStyle={{ padding: '32px 40px 1px 48px', height: '465px' }}>
            <div className={styles.edit_image_card}>
                <div className={styles.edit_image_item}>
                    <div className={styles.edit_image_prev}>
                        所属页面：
                    </div>
                    <div className={styles.edit_image_suffix}>
                        <Select placeholder="请选择所在页面" style={{ width: '100%' }} value={currentImage.pageId} onChange={(value) => {
                            const tempImg = JSON.parse(JSON.stringify(currentImage));
                            tempImg.pageId = value;
                            setCurrentImage(tempImg);
                        }}>
                            {
                                miniPageList.map(item => {
                                    return <Option value={item.id} key={item.id}>{item.pageName}</Option>
                                })
                            }
                        </Select>
                    </div>
                </div>
                <div className={styles.edit_image_item}>
                    <div className={styles.edit_image_prev}>
                        素材名称：
                    </div>
                    <div className={styles.edit_image_suffix}>
                        <Input placeholder='请输入素材名称' value={currentImage.materialName} onChange={value => {
                            const tempImg = JSON.parse(JSON.stringify(currentImage));
                            tempImg.materialName = value.target.value;
                            setCurrentImage(tempImg);
                        }}></Input>
                    </div>
                </div>
                <div className={styles.edit_image_item}>
                    <div className={styles.edit_image_prev}>
                        素材编码：
                    </div>
                    <div className={styles.edit_image_suffix}>
                        <Input placeholder='请输入素材编码' value={currentImage.materialCode} onChange={value => {
                            const tempImg = JSON.parse(JSON.stringify(currentImage));
                            tempImg.materialCode = value.target.value;
                            setCurrentImage(tempImg);
                        }}></Input>
                    </div>
                </div>
                <div className={styles.edit_image_item}>
                    <div className={styles.edit_image_prev}>
                        数量：
                    </div>
                    <div className={styles.edit_image_suffix}>
                        <Select placeholder="请选择素材数量" style={{ width: '100%' }} value={currentImage.materialType} onChange={(value) => {
                            const tempImg = JSON.parse(JSON.stringify(currentImage));
                            tempImg.materialType = value;
                            setCurrentImage(tempImg);
                        }}>
                            <Option value={"0"} >单张</Option>
                            <Option value={"1"} >多张</Option>
                        </Select>
                    </div>
                </div>

                <Upload
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={handlePreview}
                    onChange={handleChange}
                    onRemove={(remove) => {
                        const findIndex = fileList.findIndex(item => item.uid === remove.uid);
                        if (findIndex > -1) {
                            const tempUpload = JSON.parse(JSON.stringify(currentImage));
                            tempUpload.materialPath.splice(findIndex, 1);
                            setCurrentImage(tempUpload);
                        }
                    }}
                    {...uploadProp}
                >
                    {
                        (() => {
                            if (currentImage.materialType === "0") {
                                if (fileList.length >= 1) {
                                    return null;
                                } else {
                                    return uploadButton
                                }
                            } else {
                                return <>{fileList.length >= 9 ? null : uploadButton}</>
                            }
                        })()
                    }
                </Upload>
                <Button  type="primary" htmlType="submit"  style={{ float: 'right', left: 10 }} onClick={() => onAddPageMaterial()}>
                    确认
                </Button>
                <Button  htmlType="button" style={{ float: 'right' }}  onClick={() => setIsModalVisible(false)} >
                    取消
                </Button>

            </div>

        </Modal>
        <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
            <img
                alt="example"
                style={{
                    width: '100%',
                }}
                src={previewImage}
            />
        </Modal>
    </PageContainer >

}
export default Material;
