import React, {useEffect, useState} from 'react';
import {Descriptions,Table} from "antd";
import {drainage,dam,transport} from "../../../../../service/sssq";



function Jzw({record}) {

  const columns1 = [
    {title: '建筑物名称', key: 'name', dataIndex: 'name', align: 'center',},
    {title: '型式', key: 'buildType', dataIndex: 'buildType', align: 'center'},
    {title: '工作阀门型式', key: 'valveType', dataIndex: 'valveType', align: 'center'},
    {title: '堰顶高程', key: 'crestEle', dataIndex: 'crestEle', align: 'center'},
    {title: '溢流段长或堰顶宽(m)', key: 'buildSize', dataIndex: 'buildSize', align: 'center'},
    {title: '设计泄洪流量(m³/s)', key: 'desQ', dataIndex: 'desQ', align: 'center'},
    {title: '校核泄洪流量(m³/s)', key: 'caliQ', dataIndex: 'caliQ', align: 'center'},
    {title: '启闭方式', key: 'ocMethod', dataIndex: 'ocMethod', align: 'center'},
    {title: '消能方式', key: 'elimMethod', dataIndex: 'elimMethod', align: 'center'},
  ];
  const columns2 = [
    {title: '建筑物名称', key: 'name', dataIndex: 'name', align: 'center',},
    {title: '型式', key: 'buildType', dataIndex: 'buildType', align: 'center'},
    {title: '堰顶高程', key: 'crestEle', dataIndex: 'crestEle', align: 'center'},
    {title: '溢流段长或堰顶宽(m)', key: 'buildSize', dataIndex: 'buildSize', align: 'center'},
    {title: '设计泄洪流量(m³/s)', key: 'desQ', dataIndex: 'desQ', align: 'center'},
    {title: '校核泄洪流量(m³/s)', key: 'caliQ', dataIndex: 'caliQ', align: 'center'},
    {title: '启用标准', key: 'enableCriteria', dataIndex: 'enableCriteria', align: 'center'},
  ];
  const columns3 = [
    {title: '建筑物名称', key: 'name', dataIndex: 'name', align: 'center',},
    {title: '洞(孔)身型式', key: 'buildType', dataIndex: 'buildType', align: 'center'},
    {title: '断面尺寸', key: 'sectionSize', dataIndex: 'sectionSize', align: 'center'},
    {title: '数量(条或孔)', key: 'num', dataIndex: 'num', align: 'center'},
    {title: '进口底槛高程(m)', key: 'inletEle', dataIndex: 'inletEle', align: 'center'},
    {title: '设计泄洪流量(m³/s)', key: 'desQ', dataIndex: 'desQ', align: 'center'},
    {title: '校核泄洪流量(m³/s)', key: 'caliQ', dataIndex: 'caliQ', align: 'center'},
    {title: '工作阀门型式', key: 'valveType', dataIndex: 'valveType', align: 'center'},
    {title: '启闭方式', key: 'ocMethod', dataIndex: 'ocMethod', align: 'center'},
    {title: '消能方式', key: 'elimMethod', dataIndex: 'elimMethod', align: 'center'},
  ];
  const columns4 = [
    {title: '设计流量(m³/s)', key: 'desQ', dataIndex: 'desQ', align: 'center'},
    {title: '输水道型式', key: 'transType', dataIndex: 'transType', align: 'center',},
    {title: '断面尺寸', key: 'sectionSize', dataIndex: 'sectionSize', align: 'center'},
    {title: '输水道长度(m)', key: 'transLeng', dataIndex: 'transLeng', align: 'center'},
    {title: '座教', key: 'num', dataIndex: 'num', align: 'center'},
  ];

  const [tableDataDs, setTableDataDs] = useState([])
  const [tableDataXs, setTableDataXs] = useState({})
  const [tableDataSs, setTableDataSs] = useState([])

  const getData=async (params)=>{
    setTableDataDs(await dam(params))
    setTableDataXs(await drainage(params))
    setTableDataSs(await transport(params))
  }
  useEffect(() => {
    getData({resCode:record.resCode})
  }, [record]);

  return (
    <div style={{maxHeight:"60vh",overflow:"auto"}}>
      <div className="des-title" style={{fontWeight:"bold",padding:"4px"}}>挡水建筑物</div>
      <Descriptions bordered size="small" column={3}>
        <Descriptions.Item label="坝型" style={{ width: '16.5%' }}>{tableDataDs[0]?.damType}</Descriptions.Item>
        <Descriptions.Item label="最大坝高(m)" style={{ width: '16.5%' }}>{tableDataDs[0]?.damMaxHeig}</Descriptions.Item>
        <Descriptions.Item label="坝顶高程(m)" style={{ width: '16.5%' }}>{tableDataDs[0]?.damTopElev}</Descriptions.Item>
        <Descriptions.Item label="坝顶长度(m)">{tableDataDs[0]?.damTopLen}</Descriptions.Item>
        <Descriptions.Item label="坝顶宽度(m)">{tableDataDs[0]?.damTopWid}</Descriptions.Item>
        <Descriptions.Item label="坝基防渗体型式">{tableDataDs[0]?.damImpermeableType}</Descriptions.Item>
        <Descriptions.Item label="副坝座数">{tableDataDs[0]?.subDamNum}</Descriptions.Item>
        <Descriptions.Item label="副坝总长度(m)">{tableDataDs[0]?.subDamLen}</Descriptions.Item>
        <Descriptions.Item label="副坝最大坝高(m)">{tableDataDs[0]?.subDamMaxHeig}</Descriptions.Item>
      </Descriptions>
      <div className="des-title" style={{fontWeight:"bold",padding:"4px"}}>泄水建筑物</div>
      <div className="table-title" style={{padding:"4px"}}>☆正常溢洪道</div>
      <Table rowKey="inx"
             sticky
             size="small"
             columns={columns1}
             pagination={false}
             dataSource={tableDataXs.normalSpillwayList}
      />
      <div className="table-title" style={{padding:"4px"}}>☆非常溢洪道</div>
      <Table rowKey="key"
             sticky
             size="small"
             columns={columns2}
             pagination={false}
             dataSource={tableDataXs.emergencySpillwayList}
      />
      <div className="table-title" style={{padding:"4px"}}>☆泄洪洞</div>
      <Table rowKey="key"
             sticky
             size="small"
             columns={columns3}
             pagination={false}
             dataSource={tableDataXs.sluiceGateList}
      />
      <div className="des-title" style={{fontWeight:"bold",padding:"4px"}}>输水建筑物</div>
      <Table rowKey="key"
             sticky
             size="small "
             columns={columns4}
             pagination={false}
             dataSource={tableDataSs}
      />
    </div>
  )
}

export default Jzw;