import React, { useState, useEffect } from 'react';
import { Button, Table, Tabs, Space, Progress, Radio, Input, Checkbox, Select, Modal, Menu, Pagination } from 'antd';
import { TableListItem } from './data';
import { getTabList, getProgress, getScoreDetail, getRegister, submitDetail, updateJudgesStatus } from './service';
import '@/assets/ld_style.less'

const { TabPane } = Tabs;
const { Option } = Select;
const { SubMenu } = Menu;

const dataSource: TableListItem[] = [
  {
    first: '初审项一',
    standard: '审查标准1',
    pass: '全部及格',
  },
  {
    first: '初审项二',
    standard: '审查标准1',
    pass: '全部及格',
  },
  {
    first: '初审项三',
    standard: '审查标准1',
    pass: '全部及格',
  },
  {
    first: '初审项四',
    standard: '审查标准1',
    pass: '全部及格',
  }
];

const recordColumns: any[] = [  // 初审记录表
  {
    title: '序号',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: '详审类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '评审因素',
    dataIndex: 'factor',
    key: 'factor',
  },
  {
    title: '投标人',
    children: [
      {
        title: '广州软件有限公司',
        dataIndex: 'company1',
        key: 'company1',
      },
      {
        title: '华为有限公司',
        dataIndex: 'company2',
        key: 'company2',
      },
      {
        title: '中兴投资有限公司',
        dataIndex: 'company3',
        key: 'company3',
      },
    ]
  }
];
const recordSource: any[] = [ // 详审记录表
  {
    key: '1',
    type: '商务',
    factor: '资格审查因素1',
    company1: '12',
    company2: '10',
    company3: '11',
  },
  {
    key: '2',
    type: '商务',
    factor: '资格审查因素1',
    company1: '8',
    company2: '10',
    company3: '13',
  },
  {
    key: '3',
    type: '技术',
    factor: '资格审查因素1',
    company1: '12',
    company2: '9',
    company3: '6',
  },
  {
    key: '4',
    type: '技术',
    factor: '资格审查因素1',
    company1: '——',
    company2: '9',
    company3: '10',
  },
  {
    key: '',
    type: '综合得分',
    factor: '',
    company1: '42',
    company2: '44',
    company3: '43',
  },
];

const resultSource: any[] = [ // 评审汇总
  {
    name: '华为有限公司',
    key: '3',
    company1: '60.00',
    company2: '63.00',
    company3: '62.00',
    company4: '65.00',
    company5: '52.00',
    offer: '40.00',
    score: '91.00',
  },
  {
    name: '中兴通讯有限公司',
    key: '2',
    company1: '60.00',
    company2: '63.00',
    company3: '62.00',
    company4: '65.00',
    company5: '52.00',
    offer: '40.00',
    score: '91.00',
  },
];
const resultColumns: any[] = [ // 评审汇总
  {
    title: '投标人',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '投标序号',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: '评审委员会',
    children: [
      {
        title: '阿大',
        dataIndex: 'company1',
        key: 'company1',
      },
      {
        title: '阿二',
        dataIndex: 'company2',
        key: 'company2',
      },
      {
        title: '阿三',
        dataIndex: 'company3',
        key: 'company3',
      },
      {
        title: '阿四',
        dataIndex: 'company4',
        key: 'company4',
      },
      {
        title: '阿五',
        dataIndex: 'company5',
        key: 'company5',
      },
    ]
  },
  {
    title: '报价分',
    dataIndex: 'offer',
    key: 'offer',
  },
  {
    title: '最终得分',
    dataIndex: 'score',
    key: 'score',
  },
];

