import React, { useState, useCallback, useMemo, useEffect } from "react";
import { Input, Select, Button, Form, Modal } from 'antd';
import Paginationtable from "../../components/paginationTable";
import { Confirm } from '../../components/ModalFun';
import { expertList, registerCheck } from "../api";
import { httpUrl } from '../fetch';

import './index.scss';
import '../index.scss';
const { Search, TextArea } = Input;

function RegisterList({ showNotification, form }) {
  const { getFieldDecorator, validateFields, setFieldsValue, } = form;
  const [reload, setReload] = useState();
  const [loading, setLoading] = useState(false);
  const [curPage, setCurPage] = useState(1);
  const [dataList, setDataList] = useState([]);
  const [total, setTotal] = useState(0);
  const [searchInput, setSearchInput] = useState('');
  const [pageSize, setPageSize] = useState(10);

  const [visible, setVisible] = useState(false);
  const [active, setActive] = useState({});

  const columns = useMemo(() => {
    return [{
      title: '姓名',
      dataIndex: 'expertName',
      width: 75,
      key: 'expertName',
      fixed: 'left',
      // render: (text, record) => {
      //   return record.user ? record.user.nickname || record.user.login : ''
      // }
    },
    {
      title: '最高学历',
      dataIndex: 'highestDegree',
      key: 'highestDegree',
      width: 80,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '工作单位',
      dataIndex: 'workplace',
      key: 'workplace',
    },
    {
      title: '单位类别',
      dataIndex: 'workplaceType',
      width: 80,
    },
    {
      title: '工作性质',
      dataIndex: 'workNature',
      width: 80,
    },
    {
      title: '专业职称',
      dataIndex: 'professionalTitle',
      width: 120,
    },
    {
      title: '职称职级',
      dataIndex: 'titleRank',
      width: 80,
    },
    {
      title: '专家类别',
      dataIndex: 'expertType',
      width: 80,
    },
    {
      title: '评审领域1',
      dataIndex: 'reviewAreaOne',
      width: 100,
    },
    {
      title: '评审领域2',
      dataIndex: 'reviewAreaTwo',
      width: 100,
    },
    {
      title: '评审领域3',
      dataIndex: 'reviewAreaThree',
      width: 100,
    },
    {
      title: '毕业院校',
      dataIndex: 'graduatedFrom',
    },
    {
      title: '院校专业',
      dataIndex: 'major',
    },
    {
      title: '身份证号',
      dataIndex: 'idNumber',
      width: 170,
    },
    {
      title: '邮箱地址',
      dataIndex: 'expertEmail',
      width: 200,
    },
    {
      title: '开户银行',
      dataIndex: 'bankName',
      width: 110,
    },
    {
      title: '银行账号',
      dataIndex: 'bankAccount',
    },
    {
      title: '个人简介',
      dataIndex: 'resumeAttachments',
      render: (text, record) => {
        return text && text.map(item => {
          return <a className="link" onClick={()=>{downFile(item.id)}}>{item.fileName}</a>
        })
      }
    },
    {
      title: '职称证明',
      dataIndex: 'titleCertificateAttachments',
      render: (text, record) => {
        return text && text.map(item => {
          return <a className="link" onClick={()=>{downFile(item.id)}}>{item.fileName}</a>
        })
      }
    },
    {
      title: '学术成果',
      dataIndex: 'academicAchievementsAttachments',
      render: (text, record) => {
        return text && text.map(item => {
          return <a className="link" onClick={()=>{downFile(item.id)}}>{item.fileName}</a>
        })
      }
    },
    {
      title: '荣誉称号',
      dataIndex: 'honorsAttachments',
      render: (text, record) => {
        return text && text.map(item => {
          return <a className="link" onClick={()=>{downFile(item.id)}}>{item.fileName}</a>
        })
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 120,
      fixed: 'right',
      render: (text, record) => {
        return <React.Fragment>
          <Button className="mr5 font-12" type="primary" size="small" onClick={() => { check(record, '1') }}>通过</Button>
          <Button className="mr5 font-12" type="danger" size="small" onClick={() => { setVisible(true); setActive(record) }}>拒绝</Button>
        </React.Fragment>
      }
    }
    ];
  }, []);

  function downFile(id) {
    let url = httpUrl + '/busiAttachments/download/' + id;
    window.open(url);
  }

  function onShowSizeChange(current, pageSize){
    setCurPage(current);
    setPageSize(pageSize);
  }

  // 获取列表
  useEffect(() => {
    setLoading(true);
    let params = {
      searchInput,
      pageSize,
      curPage,
      statusString: '-1',
    };
    expertList(params).then(data => {
      if (data && Array.isArray(data.rows)) {
        for (const item of data.rows) {
          item.detail = item.paperDetail && item.paperDetail.content;
        }
      }
      setDataList(data.rows || []);
      setLoading(false);
      setTotal(data.total);
    });
  }, [curPage, reload, searchInput]);

  function check(record, checkStatus) {
    Confirm({
      title: "提醒",
      content: checkStatus == '1' ? "您确定要审核通过吗？通过后该用户将成为专家库的一员" : "您确定要拒绝吗？拒绝后该用户此次不能成为专家",
      okText: '确定',
      cancelText: '取消',
      onOk() {
        registerCheck({
          expertId: record.id,
          isPassed: checkStatus,
          userId: record.userId,
        }).then(res => {
          if (res.message === 'success') {
            showNotification('操作成功!');
            setReload(Math.random());
          }
        });
      },
    });
  }

  const helper = useCallback(
    (name, rules, widget) => (
      <Form.Item>
        {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
      </Form.Item>
    ),
    []
  );

  function refuse() {
    validateFields((err, values) => {
      if (!err) {
        registerCheck({
          expertId: active.id,
          isPassed: 2,
          userId: active.userId,
          reviewerAdvice:values.reviewerAdvice,
        }).then(res => {
          if (res.message === 'success') {
            showNotification('操作成功!');
            setReload(Math.random());
            setFieldsValue({
              reviewerAdvice:''
            });
            setVisible(false);
            setActive({});
          }
        });
      }
    });
        
      
  }



  return (
    <div className="expert-list centerbox">
      <div className="center-screen mb30" >
          <Search
            maxLength={20}
            style={{ width: "300px" }}
            placeholder="请输入专家姓名或手机号"
            onSearch={(value) => { setSearchInput(value); setCurPage(1); }}
          />
      </div>
      <Paginationtable
        loading={loading}
        dataSource={dataList}
        columns={columns}
        total={total}
        setCurPage={setCurPage}
        current={curPage}
        scroll={{ x: 2700 }}
        onShowSizeChange={onShowSizeChange}
        showSizeChanger
      />

      <Modal
        title="拒绝的原因"
        visible={visible}
        onOk={refuse}
        onCancel={() => { setVisible(false) }}
        className="form-edit-modal"
      >
        {helper(
          "reviewerAdvice",
          [{ required: visible, message: '请给出拒绝的原因' }],
          <TextArea
            placeholder="(必填)我想给点什么意见呢，200字以内"
            autoSize={{ minRows: 6 }}
            className="applyText"
            maxLength={200}
          />
        )}
      </Modal>
    </div>)
}
export default Form.create()(RegisterList);