import React, { useState, useEffect } from 'react';
import { Button, Table, Tabs, Space, Modal, Collapse, PageHeader } from 'antd';
import { DetailListItem, DownloadListItem } from './data';
import { getPayandreply, getDetail } from './service';
import '@/assets/ld_style.less';

const { TabPane } = Tabs;
const { Panel } = Collapse;

const detailData: DetailListItem[] = [
  {
    key: '1',
    number: 'Test-20201103-zb/1',
    bidSection: '第一包',
    type: '传输网设备',
    bidBook: '不需要邮寄',
    contacts: '是温习',
    state: '已投标',
  },
];
const downloadData: DownloadListItem[] = [
  {
    key: '1',
    number: 'Test-20201103-zb/1',
    edition: '1',
    time: '2020/08/22 11：15：20',
    downloaders: '是温习',
    files: 'Test-20201103-zb/1.zip',
  },
];

const Index: React.FC<{}> = () => {
  const [detailList, setDetailList] = useState(detailData); // 标包详情
  const [downloadList, setDownloadList] = useState(downloadData); // 标书下载记录
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [packageList, setPackageList] = useState([]);
  const [listData, setListData] = useState<object>(); // 存储列表数据到详情
  const [companyName, setCompanyName] = useState<object>(); // 单位名称
  const [downloadStatus, setDownloadStatus] = useState<object>(); // 状态
  const [contactName, setContactName] = useState<object>(); // 联系人姓名

  const columns: any[] = [  // 标包列表
    {
      title: '序号',
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: '单位名称',
      dataIndex: 'companyName',
    },
    {
      title: '购标联系人',
      dataIndex: 'contactName',
    },
    {
      title: '购标联系人电话',
      dataIndex: 'contactTelephone',
    },
    {
      title: '当前状态',
      dataIndex: 'downloadStatus',
      render: (_: any, record: any) => {
        if (record.downloadStatus === 0) {
          return (<>未投标</>)
        } else if (record.downloadStatus === 1) {
          return (<>已投标</>)
        }
      }
    },
    {
      title: '操作',
      render: (text: any, record: any) => (
        <Space>
          <Button type="link" danger onClick={() => lookDetail(record)}>查看详情</Button>
        </Space>
      ),
    },
  ];
  const detailColumns: any[] = [  // 标包详情
    {
      title: '序号',
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: '标包编号',
      dataIndex: 'bidSectBizNum',
    },
    {
      title: '标段(包)名称',
      dataIndex: 'bidSectName',
    },
    {
      title: '标包分类',
      dataIndex: 'bidSectTypeDict',
    },
    {
      title: '购标联系人',
      dataIndex: 'contactName',
    },
    {
      title: '当前状态',
      dataIndex: 'downloadStatus',
    }
  ];
  const downloadColumns: any[] = [  // 标书下载记录
    {
      title: '序号',
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: '标包编号',
      dataIndex: 'bidSectBizNum',
    },
    {
      title: '版本',
      dataIndex: 'downloadVersion',
    },
    {
      title: '下载时间',
      dataIndex: 'downloadTime',
    },
    {
      title: '下载人',
      dataIndex: 'updownUserName',
    },
    {
      title: '下载文件名',
      dataIndex: 'fileName',
    }
  ];

  const callback = (key: any) => {
    console.log(key);
  }

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

  useEffect(() => {
    getPayandreply("4419993030303037111").then((res) => {
      if (res.code == 200) {
        setPackageList(res.data)
      }
    })
  }, []);

  return (
    <>
      <PageHeader
        title="购标及应答情况查看"
      />
      <div className="bidContent">
        <h3 className="name">项目名称：[Test-201009911-zb]</h3>
        {/* <Tabs>
          <TabPane tab="Test-20201102-zb/1 【第一包】" key="1"> */}
        <Button type="primary" danger>导出购标信息</Button>
        {
          packageList.map((item: any, index: any) => {
            return (
              <Collapse className='m10' defaultActiveKey={['1']} onChange={callback}>
                <Panel header={item.sectionVO.bsName} key="1">
                  <div>
                    <Table pagination={false} columns={columns} dataSource={item.bizSupplierRegisters} />
                  </div>
                </Panel>
              </Collapse>
            )
          })
        }
        <Modal // 查看详情
          title="购标信息"
          width={800}
          visible={detailVisible}
          onCancel={() => setDetailVisible(false)}
          footer={null}
        >
          <div className="relative">
            <Collapse className='m10' defaultActiveKey={['1']}>
              <Panel header="购标申请信息" key="1">
                <div className="address">
                  <p>单位名称：{companyName}</p>
                </div>
              </Panel>
            </Collapse>
          </div>
          <div className="relative">
            <Collapse className='m10' defaultActiveKey={['1']}>
              <Panel header="标包详情" key="1">
                {
                  detailList.map((val: any, index: any) => {
                    val.contactName = contactName
                    val.downloadStatus = downloadStatus
                  })
                }
                <Table
                  pagination={false}
                  columns={detailColumns}
                  dataSource={detailList}
                  className="mt10"
                />
              </Panel>
            </Collapse>
          </div>
          <div className="relative">
            <Collapse className='m10' defaultActiveKey={['1']}>
              <Panel header="标书下载记录" key="1">
                {
                  downloadList.map((val: any, index: any) => {
                    val.bidSectBizNum = detailList[0].bidSectBizNum
                  })
                }
                <Table
                  pagination={false}
                  columns={downloadColumns}
                  dataSource={downloadList}
                  className="mt10"
                />
              </Panel>
            </Collapse>
          </div>
        </Modal>
        {/* </TabPane>
        </Tabs> */}
      </div>
    </>
  )
}
export default Index