const collectColumns: any[] = [ // 评审汇总2
  {
    title: '序号',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: '详审类型',
    dataIndex: 'type',
    key: 'type',
    render: (value: any, row: any, index: any) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 0) {
        obj.props.rowSpan = 2;
      }
      if (index === 1) {
        obj.props.rowSpan = 0;
      }
      if (index === 2) {
        obj.props.rowSpan = 2;
      }
      if (index === 3) {
        obj.props.rowSpan = 0;
      }
      return obj;
    },
  },
  {
    title: '评审因素',
    dataIndex: 'factor',
    key: 'factor',
  },
  {
    title: '评委',
    children: [
      {
        title: '评委1',
        dataIndex: 'judges1',
        key: 'judges1',
      },
      {
        title: '评委2',
        dataIndex: 'judges2',
        key: 'judges2',
      },
      {
        title: '评委3',
        dataIndex: 'judges3',
        key: 'judges3',
      },
      {
        title: '评委4',
        dataIndex: 'judges4',
        key: 'judges4',
      },
      {
        title: '评委5',
        dataIndex: 'judges5',
        key: 'judges5',
      },
    ]
  },
];
const collectSource: any[] = [ // 评审汇总2
  {
    key: '1',
    type: '商务',
    factor: '商务项1',
    judges1: '91.00',
    judges2: '91.00',
    judges3: '91.00',
    judges4: '91.00',
    judges5: '91.00',
  },
  {
    key: '2',
    type: '商务',
    factor: '商务项2',
    judges1: '91.00',
    judges2: '91.00',
    judges3: '91.00',
    judges4: '91.00',
    judges5: '91.00',
  },
  {
    key: '3',
    type: '技术',
    factor: '技术项1',
    judges1: '91.00',
    judges2: '91.00',
    judges3: '91.00',
    judges4: '91.00',
    judges5: '91.00',
  },
  {
    key: '4',
    type: '技术',
    factor: '技术项2',
    judges1: '91.00',
    judges2: '91.00',
    judges3: '91.00',
    judges4: '91.00',
    judges5: '91.00',
  },
  {
    key: '',
    type: '是否完成评审',
    factor: '',
    judges1: '完成',
    judges2: '完成',
    judges3: '未完成',
    judges4: '未完成',
    judges5: '未完成',
  },
];

const plainOptions: any[] = ['3', '4', '5'];

