/** @format */

import * as React from 'react'
import DbSourceSelect from "./components/dbSourceSelect"
import {useDataEditorDb, useDataFiledTitle} from "../../../service/dataEditor"
import {SEARCH_GET_DATA} from "../../../const/path"
import {Col, Row, Spin, message} from "antd"
import Axios from '../../../utils/xhr'
import DbFormView from "./components/dbFormView"
import SearchTypeItem from "./components/searchTypeItem"



const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 12
    },
}

interface filedData {
    value: string;
    key: string;
    type: string;
    title: string;
}


interface FormChangeResult {
    index: string,
    value: string,
    formFiled: any
}


interface SearchResultData {
    list: any[],
    id: number,
    searchCode: string
}

const dbEditor: React.FC = props => {
    let [dataFiledInfo, dataFiledRequest, dataFiledInfoSetState] = useDataFiledTitle()

    const getDbSourceConfig = (dbSource: string) => {
        dataFiledRequest(dbSource)
    }


    //拿到搜索结果
    const onGetSearchData = ({list, id, searchCode}: SearchResultData) => {

        let keyMap = new Map()
        let tempDataTitle = JSON.parse(JSON.stringify(dataFiledInfo.dataTitle))

        tempDataTitle.forEach((item: filedData, index: number) => {
            keyMap.set(item.key, index)
        })


        list.forEach((item: filedData) => {
            if (keyMap.has(item.key)) {
                tempDataTitle[keyMap.get(item.key)].value = item.value
            }
        })

        dataFiledInfoSetState((prevState) => {
            return {
                ...prevState,
                id,
                searchCode,
                dataTitle: tempDataTitle,
            }
        })
    }


    //重置表单
    const handleResetDbFormView = () => {
        let tempDataTitle = JSON.parse(JSON.stringify(dataFiledInfo.dataTitle))
        tempDataTitle = tempDataTitle.map((item: filedData) => {
            return {
                ...item,
                value: ""
            }
        })

        dataFiledInfoSetState((prevState) => {
            return {
                ...prevState,
                dataTitle: tempDataTitle
            }
        })
    }

    //同步数据
    const onDbFormViewChange = (result: FormChangeResult) => {
        let tempDataTitle = JSON.parse(JSON.stringify(dataFiledInfo.dataTitle))
        tempDataTitle[result.index].value = result.value
        tempDataTitle[result.index].formFiled = result.formFiled

        dataFiledInfoSetState((prevState) => {
            return {
                ...prevState,
                dataTitle: tempDataTitle
            }
        })
    }


    //提交表单
    const handDbFormSubmit = () => {
        return Axios({
            url: "/data_editor/data",
            method: "POST",
            data: {
                list: dataFiledInfo.dataTitle.map(({key, title, type, value}) => {
                    return {
                        key,
                        title,
                        type,
                        value,
                    }
                }),
                id: dataFiledInfo.id,
                search_code: dataFiledInfo.searchCode
            }
        }).then(({code, msg}) => {
            if (code) {
                message.error(msg)
                return
            }
            message.success("数据保存成功")
        }).catch((error) => {
            message.error(error.message)
        })
    }


    return (
        <>
            <DbSourceSelect getDbSourceConfig={getDbSourceConfig}/>

            <Spin spinning={dataFiledInfo.loading}>
                <Row>
                    <Col span={6}/>
                    <Col span={18}
                         style={{margin: "30px 0"}}>
                        {
                            dataFiledInfo.searchData.map((item) => {
                                return (
                                    <SearchTypeItem key={item.search_code}
                                                    searchInfoType={item}
                                                    onGetSearchData={onGetSearchData}/>
                                )
                            })
                        }
                    </Col>
                </Row>

                <DbFormView dataList={dataFiledInfo.dataTitle}
                            handleReset={handleResetDbFormView}
                            handFormSubmit={handDbFormSubmit}
                            onChange={onDbFormViewChange}/>

            </Spin>
        </>

    )
}

export default dbEditor

