import React, { useState } from "react"
import {Divider,Descriptions,Tooltip,Drawer, Space, Button, message} from "antd"
import {SettingOutlined} from "@ant-design/icons"
import { useGetModalInfoAndAction } from "../../../../hooks/common"
import SelectMeta from "@/view/meta/selectmeta/SelectMeta"
import { pageUtil } from "@/utils"
import qs from 'qs'

const MatchMetaInfo:React.FC<any>=(props)=>{

    const {currentAction,selectData,setSelectData} = props

    const selectmodal = useGetModalInfoAndAction()
    const bodyheight = pageUtil.getBodyHeight()

    const [tempdata,setTempData] = useState({
        metadataId:'',
        metadataPath:''
    })
    
    const [confirmLoading,setConfirmLoading] = useState(false)

    const openSelect=()=>{
        selectmodal.openModal()
    }

    const selectMeta=(data:any,systemmap)=>{
        const paths = data.namePathList;
        let temp = [...paths];
        temp.shift();
        // let system:any = null;
        // try {
        //     let sys = data.sysList
        //     system = Number(sys[0])
        //     let systemmsg = systemmap[system]
        //     let owner = systemmsg.catalogInfo;
        //     let templist = [owner.catalogName,systemmsg.scopeName]
        //     temp = [...templist,...temp]
        // } catch (error) {
        //     console.log(error)
        // }
        setTempData({metadataId:data._id,metadataPath:temp.join('/')})
    }

    console.log(tempdata)
    
    const saveItem=()=>{
        if(tempdata.metadataId){
            setSelectData?.(tempdata)
            selectmodal.cancelModal()
        }else{
            message.info("请选择元数据")
        }
    }

    const opendetail=()=>{
        const payload={
            mid:selectData.metadataId,
            action:'metadetail',
            type:'detail',
            manager:false,
            activekey:1,
        }
        window.open(`/center-home/metadetail?${qs.stringify(payload)}`)

    }

    return(
        <div>
            <Divider orientation='left'>关联元数据</Divider>
            <Descriptions column={1} bordered>
                <Descriptions.Item 
                    label="元数据路径"
                    labelStyle={{ width: 180 }}
                >
                    <div className='flex' style={{ alignItems: 'center' }}>
                        <div style={{ flex: 1,cursor:'pointer',color:'blue' }} onClick={()=>{opendetail()}}>
                            {selectData?.metadataPath}
                        </div>
                        <div style={{ flex: '0 0 auto', marginLeft: 10, width: 16 }}>
                            <Tooltip placement="left" title={'关联元数据'}>
                                {currentAction!=='detail'&&<SettingOutlined onClick={openSelect} style={{ fontSize: 16,cursor:'pointer' }} />}
                            </Tooltip>
                        </div>
                    </div>  
                </Descriptions.Item>
            </Descriptions>
            <Drawer
                title="选择表信息"
                visible={selectmodal.visible}
                width={'80%'}
                onClose={()=>{
                    selectmodal.cancelModal()
                }}
                destroyOnClose
            >
                <div style={{height:bodyheight-150}}>
                    <SelectMeta height={bodyheight-150} selectMeta={selectMeta} />
                </div>
                <div style={{marginTop:12}}>
                    <Space>
                        <Button loading={confirmLoading} type="primary" onClick={saveItem}>确定</Button>
                        <Button onClick={()=>{selectmodal.cancelModal()}}>返回</Button>
                    </Space>
                </div>
            </Drawer>
        </div>
    )
}

export default MatchMetaInfo