const Index: React.FC<{}> = () => {
  const [plainList] = useState(plainOptions);
  const [detailVisible, setDetailVisible] = useState<boolean>(false); // 详审记录表
  const [bidDetailVisible, setBidDetailVisible] = useState<boolean>(false); // 详审详情
  const [changeVisible, setChangeVisible] = useState<boolean>(true); // 详审详情-个人及记录表切换
  const [lockVisible, setLockVisible] = useState<boolean>(false); // 详审记录表-解锁

  const [tabList, setTabList] = useState<any>([]); // tab
  const [process, setProcess] = useState<any>(); // 我的进度
  const [totalSupplierColumns, setTotalSupplierColumns] = useState<any>([]); // 总供应商列头
  const [dataSource, setDataSource] = useState<any>([]); // 初审项配置 
  const [supplierColumns, setSupplierColumns] = useState<any>([]); // 当前显示供应商列头
  const [current] = useState<number>(1); // 当前页码
  const [total, setTotal] = useState<number>(1); // 共多少数据
  const [supplierId] = useState<any>([]);  // 供应商id数组

  const columns: any[] = [  // 列表数据
    {
      title: '详审项',
      dataIndex: 'scoreItem',
    },
    {
      title: '评分标准',
      dataIndex: 'rvwStandard',
    },
    // {
    //   title: '中兴通讯有限公司',
    //   dataIndex: 'action',
    //   key: 'action',
    //   render: (_, record) => {
    //     if (record.first == '初审项一') {
    //       return (
    //         <div>
    //           <Input style={{ width: 160 }} placeholder="" /><br />
    //           <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
    //         </div>
    //       )
    //     } else if (record.first == '初审项二') {
    //       return (
    //         <div>
    //           <Radio.Group onChange={onChange} defaultValue="">
    //             <Radio value={1}>3</Radio>
    //             <Radio value={2}>5</Radio>
    //             <Radio value={3}>7</Radio>
    //           </Radio.Group><br />
    //           <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
    //         </div>
    //       )
    //     } else if (record.first == '初审项三') {
    //       return (
    //         <div>
    //           <Checkbox.Group options={plainList} onChange={checkChange} /><br />
    //           <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
    //         </div>
    //       )
    //     } else if (record.first == '初审项四') {
    //       return (
    //         <div>
    //           <Select style={{ width: 160 }} onChange={handleChange}>
    //             <Option value="5">5</Option>
    //             <Option value="4">4</Option>
    //             <Option value="3">3</Option>
    //           </Select><br />
    //           <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
    //         </div>
    //       )
    //     }
    //   }
    // },
  ];

  const getTabId = (key: any) => { // tab切换获取当前tab的key
    ratingData(tabList[key].id)
  }

  const myProcess = (id: any) => { // 我的进度
    let date = {
      bidEvalId: '222',
      reviewTurnId: '1331563852545916928',
      categoryId: id
    }
    getProgress({ ...date }).then((res) => {
      if (res.code == 200) {
        setProcess(res.data)
      }
    })
  }

  const supplierTab = (id: any) => { // 供应商列头
    let date = {
      assessRoomId: '1331563852445253632',
      reviewTurnId: '1331563852545916928'
    }
    const newColumns = [...columns];
    getRegister({ ...date }).then((res) => {
      if (res.code == 200) {
        setTotal(res.data.length)
        setTotalSupplierColumns(res.data)
        let firstArr = res.data.slice(0, 3)
        firstArr.map((item: any) => {
          supplierId.push(item.supplierRegisterId)
          newColumns.push({
            title: item.supplierRegisterName,
            dataIndex: item.supplierRegisterId,
            render: (text: any, record: any) => {
              if (record.scoreMethod == '0') { // 单选
                const radioOptions: any[] = [];
                record.standardList.map((item: any) => {
                  radioOptions.push({ label: item.standardName + '(' + item.standardDetailScore + '分)', value: item.standardDetailScore })
                })
                return (
                  <div>
                    <Radio.Group
                      defaultValue={Number(record.scoreMap[item.supplierRegisterId].resultValue)}
                      options={radioOptions}
                      onChange={onChange}
                    /><br />
                    <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
                  </div>
                )
              } else if (record.scoreMethod == '1') {// 多选
                const checkboxOptions: any[] = [];
                record.standardList.map((item: any) => {
                  checkboxOptions.push({ label: item.standardName + '(' + item.standardDetailScore + '分)', value: item.standardDetailScore + '-' + item.id })
                })
                return (
                  <div>
                    <Checkbox.Group
                      defaultValue={[0]}
                      options={checkboxOptions}
                      onChange={checkChange}
                    /><br />
                    <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
                  </div>
                )
              } else if (record.scoreMethod == '2') { // 人工
                return (
                  <div>
                    <Input style={{ width: 160 }} placeholder="" /><br />
                    <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
                  </div>
                )
              } else if (record.scoreMethod == '4') { // 步长
                return (
                  <div>
                    <Select style={{ width: 160 }} onChange={handleChange}>
                      <Option value="5">5</Option>
                      <Option value="4">4</Option>
                      <Option value="3">3</Option>
                    </Select><br />
                    <Button type="link" danger>备注</Button><Button type="link" danger>查看应答文件</Button>
                  </div>
                )
              }
            }
          })
        })
        setSupplierColumns(newColumns)
      }
    })
  }

  const ratingData = async (id: any) => { // 评分数据
    let query = {
      bidEvalId: '222',
      categoryId: id,
      supplierRegisterIds: ['1333954738571444224', '1333957465926008832', '1333957467482095616']
    }
    await getScoreDetail({ ...query }).then((res) => { // 评分数据
      if (res.code == 200) {
        // if (res.data.judgesStatus == '2') {
        //   disabled = true
        //   setIsDisabled(true)
        // } else {
        //   disabled = false
        //   setIsDisabled(false)
        // }
        // setSubId(res.data.id)
        setDataSource(res.data.detailList)
        // totalQualified = res.data.detailList
      }
    })
  }

  const changePagination = (page: any) => {

  }

  const onChange = (e: any) => {
    console.log(e.target.value);
  }

  const checkChange = (val: any) => {
    console.log('checked = ', val);
  }

  const handleChange = (value: any) => {
    console.log(value);
  }

  const handleClick = (e: any) => { // 详审详情树切换
    if (e.key == 1) { // 详审记录表
      setChangeVisible(true)
    } else if (e.key == 2) { // 专家个人初审表
      setChangeVisible(false)
    }
  }

  const changeLock = (val: any) => { // 解锁专家
    console.log('checked = ', val);
  }

  useEffect(() => {
    let date = {
      assessRoomId: '1331563852445253632',
      reviewTurnId: '1331563852545916928',
      rvwType: '2'
    }
    getTabList({ ...date }).then((res) => { // tab
      if (res.code == 200) {
        if (res.data.length > 0) {
          setTabList(res.data)
          myProcess(res.data[0].id)
          // setTypeId(res.data[0].id)
          supplierTab(res.data[0].id) // 供应商列头
          ratingData(res.data[0].id) // 评分数据
          // setTypeId(res.data[0].id) // 设置类别id
        }
      }
    })
  }, []);

  return (
    <>
      <div className="bidContent">
        <h3 className="name">项目名称：测试项目<span>标段名称：标包1</span></h3>
        <Tabs defaultActiveKey="0" onChange={getTabId}>
          {
            tabList.map((item: any, index: any) => {
              return (
                <TabPane tab={item.name} key={index}>
                  <div className="p10">
                    <div className="mb20">
                      <div className="process">我的进度：<Progress percent={process} /></div>
                      <div className="block">
                        <Space>
                          <Button type="primary" danger>保存</Button>
                          <Button type="primary" danger>提交</Button>
                          <Button onClick={() => setDetailVisible(true)} type="primary" danger>详审记录表</Button>
                          <Button onClick={() => setBidDetailVisible(true)} type="primary" danger>详审详情</Button>
                        </Space>
                      </div>
                    </div>
                    <div>
                      <Pagination
                        defaultCurrent={current}
                        total={total}
                        defaultPageSize={3}
                        showSizeChanger={false}
                        onChange={changePagination}
                      />
                      <Table className="labelTable" pagination={false} columns={supplierColumns} dataSource={dataSource} />
                    </div>
                  </div>
                </TabPane>
              )
            })
          }
          {/* <TabPane tab="商务" key="1">
            <div className="p10">
              <div className="mb20">
                <div className="process">我的进度：<Progress percent={30} /></div>
                <div className="block">
                  <Space>
                    <Button type="primary" danger>保存</Button>
                    <Button type="primary" danger>提交</Button>
                    <Button onClick={() => setDetailVisible(true)} type="primary" danger>详审记录表</Button>
                    <Button onClick={() => setBidDetailVisible(true)} type="primary" danger>详审详情</Button>
                  </Space>
                </div>
              </div>
              <div>
                <Table pagination={false} columns={columns} dataSource={dateList} />
              </div>
            </div>
          </TabPane> */}
          {/* <TabPane tab="评审汇总" key="5">
            <p className="red mb0">详审结果汇总表</p>
            <div>
              <Button type="primary" danger size="small" className="fr ml10 mb10">提交汇总</Button>
              <Button onClick={() => setLockVisible(true)} type="primary" danger size="small" className="fr mb10">评审解锁</Button>
            </div>
            <Table bordered pagination={false} columns={resultColumns} dataSource={resultSource} />
            <p className="red">详细审进度表</p>
            <Table bordered pagination={false} columns={collectColumns} dataSource={collectSource} />
          </TabPane> */}
        </Tabs>
      </div>
      <Modal // 详审记录表
        width={800}
        title="详审记录表"
        visible={detailVisible}
        onCancel={() => setDetailVisible(false)}
        footer={null}
      >
        <Table bordered pagination={false} columns={recordColumns} dataSource={recordSource} />
      </Modal>
      <Modal // 详审详情
        width={800}
        title="详审详情"
        visible={bidDetailVisible}
        onCancel={() => setBidDetailVisible(false)}
        footer={null}
      >
        <Menu
          onClick={handleClick}
          style={{ width: 180 }}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          className="left-menu"
        >
          <SubMenu key="sub1" title="评审记录表">
            <Menu.Item key="1">初审记录表</Menu.Item>
            <Menu.Item key="2">专家个人初审表</Menu.Item>
          </SubMenu>
        </Menu>
        {
          changeVisible ? (
            <div className="right-content">
              <p className="red">个人初审记录</p>
              <Table className="no-clear" bordered pagination={false} columns={recordColumns} dataSource={recordSource} />
            </div>
          ) : (
              <div className="right-content">
                <p className="red">专家个人初审表</p>
                <p>阿大</p>
                <Table className="no-clear" bordered pagination={false} columns={recordColumns} dataSource={recordSource} />
                <p>阿二</p>
                <Table className="no-clear" bordered pagination={false} columns={recordColumns} dataSource={recordSource} />
                <p>阿三</p>
                <Table className="no-clear" bordered pagination={false} columns={recordColumns} dataSource={recordSource} />
              </div>
            )
        }
      </Modal>
      <Modal // 初审解锁
        title="初审解锁"
        width={600}
        visible={lockVisible}
        onCancel={() => setLockVisible(false)}
        footer={null}
      >
        <label>解锁专家：</label>
        <Checkbox.Group options={plainList} onChange={changeLock} />
      </Modal>
    </>
  )
}
export default Index