import React, { useState, useEffect } from 'react';
import { Button, Table, Space, Modal, Collapse, Popover, Typography } from 'antd';
import { getPayandreply, getDetail } from './service';
import '@/assets/ld_style.less';
import { getProId, getProMethod, getDicData } from '@/utils/session';
import FileDown from '@/utils/Download';
import { getURLInformation, multipleTypeTransform, proTableValueEnum } from '@/utils/CommonUtils';
import { btnAuthority } from '@/utils/authority';
import ProTable from '@ant-design/pro-table';
import { AlertOutlined, InfoCircleOutlined } from '@ant-design/icons';

const { Panel } = Collapse;
const { Text } = Typography;

let columns: any = [], detailColumns: any = [], downloadColumns: any[]
let modelTit: string, tit1: string, tit2: string, tit3: string, contactListName: string, contactTelephone: string, contactEmail: string, bidSectBizNum: string, bidSectName: string, bidSectTypeDict: string, bidcontactName: string, dowSectBizNum: string, exportBtn: string;

const Index: React.FC<{}> = () => {
  const [detailList, setDetailList] = useState<any>([]); // 标段详情
  const [downloadList, setDownloadList] = useState<any>([]); // 标书下载记录
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [packageList, setPackageList] = useState([]);
  const [companyName, setCompanyName] = useState<object>(); // 单位名称
  const [downloadStatus, setDownloadStatus] = useState<object>(); // 状态
  const [contactName, setContactName] = useState<object>(); // 联系人姓名
  const projectType = getURLInformation('roomType') ? getURLInformation('roomType') : '2';
  const MethodDict = getProMethod(); //获取采购方式
  const modalHeight = (innerHeight * 96) / 100;

  //获取字典
  const getDict: any = getDicData();
  const dictData = JSON.parse(getDict);

  if (MethodDict == "procurement_mode_1" || MethodDict == "procurement_mode_2") {
    modelTit = '购标信息'
    tit1 = '购标申请信息'
    tit2 = '标段详情'
    tit3 = '标书下载记录'
    contactListName = '购标联系人'
    contactTelephone = '购标联系人电话'
    contactEmail = '购标联系人邮箱'
    bidSectBizNum = '标段编号'
    bidSectName = '标段名称'
    bidSectTypeDict = '标段分类'
    bidcontactName = '标段联系人'
    dowSectBizNum = '标段编号'
    exportBtn = '导出购标信息'
  } else if (MethodDict == "procurement_mode_5" || MethodDict == "procurement_mode_6" || MethodDict == "procurement_mode_3" || MethodDict == "procurement_mode_9") {
    modelTit = '缴费信息'
    tit1 = '缴费申请信息'
    tit2 = '采购包详情'
    tit3 = '采购文件下载记录'
    contactListName = '缴费联系人'
    contactTelephone = '缴费联系人电话'
    contactEmail = '缴费联系人邮箱'
    bidSectBizNum = '采购包编号'
    bidSectName = '采购包名称'
    bidSectTypeDict = '采购包分类'
    bidcontactName = '采购包联系人'
    dowSectBizNum = '采购文件编号'
    exportBtn = '导出缴费信息'
  } else if (MethodDict == "procurement_mode_7") { // 询价
    modelTit = '缴费信息'
    tit1 = '缴费申请信息'
    tit2 = '采购包详情'
    tit3 = '询价文件下载记录'
    contactListName = '联系人'
    contactTelephone = '联系人电话'
    contactEmail = '联系人邮箱'
    bidSectBizNum = '采购包编号'
    bidSectName = '采购包名称'
    bidSectTypeDict = '采购包分类'
    bidcontactName = '采购包联系人'
    dowSectBizNum = '询价文件编号'
    exportBtn = '导出信息'
  } else if (MethodDict == "procurement_mode_4") {
    modelTit = '缴费信息'
    tit1 = '缴费申请信息'
    tit2 = '包件详情'
    tit3 = '招募文件下载记录'
    contactListName = '缴费联系人'
    contactTelephone = '缴费联系人电话'
    contactEmail = '缴费联系人邮箱'
    bidSectBizNum = '包件编号'
    bidSectName = '包件名称'
    bidSectTypeDict = '包件分类'
    bidcontactName = '包件联系人'
    dowSectBizNum = '招募文件编号'
    exportBtn = '导出缴费信息'
  } else if (MethodDict == "procurement_mode_8") {
    modelTit = '缴费信息'
    tit1 = '缴费申请信息'
    tit2 = '标段详情'
    tit3 = '标书下载记录'
    contactListName = '缴费联系人'
    contactTelephone = '缴费联系人电话'
    contactEmail = '缴费联系人邮箱'
    bidSectBizNum = '标段编号'
    bidSectName = '标段名称'
    bidSectTypeDict = '标段分类'
    bidcontactName = '标段联系人'
    dowSectBizNum = '标段编号'
    exportBtn = '导出缴费信息'
  }

  columns = [  // 标段列表
    {
      title: '序号',
      width: 50,
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: '单位名称',
      width: '25%',
      dataIndex: 'companyName',
      render: (_: any, record: any, index: any) => (
        <>
          {_}
          <Popover
            content={
              <Typography style={{ width: "282px" }}>
                <Text style={{ display: 'block', color: "rgb(245,156,38)" }}>温馨提示：</Text>
                <Text >该供应商成立日期为<Text underline>{record?.supplierCreatetime && record?.supplierCreatetime.foundTime}</Text>，距购标时间不足一年，建议在评审时请详细审查该供应商的企业资质。</Text>
              </Typography>
            }
          >
            {(record?.supplierCreatetime && record?.supplierCreatetime.toPayTime === 0) && <AlertOutlined style={{ color: "rgb(245,156,38)", marginLeft: 6 }} />}
          </Popover>
          {record?.supplierCreatetime && record?.supplierCreatetime.foundTime === null ? (
            <Popover
              content={
                <Typography>
                  <Text style={{ display: 'block', color: "rgb(245,156,38)" }}>温馨提示：</Text>
                  <Text>未查询到成立时间</Text>
                </Typography>
              }
            >
              <InfoCircleOutlined style={{ color: "rgb(245,156,38)", marginLeft: 6 }} />
            </Popover>
          ) : null}
        </>
      )
    },
    {
      title: contactListName,
      width: '15%',
      dataIndex: 'contactName',
    },
    {
      title: contactTelephone,
      width: '20%',
      dataIndex: 'contactTelephone',
    },
    {
      title: contactEmail,
      width: '20%',
      dataIndex: 'contactEmail',
    },
    {
      title: '当前状态',
      width: '15%',
      render: (text: any, record: any) => {
        if (MethodDict == "procurement_mode_1" || MethodDict == "procurement_mode_2") {
          if (record.registerStatus == '4') {
            return (
              <>已退出</>
            )
          } else {
            if (record.downloadStatus == '1') {
              return (
                <>已下载</>
              )
            } else if (record.downloadStatus == '2') {
              return (
                <>已投标</>
              )
            } else {
              if (record.payStatus == '2') {
                return (
                  <>已付款</>
                )
              } else if (record.payStatus == '1') {
                return (
                  <>未付款</>
                )
              }
            }
          }
        } else if (MethodDict == "procurement_mode_7") {
          if (record.downloadStatus == '1') {
            return (
              <>已下载</>
            )
          } else if (record.downloadStatus == '2') {
            if (record.offerTotalPrice == null || record.offerTotalPrice == undefined || record.offerTotalPrice == "") {
              return (
                <>已应答未报价</>
              )
            } else {
              return (
                <>已应答已报价</>
              )
            }

          } else {
            return (
              <>未下载</>
            )
          }
        } else {
          if (record.registerStatus == '4') {
            return (
              <>已退出</>
            )
          } else {
            if (record.downloadStatus == '1') {
              return (
                <>已下载</>
              )
            } else if (record.downloadStatus == '2') {
              return (
                <>已应答</>
              )
            } else {
              if (record.payStatus == '2') {
                return (
                  <>已付款</>
                )
              } else if (record.payStatus == '1') {
                return (
                  <>未付款</>
                )
              }
            }
          }
        }
      },
    },
    {
      title: '操作',
      width: '15%',
      render: (text: any, record: any) => (
        <Space>
          <Button hidden={btnAuthority(['ebtp-agency-project-manager', 'ebtp-purchase'])} type="link" danger onClick={() => lookDetail(record)}>查看详情</Button>
        </Space>
      ),
    },
  ];

  detailColumns = [  // 标段详情
    {
      title: '序号',
      width: 50,
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: bidSectBizNum,
      dataIndex: 'bidSectBizNum',
    },
    {
      title: bidSectName,
      dataIndex: 'bidSectName',
    },
    {
      title: bidSectTypeDict,
      dataIndex: 'procurementTypeDict',
      render: (_: any, record: any) => multipleTypeTransform(record.procurementTypeDict, proTableValueEnum(dictData['procurement_type=entrust'])),
    },
    {
      title: bidcontactName,
      dataIndex: 'contactName',
    },
    {
      title: '当前状态',
      dataIndex: 'downloadStatus',
      render: (text: any, record: any) => {
        if (MethodDict == "procurement_mode_1" || MethodDict == "procurement_mode_2") {
          if (record.downloadStatus == '0') {
            return (
              <>未下载</>
            )
          } else if (record.downloadStatus == '1') {
            return (
              <>已下载</>
            )
          } else if (record.downloadStatus == '2') {
            return (
              <>已投标</>
            )
          } else if (record.downloadStatus == '3') {
            return (
              <>已撤回</>
            )
          }
        } else {
          if (record.downloadStatus == '0') {
            return (
              <>未下载</>
            )
          } else if (record.downloadStatus == '1') {
            return (
              <>已下载</>
            )
          } else if (record.downloadStatus == '2') {
            return (
              <>已应答</>
            )
          } else if (record.downloadStatus == '3') {
            return (
              <>已撤回</>
            )
          }
        }
      },
    }
  ];

  downloadColumns = [  // 标书下载记录
    {
      title: '序号',
      width: 50,
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: dowSectBizNum,
      dataIndex: 'bidSectBizNum',
    },
    {
      title: '下载时间',
      dataIndex: 'downloadTime',
    },
    {
      title: '下载人',
      dataIndex: 'updownUserName',
    },
    {
      title: '下载文件名',
      width: '20%',
      dataIndex: 'fileName',
    }
  ];

  const callback = (key: any) => {
  }

  const lookDetail = (val: any) => { // 购标及应答情况查看-查看详情
    setDetailVisible(true)
    setCompanyName(val.companyName)
    setDownloadStatus(val.downloadStatus)
    setContactName(val.contactName)
    let data = {
      roomType: projectType
    }
    getDetail(val.id, data).then((res) => {
      if (res.code == 200) {
        setDetailList(res.data.projectSection)
        setDownloadList(res.data.bizUpdownRecords)
      }
    })
  }

  useEffect(() => {
    let projectId = getProId()
    let data = {
      roomType: projectType
    }
    getPayandreply(projectId, data).then((res) => {
      if (res.code == 200) {
        setPackageList(res.data)
      }
    })
  }, []);

  return (
    <>
      <div className="biddingResponse">
        <div className="exportBtn">
        </div>
        {
          packageList.map((item: any, index: any) => {
            return (
              <Collapse defaultActiveKey={['0']} onChange={callback}>
                <Panel header={item.sectionVO.bsName} key={index}>
                  <div>
                    {
                      item.bizSupplierRegisters ?
                        <div hidden={btnAuthority(['ebtp-agency-project-manager', 'ebtp-purchase'])} className="mb16">
                          <FileDown apiUrl={`/api/biz-service-ebtp-tender/v1/supplier_register/export/supplier/${item.sectionVO.bsId}/${item.bizSupplierRegisters[0].assessRoomId}?roomType=${projectType}`} fileName={''} type='xlsx' method='GET' btnName={exportBtn} />
                        </div> : null
                    }
                    <Table size='small' pagination={false} columns={columns} dataSource={item.bizSupplierRegisters} />
                  </div>
                </Panel>
              </Collapse>
            )
          })
        }
        <Modal // 查看详情
          // title="购标信息"
          title={modelTit}
          width={800}
          visible={detailVisible}
          onCancel={() => setDetailVisible(false)}
          footer={[<Button onClick={() => setDetailVisible(false)}>关闭</Button>]}
          centered
          style={{ maxHeight: modalHeight }}
          bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto' }}
        >
          <div className="relative">
            <Collapse defaultActiveKey={['1']}>
              <Panel header={tit1} key="1">
                <div className="address">
                  <p>单位名称：{companyName}</p>
                </div>
              </Panel>
            </Collapse>
          </div>
          <div className="relative">
            <Collapse defaultActiveKey={['1']}>
              <Panel header={tit2} key="1">
                {
                  detailList.map((val: any, index: any) => {
                    val.contactName = contactName
                    val.downloadStatus = downloadStatus
                  })
                }
                <ProTable
                  size='small'
                  pagination={false}
                  columns={detailColumns}
                  dataSource={detailList}
                  className="mt10"
                  toolBarRender={false}
                  search={false}
                />
              </Panel>
            </Collapse>
          </div>
          <div className="relative">
            <Collapse defaultActiveKey={['1']}>
              <Panel header={tit3} key="1">
                {
                  downloadList.map((val: any, index: any) => {
                    val.bidSectBizNum = detailList[0].bidSectBizNum
                  })
                }
                <Table
                  size='small'
                  pagination={false}
                  columns={downloadColumns}
                  dataSource={downloadList}
                  className="mt10"
                />
              </Panel>
            </Collapse>
          </div>
        </Modal>
      </div>
    </>
  )
}
export default Index