import React, { useState, useEffect } from 'react';
import { Table, Collapse, Button, Modal, Form, Upload } from 'antd';
import { RishListItem, WarningListItem, TableListItem, blackListItem, differentListItem, reviewListItem } from './data';
import '@/assets/ld_style.less'
import TextArea from 'antd/lib/input/TextArea';

const { Panel } = Collapse;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const rishData: RishListItem[] = [ // 投标文件制作地址日志信息查看
  {
    key: '1',
    supplier: '广州伊登软件科技有限公司',
    IParea: '0.0.0.0;0.0.0.0;192.168.1.113;0.0.0.0;0.0.0.0;61.139.140.174',
    MACarea: '3C-91-80-72-16-B8;00-FF-40-61-3C-32;3C-91-80-72-16-B7;3E-91-80-72-16-B7;4E-91-80-72-16-B7',
    time: '2020/07/27 11:10:06',
  },
];

const supplierData: RishListItem[] = [ // MAC地址相同的供应商信息如下
  {
    key: '1',
    supplier: '广州伊登软件科技有限公司;华为技术有限公司;中兴通讯股份有限公司',
    MACarea: '3C-91-80-72-16-B8;00-FF-40-61-3C-32;3C-91-80-72-16-B7;3E-91-80-72-16-B7;4E-91-80-72-16-B7',
  },
];

const warningData: WarningListItem[] = [ // 供应商报价完全一致或存在规律性差异预警
  {
    person: '华为技术有限公司',
    key: '1',
    score: '0.000',
    scoreKey: '3',
    price: '0.000',
    priceKey: '3',
    review: '700000.000',
    reviewKey: '2',
    offer: '700000.000',
    offerKey: '2',
    recommend: '1',
    warning: '无',
  },
  {
    person: '华为技术有限公司',
    key: '1',
    score: '0.000',
    scoreKey: '3',
    price: '0.000',
    priceKey: '3',
    review: '700000.000',
    reviewKey: '2',
    offer: '700000.000',
    offerKey: '2',
    recommend: '1',
    warning: '无',
  },
  {
    person: '华为技术有限公司',
    key: '1',
    score: '0.000',
    scoreKey: '3',
    price: '0.000',
    priceKey: '3',
    review: '700000.000',
    reviewKey: '2',
    offer: '700000.000',
    offerKey: '2',
    recommend: '1',
    warning: '无',
  },
];

const scoringData: TableListItem[] = [ // 评审专家打分偏离度分析
  {
    person: '华为技术有限公司',
    num: '3',
    scoring: 'XXX',
    action: '结果已确认'
  },
];

const blackData: blackListItem[] = [ // 供应商报价完全一致或存在规律性差异预警
  {
    key: '1',
    supplier: '华为技术有限公司',
    blacklist: '是',
    time: '2020-02-02',
    term: '3年',
    history: '是',
  },
  {
    key: '1',
    supplier: '华为技术有限公司',
    blacklist: '是',
    time: '2020-02-02',
    term: '3年',
    history: '是',
  },
  {
    key: '1',
    supplier: '华为技术有限公司',
    blacklist: '是',
    time: '2020-02-02',
    term: '3年',
    history: '是',
  },
];

const differentData: differentListItem[] = [ // 供应商报价完全一致或存在规律性差异预警
  {
    key: '1',
    person: '华为技术有限公司,报价700000.0000;谈判室测试0002,报价800000.0000;中网威信,报价900000.0000;',
    warning: '报价存在等差关系',
    operation: '已发送评标委员会',
  },
];

const reviewData: reviewListItem[] = [ // 供应商报价完全一致或存在规律性差异预警
  {
    key: '1',
    name: '华为技术有限公司',
    person: 'XXXX',
    scoring: 'XXXXX',
    deviate: 'XXXXX',
    time: 'XXXXX',
    remind: 'XXXXX',
    expert: 'XXXXX',
    reply: 'XXXXX',
    action: 'XXXXX',
  },
];

