import React,{useState} from "react"
import {Spin} from "antd"
import { useGetMetaAssetsCompareInfo } from "../hooks"
import VersionCompareTable from './VersionCompareTable';
import './VersionCompare.less';

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

    const {item} = props

    console.log(item)

    const [selectedColumnTitles, setSelectedColumnTitles] = useState()

    const {compareloading,comparedata} = useGetMetaAssetsCompareInfo({dataAssetId:item.id})

    return(
        <Spin spinning={compareloading}>
            <div className='flex model-version-compare'>
                <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
                    <VersionCompareTable 
                        data={comparedata} 
                        title="资源字段"
                        columntype="assets"
                        selectedColumnTitles={selectedColumnTitles} 
                        onFilterChange={(val) => setSelectedColumnTitles(val)} 
                    />
                </div>
                <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
                    <VersionCompareTable 
                        data={comparedata} 
                        title={"元数据字段"}
                        columntype="meta"
                        selectedColumnTitles={selectedColumnTitles} 
                        onFilterChange={(val) => setSelectedColumnTitles(val)} 
                        direction='right' 
                    />
                </div>
            </div> 
        </Spin>
    )
}

export default AssetsMetaCompare