import React, { useState, useEffect } from "react";
import { Modal } from 'antd';
import Paginationtable from "../../../components/paginationTable";
import { getOpsScoringDetails, getRules } from "../../api";
import sucess from '../image/sucess.svg';

import './index.scss';
import '../../index.scss';

function GradesModal({ setVisible, visible, taskId, opsDetail, containerType }) {
  // 主table参数
  const [loading, setLoading] = useState(false);
  const [dataList, setDataList] = useState([]);
  // 评分规则
  const [rules, setRules] = useState({});
  // 通用列
  const columns = [
    {
      title: '评审专家',
      dataIndex: 'expertName',
      key: 'expertName',
      width: 100,
    },
    {
      title: '电话',
      dataIndex: 'expertPhone',
      key: 'expertPhone',
      width: 130,
    },
    {
      title: '评审打分',
      dataIndex: 'gradesAverage',
      key: 'gradesAverage',
      render: (text, record, index) => {
        return text == 0 ? 0 : text || '--'
      }
    },
    {
      title: '评审意见',
      dataIndex: 'comments',
      key: 'comments',
      width: 250,
      render: (text, record, index) => {
        return text|| '--'
      }
    },
    {
      title: '评审时间',
      dataIndex: 'reviewedOn',
      key: 'reviewedOn',
      render: (text, record, index) => {
        return text|| '--'
      }
    },
  ];

  // 评分列
  const gradesColumns = [{
    title: '评分一',
    dataIndex: 'gradesOne',
    key: 'gradesOne',
    render: (text, record, index) => {
      return text == 0 ? 0 : text || '--'
    }
  },
  {
    title: '评分二',
    dataIndex: 'gradesTwo',
    key: 'gradesTwo',
    render: (text, record, index) => {
      return text == 0 ? 0 : text || '--'
    }
  },
  {
    title: '评分三',
    dataIndex: 'gradesThree',
    key: 'gradesThree',
    render: (text, record, index) => {
      return text == 0 ? 0 : text || '--'
    }
  },
  {
    title: '评分四',
    dataIndex: 'gradesFour',
    key: 'gradesFour',
    render: (text, record, index) => {
      return text == 0 ? 0 : text || '--'
    }
  },
  {
    title: '评分五',
    dataIndex: 'gradesFive',
    key: 'gradesFive',
    render: (text, record, index) => {
      return text == 0 ? 0 : text || '--'
    }
  }];

  let gradesNum = rules && rules.criterias && rules.criterias.length || 5;

  if (gradesNum) {
    let thisGradesColumns = gradesColumns.slice(0, gradesNum);
    columns.splice(4, 0, ...thisGradesColumns);
  }

  // 获取评分列表
  useEffect(() => {
    setLoading(true);
    let params = {
      opsId: opsDetail && opsDetail.opsId,
      opsType: opsDetail && opsDetail.opsType,
      orderBy: 'gradesAverageDesc',
      containerId: taskId,
      containerType,
    };
    //获取评审规则
    const paramsRule = {
      containerId: taskId,
      containerType,
      statusString: '-1,1',
    };
    taskId && getRules(paramsRule).then(response=>{
      if(response && response.message === "success"){
        setRules(response.data);
      }
    });
    opsDetail && opsDetail.opsId && getOpsScoringDetails(params).then(res => {
      if (res.data && res.data.length) {
        setDataList(res.data);
        setLoading(false);
      }
    });
  }, [opsDetail]);


  return (
    <Modal
      title="评审明细"
      visible={visible}
      onCancel={() => { setVisible(false) }}
      footer={null}
      draggable={true}
      width={1050}
      wrapClassName="task_review_detail"
    >
      <div className="opsDetail">
        综合排名: {opsDetail && opsDetail.id}
        <span className="ml30">{containerType == 1 ? '应征者': '战队名称'}:&nbsp;&nbsp;</span>
        {containerType == 1 && opsDetail && (opsDetail.applicantInfo.nickname == null ? opsDetail.applicantInfo.login : opsDetail.applicantInfo.nickname)}
        {containerType == 2 && opsDetail && opsDetail.competitionTeamName}
        <span className="ml30">平均得分:&nbsp;&nbsp;</span> {opsDetail && opsDetail.finalGrades || `--`}
        <span className="ml30">是否胜出:&nbsp;&nbsp;</span> {opsDetail && opsDetail.isWin ? <div className="sucess df"><img src={sucess}/>胜出</div> : '未胜出'}
      </div>
      <Paginationtable
        loading={loading}
        dataSource={dataList}
        columns={columns}
        pagination={false}
        scroll={{ y: 430 }}
      />
    </Modal>
  )
}
export default GradesModal;