const Index: React.FC<{}> = () => {
  const [rishList] = useState(rishData);
  const [supplierList] = useState(supplierData);
  const [warningList] = useState(warningData);
  const [scoringList] = useState(scoringData);
  const [blackList] = useState(blackData);
  const [differentList] = useState(differentData);
  const [reviewList] = useState(reviewData);
  const [blackVisible, setBlackVisible] = useState<boolean>(false); // 查看黑名单历史
  const [writeVisible, setWriteVisible] = useState<boolean>(false); // 填写说明
  const [lookVisible, setLookVisible] = useState<boolean>(false); // 查看说明
  const [writeForm] = Form.useForm(); // 填写说明表单
  const [lookForm] = Form.useForm(); // 查看说明表单
  const [fileList, setFileList] = useState<any>([]); // 查看说明附件
  let aTotal: any = 3 // 评审结果展示及预警总数据条数

  const rishColumns: any[] = [  // 投标文件制作地址日志信息查看
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '供应商名称',
      dataIndex: 'supplier',
      key: 'supplier',
    },
    {
      title: 'IP地址',
      dataIndex: 'IParea',
      key: 'IParea',
    },
    {
      title: 'MAC地址',
      dataIndex: 'MACarea',
      key: 'MACarea',
    },
    {
      title: '上传时间',
      dataIndex: 'time',
      key: 'time',
    },
  ];

  const supplierColumns: any[] = [  // MAC地址相同的供应商信息如下
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '供应商名称',
      dataIndex: 'supplier',
      key: 'supplier',
    },
    {
      title: 'MAC地址',
      dataIndex: 'MACarea',
      key: 'MACarea',
    },
  ];

  const warningColumns: any[] = [  // 供应商报价完全一致或存在规律性差异预警
    {
      title: '投标人',
      dataIndex: 'person',
      key: 'person',
    },
    {
      title: '投标序号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '综合得分',
      dataIndex: 'score',
      key: 'score',
    },
    {
      title: '综合得分排序',
      dataIndex: 'scoreKey',
      key: 'scoreKey',
    },
    {
      title: '价格得分',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '价格得分排序',
      dataIndex: 'priceKey',
      key: 'priceKey',
    },
    {
      title: '评审价(单位:元)',
      dataIndex: 'review',
      key: 'review',
    },
    {
      title: '评审价排序',
      dataIndex: 'reviewKey',
      key: 'reviewKey',
    },
    {
      title: '报价(单位:元)',
      dataIndex: 'offer',
      key: 'offer',
    },
    {
      title: '报价排序',
      dataIndex: 'offerKey',
      key: 'offerKey',
    },
    {
      title: '中标结果推荐',
      dataIndex: 'recommend',
      key: 'recommend',
    },
    {
      title: '预警信息',
      dataIndex: 'warning',
      render: (value: any, row: any, index: any) => {
        const obj = {
          children: <Button onClick={() => lookBlackList(row)} type="link" danger>导出专家确认信息</Button>,
          props: {},
        };
        if (index === (aTotal - 1)) {
          obj.props.rowSpan = aTotal;
        } else {
          obj.props.rowSpan = 0;
        }
        return obj;
      }
    },
  ];

  const blackColumns: any[] = [  // MAC地址相同的供应商信息如下
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '供应商名称',
      dataIndex: 'supplier',
      key: 'supplier',
    },
    {
      title: '是否被列入集团黑名单',
      dataIndex: 'blacklist',
      key: 'blacklist',
    },
    {
      title: '被列入集团黑名单开始时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '被列入集团黑名单期限',
      dataIndex: 'term',
      key: 'term',
    },
    {
      title: '历似是否被列入集团黑名单',
      dataIndex: 'history',
      render: (value: any, row: any, index: any) => {
        return (
          <Button onClick={() => lookBlackList(row)} type="link" danger>查看黑名单历史</Button>
        )
      }
    },
  ];

  const differentColumns: any[] = [  // MAC地址相同的供应商信息如下
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '投标人及报价',
      dataIndex: 'person',
      key: 'person',
    },
    {
      title: '预警信息',
      dataIndex: 'warning',
      key: 'warning',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text: any, record: any, index: any) => {
        return (
          <Button type="link" danger>发送评委会确认</Button>
        )
      }
    },
  ];

  const reviewColumns: any[] = [  // MAC地址相同的供应商信息如下
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '专家姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '投标人',
      dataIndex: 'person',
      key: 'person',
    },
    {
      title: '打分偏离部分',
      dataIndex: 'scoring',
      key: 'scoring',
    },
    {
      title: '偏离度',
      dataIndex: 'deviate',
      key: 'deviate',
    },
    {
      title: '打分提交时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '提醒生成时间',
      dataIndex: 'remind',
      key: 'remind',
    },
    {
      title: '提醒专家时间',
      dataIndex: 'expert',
      key: 'expert',
    },
    {
      title: '专家回复时间',
      dataIndex: 'reply',
      key: 'reply',
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (value: any, row: any, index: any) => {
        // return (
        //   <Button onClick={() => setWriteVisible(true)} type="link" danger>填写说明</Button>
        // )
        return (
          <Button onClick={() => setLookVisible(true)} type="link" danger>查看说明</Button>
        )
      }
    },
  ];

  const scoringColumns: any[] = [  // 评审专家打分偏离度分析
    {
      title: '投标人',
      dataIndex: 'person',
      key: 'person',
    },
    {
      title: '投标序号',
      dataIndex: 'num',
      key: 'num',
    },
    {
      title: '打分偏离度(%)',
      dataIndex: 'scoring',
      key: 'scoring',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
  ];

  const lookBlackList = (val: any) => { // 查看黑名单历史
    setBlackVisible(true)
  }

  const subExplain = () => { // 提交说明
    console.log(writeForm.getFieldsValue())
  }

  useEffect(() => {
    setFileList([{
      uid: '-1',
      name: 'xxx.png',
      status: 'done',
      url: 'http://www.baidu.com/xxx.png',
    }])
  }, []);

  return (
    <>
      <div className="bidContent">
        <div className="titName">
          <span className="f16">风险点展示</span>
        </div>
        <Collapse accordion>
          <Panel header="投标文件制作地址日志信息查看" key="1">
            <div>
              <p>第一次应答</p>
              <Table bordered pagination={false} columns={rishColumns} dataSource={rishList} />
              <p className="mt10">第二次应答</p>
              <Table bordered pagination={false} columns={supplierColumns} dataSource={supplierList} />
            </div>
          </Panel>
          <Panel header="供应商报价完全一致或存在规律性差异预警" key="2">
            <div>
              <p>第一次报价</p>
              <Table bordered pagination={false} columns={differentColumns} dataSource={differentList} />
              <p className="mt10">第二次报价</p>
              <Table bordered pagination={false} columns={differentColumns} dataSource={differentList} />
            </div>
          </Panel>
          <Panel header="供应商的黑名单信息查看" key="3">
            <div>
              <p>分包号：Y209303/1[第1包]</p>
              <Table bordered pagination={false} columns={blackColumns} dataSource={blackList} />
            </div>
          </Panel>
          <Panel header="评审结果展示及预警" key="4">
            <div>
              <p>分包号：Y209303/1[第1包]</p>
              <Table bordered pagination={false} columns={warningColumns} dataSource={warningList} />
            </div>
          </Panel>
          <Panel header="评审专家打分偏离度提醒" key="5">
            <div>
              <p>分包号：Y209303/1[第1包]</p>
              <Table bordered pagination={false} columns={reviewColumns} dataSource={reviewList} />
            </div>
          </Panel>
          <Panel header="评审专家打分偏离度分析" key="6">
            <div>
              <p>分包号：Y209303/1[第1包]</p>
              <p>分包号：Y209303/1[第1包]　　表格主要展示各专家对投标人打分与所有专家对该投标人打分平均值的差值百分比，无-表示该专家未参与此部分评分，该表信息仅供参考</p>
              <Table bordered pagination={false} columns={scoringColumns} dataSource={scoringList} />
            </div>
          </Panel>
        </Collapse>
        <Modal // 查看黑名单历史
          title="查看黑名单历史"
          width={800}
          visible={blackVisible}
          onCancel={() => setBlackVisible(false)}
        ></Modal>
        <Modal // 填写说明
          title="填写说明"
          width={800}
          visible={writeVisible}
          onCancel={() => setWriteVisible(false)}
          onOk={subExplain}
        >
          <Form {...formItemLayout} form={writeForm}>
            <Form.Item label="说明" name="reason" rules={[{ required: true, message: '请填说明!' }]}>
              <TextArea rows={2} />
            </Form.Item>
            <Form.Item
              name="Upload"
              label="说明文件"
            >
              <Upload name="logo" action="/upload.do">
                <Button>选择文件</Button>
              </Upload>
            </Form.Item>
          </Form>
        </Modal>
        <Modal // 查看说明
          title="查看说明"
          width={800}
          visible={lookVisible}
          onCancel={() => setLookVisible(false)}
          footer={[]}
        >
          <Form {...formItemLayout} form={lookForm}>
            <Form.Item label="说明" name="reason">
              <TextArea rows={2} />
            </Form.Item>
            <Form.Item
              name="Upload"
              label="说明文件"
            >
              <Upload name="logo" fileList={fileList}>
                {/* <Button>选择文件</Button> */}
              </Upload>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </>
  )
}
export default Index