import {memo} from 'react';
import {Col, Descriptions, Row} from "antd";
import {styled} from "styled-components";
import {PureTableCard} from "../../../components/PureTableCard.jsx";
import {splitArray} from "../../../../utils/listTools.js";

export const ConfigPreviewPanel = memo(({
  col,
  descriptions,
  columns,
  values,
  rowKey
}) => {
  /** Table的默认RowKey */
  const defaultRowKey = rowKey?rowKey:"id"

  const cellConfig = {
    headDivider:true,
    pagination:false,
    tableStyle:{
      height:314,
      width:567
    },
    tableScroll:{
      y:250
    }
  }

  return (
    <div style={{height: 850}}>
      {/** 简述面板 */}
      <CustomDescriptions items={descriptions} column={col?col:5}/>
      {/** 详细面板 */}
      <Container>
        {
          splitArray(values).map((split,sIndex)=> (
            <Row key={sIndex} gutter={8} style={{marginBottom:8,flexFlow: 'row nowrap'}}>
              {
                split.map((item,index)=>{
                  const {title,extra,data} = item;
                  return (
                    <Col key={index}>
                      <PureTableCard rowKey={defaultRowKey} key={index} title={title} extra={extra} columns={columns} data={data} {...cellConfig}/>
                    </Col>
                  )
                })
              }
            </Row>
          ))
        }
      </Container>
    </div>
  )
})

const Container = styled.div`
  margin-top: 5px;
  height: 90%;
  background-color: ${p=>p.theme.mainTheme==='white'?'#f5f5f5':'rgba(255,255,255,0.15)'};
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
`
const CustomDescriptions = styled(Descriptions)`
  font-weight: 600;
  border: 1px solid ${p=>p.theme.colorBorder};
  border-radius: 6px;
  background-color: rgba(255,255,255,0.15);
  .ant-descriptions-item {
    padding-top: 16px;
    padding-inline-end: 20px;
    padding-inline-start: 20px;
    padding-bottom: 16px !important; 
  }
  .ant-descriptions-item-label {
    font-weight: 600;
    font-size: ${p=>p.theme.fontSize}px;
  }
`