import React, { useState, useEffect } from 'react';
import type { ReactText } from 'react';
import { Row, Col, Tag } from 'antd';
import { getPackages } from './service';
import '@/assets/ld_style.less';
import { getProId, getSessionProjectData } from '@/utils/session';
import ProList from '@ant-design/pro-list';
import TableLook from './TableLook';
import { getStatusByProId } from '@/services/downLoad';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const Index: React.FC<{}> = () => {
  const [dateList, setDateList] = useState([]);
  let projectId = getProId()
  const [expandedRowKeys, setExpandedRowKeys] = useState<ReactText[]>([0]);
  //供应商资质库显示状态
  const [supplierStatus, setSupplierStatus] = useState<boolean>(false);
  // 提示信息显隐
  const [tip, setTip] = useState<boolean>(true);

  /**
   * 根据项目id获取供应商资质库信息引用状态
   * @param id 项目id
   * @returns true-有供应商资质库信息 false-无供应商资质库信息
   */
  const getSupplierStatus = async (id: string) => {
    await getStatusByProId({id: id}).then(res => {
        setTip(false)
        if(res?.code == 200) {
            setSupplierStatus(res?.data)
        }
    })
  }

  let listDate = dateList?.map((item: any, index: any) => ({
    title: item.packageName + '—第' + item.roomSort + '轮',
    description: (
      <div>
        <TableLook messProp={item} itemIndex={index} supplierStatus={supplierStatus}/>
        {/* {expandedRowKeys.includes(item.sectionVO.bsId) ? <TableLook messProp={item} itemIndex={index} /> : null} */}
      </div>
    )
  }));

  const changeList = (expanded: any, record: any) => { // 列表展开
  }

  useEffect(() => {
    getSupplierStatus(projectId)
  }, []);

  return (
    <>
      <div className="uploadResponse">
        <div>
          <div>
            <Row>
                <Col span="24">
                    <div className="first-title">分包分段信息</div>
                </Col>
                <Col span="24" hidden={tip}>
                  <div><Tag hidden={!supplierStatus} style={{ marginBottom: "10px", marginLeft: "20px" }} icon={<ExclamationCircleOutlined />} color="warning"> 为确保制作应答文件环节顺利进行，请您提前维护好供应商库信息，具体操作步骤可参照系统菜单-【我的工作台】-【共享文档下载】-【招标采购中心引用供应商信息库信息操作手册】 </Tag></div>
                  <div><Tag hidden={getSessionProjectData().isIPassFile == '1' ? true : false} style={{ marginBottom: "20px" }} icon={<ExclamationCircleOutlined />} color="warning"> 依照代理设置，您在客户端制作应答文件及上传应答文件时需要插入ipass，请您提前知晓。</Tag></div>
                </Col>
            </Row>
          </div>
        </div>
        <ProList
          className="pro-list"
          rowKey="bsId"
          params={{ "projectId": projectId }}
          request={async (params) =>
            await getPackages(params).then((res) => {
              if (res.code == 200) {
                let data = res.data;
                setDateList(res.data.records)
                return Promise.resolve({
                  data: data.records,
                  success: res.success,
                  total: res.data.total,
                  current: res.data.current,
                });
              }
              return Promise.resolve({
                data: [],
                success: false,
                total: 0,
                current: 1,
              });
            })
          }
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: true,
          }}
          expandable={{ expandedRowKeys, onExpandedRowsChange: setExpandedRowKeys, onExpand: changeList }}
          dataSource={listDate}
          metas={{
            title: {},
            content: {},
            description: {}
          }}
        />
      </div>
    </>
  )
}
export default Index