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';
import SupplierCommitment from '@/pages/Tender/UploadResponse/components/SupplierCommitment';

const Index: React.FC<{}> = () => {
  let projectId = getProId()
  const [expandedRowKeys, setExpandedRowKeys] = useState<ReactText[]>([0]);
  //供应商资质库显示状态
  const [supplierStatus, setSupplierStatus] = useState<boolean>(false);
  // 提示信息显隐
  const [tip, setTip] = useState<boolean>(true);
  //是否初始化列表-供应商承诺书用
  const [isInit, setIsInit] = useState<boolean>(false);

  /**
   * 根据项目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 listRender = (list: any[]) => list?.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>
        {isInit && (
          <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: listRender(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: {}
            }}
          />
        )}
        <SupplierCommitment projectId={projectId} callback={() => { setIsInit(true) }} />
      </div>
    </>
  )
}
export default Index