import React from 'react';
import { Breadcrumb, Tooltip, Switch } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import { asyncConfirm, asyncSMessage } from '@src/services/AsyncTools';
import { formatPercent, formatDate } from '@src/services/Tools';
import ListTable from '../../../components/ListTable';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import Button from '../../../components/Button';
import { Main } from '../../../stores/main';
import { Question } from '../../../stores/question';


export default class extends Page {
  initState() {
    this.qxCatColumns = [{
      title: '模考',
      width: 250,
      align: 'left',
      render: (record) => {
        let progress = 0;
        if (record.report) {
          progress = formatPercent(record.report.userNumber, record.report.questionNumber);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16">{record.title}{record.paper && record.paper.paperNo > 0 ? String.fromCharCode(64 + record.paper.paperNo) : ''}</div>
            <div>
              <ProgressText progress={progress} size="small" />
            </div>
            {this.state.showPrev && <div className="prev">
              <div className="night f-s-16">{record.title}{record.prevPaper && record.prevPaper.paperNo > 0 ? String.fromCharCode(64 + record.prevPaper.paperNo) : ''}</div>
            </div>}
          </div>
        );
      },
    }, {
      title: 'Total',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.totalScore / record.totalTimes)}分</div>
            {this.state.showPrev && record.prevReport && <div className="prev">
              <div className="night f-s-16 f-w-b">{record.prevReport.score.total}分{record.prevReport.score.totalRank}th</div>
              <div className="f-s-12">全站: {Math.round(record.totalScore / record.totalTimes)}分</div>
            </div>}
          </div>
        );
      },
    }, {
      title: 'Verbal',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.verbalScore / record.totalTimes)}分</div>
            {this.state.showPrev && record.prevReport && <div className="prev">
              <div className="night f-s-16 f-w-b">{record.prevReport.score.verbal}分{record.prevReport.score.verbalRank}th</div>
              <div className="f-s-12">全站: {Math.round(record.verbalScore / record.totalTimes)}分</div>
            </div>}
          </div>
        );
      },
    }, {
      title: 'Quant',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.quantScore / record.totalTimes)}分</div>
            {this.state.showPrev && record.prevReport && <div className="prev">
              <div className="night f-s-16 f-w-b">{record.prevReport.score.quant}分{record.prevReport.score.quantRank}th</div>
              <div className="f-s-12">全站: {Math.round(record.quantScore / record.totalTimes)}分</div>
            </div>}
          </div>
        );
      },
    }, {
      title: 'IR',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.irScore / record.totalTimes)}分</div>
            {this.state.showPrev && record.prevReport && <div className="prev">
              <div className="night f-s-16 f-w-b">{record.prevReport.score.ir}分{record.prevReport.score.irRank}th</div>
              <div className="f-s-12">全站: {Math.round(record.irScore / record.totalTimes)}分</div>
            </div>}
          </div>
        );
      },
    }, {
      title: '做题时间',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div>{record.report && formatDate(record.report.updateTime, 'YYYY-MM-DD')}</div>
            <div>{record.report && formatDate(record.report.updateTime, 'HH:mm')}</div>
            {this.state.showPrev && record.prevReport && <div className="prev">
              <div>{formatDate(record.prevReport.updateTime, 'YYYY-MM-DD')}</div>
              <div>{formatDate(record.prevReport.updateTime, 'HH:mm')}</div>
            </div>}
          </div>
        );
      },
    }, {
      title: '操作',
      width: 180,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row p-t-1">
            {!record.report && <IconButton type="start" tip="Start" onClick={() => {
              Question.startLink('examination', record);
            }} />}
            {(record.report && !record.report.isFinish) && <IconButton className="m-r-2" type="continue" tip="Continue" onClick={() => {
              Question.continueLink('examination', record);
            }} />}
          </div>
        );
      },
    }, {
      title: '报告',
      width: 30,
      align: 'right',
      render: (record) => {
        return (
          <div className="table-row p-t-1">
            {record.report && record.report.isFinish && <IconButton type="report" tip="Report" onClick={() => {
              Question.reportLink(record);
            }} />}
            {this.state.showPrev && <div className="prev">
              {record.prevReport && <IconButton type="report" tip="Report" onClick={() => {
                Question.reportPrevLink(record);
              }} />}
            </div>}
          </div>
        );
      },
    }];
    this.catColumns = [{
      title: '模考',
      width: 250,
      align: 'left',
      render: (record) => {
        let progress = 0;
        if (record.report) {
          progress = formatPercent(record.report.userNumber, record.report.questionNumber);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16">{record.title}{record.paper && record.paper.paperNo > 0 ? String.fromCharCode(64 + record.paper.paperNo) : ''}</div>
            <div>
              <ProgressText progress={progress} size="small" />
            </div>
          </div>
        );
      },
    }, {
      title: 'Total',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.totalScore / record.totalTimes)}分</div>
          </div>
        );
      },
    }, {
      title: 'Verbal',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.verbalScore / record.totalTimes)}分</div>
          </div>
        );
      },
    }, {
      title: 'Quant',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.quantScore / record.totalTimes)}分</div>
          </div>
        );
      },
    }, {
      title: 'IR',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{record.report ? `${record.report.score.total}分${record.report.score.totalRank}th` : '-分-th'}</div>
            <div className="f-s-12">全站: {Math.round(record.irScore / record.totalTimes)}分</div>
          </div>
        );
      },
    }, {
      title: '做题时间',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div>{record.report && formatDate(record.report.updateTime, 'YYYY-MM-DD')}</div>
            <div>{record.report && formatDate(record.report.updateTime, 'HH:mm')}</div>
          </div>
        );
      },
    }, {
      title: '操作',
      width: 180,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row p-t-1">
            {!record.report && <IconButton type="start" tip="Start" onClick={() => {
              Question.startLink('examination', record);
            }} />}
            {(record.report && !record.report.isFinish) && <IconButton className="m-r-2" type="continue" tip="Continue" onClick={() => {
              Question.continueLink('examination', record);
            }} />}
            <IconButton type="restart" tip="Restart" onClick={() => {
              this.restart(record);
            }} />
          </div>
        );
      },
    }, {
      title: '报告',
      width: 30,
      align: 'right',
      render: (record) => {
        return (
          <div className="table-row p-t-1">
            {record.report && record.report.isFinish && <IconButton type="report" tip="Report" onClick={() => {
              Question.reportLink(record);
            }} />}
            {this.state.showPrev && <div className="prev">
              {record.prevReport && <IconButton type="report" tip="Report" onClick={() => {
                Question.reportPrevLink(record);
              }} />}
            </div>}
          </div>
        );
      },
    }];
    this.columns = [{
      title: '模考',
      width: 250,
      align: 'left',
      render: (record) => {
        let progress = 0;
        if (record.report) {
          progress = formatPercent(record.report.userNumber, record.report.questionNumber);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16">{record.title}</div>
            <div>
              <ProgressText progress={progress} times={record.paper ? record.paper.times : 0} size="small" />
            </div>
          </div>
        );
      },
    }, {
      title: 'Total',
      width: 150,
      align: 'left',
      render: () => {
        return (
          <div className="table-row">
            <div className="f-s-12">仅CAT模考</div>
          </div>
        );
      },
    }, {
      title: 'Verbal',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="f-s-12">{record.report ? formatPercent(record.report.setting.number.verbal, this.nums.verbal.number, false) : '0%'}</div>
          </div>
        );
      },
    }, {
      title: 'Quant',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="f-s-12">{record.report ? formatPercent(record.report.setting.number.quant, this.nums.quant.number, false) : '0%'}</div>
          </div>
        );
      },
    }, {
      title: 'IR',
      width: 150,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row">
            <div className="f-s-12">{record.report ? formatPercent(record.report.setting.number.ir, this.nums.ir.number, false) : '0%'}</div>
          </div>
        );
      },
    }, {
      title: '做题时间',
      width: 150,
      align: 'left',
      render: (record) => {
        if (!record.report) return null;
        return (
          <div className="table-row">
            <div>{formatDate(record.report.updateTime, 'YYYY-MM-DD')}</div>
            <div>{formatDate(record.report.updateTime, 'HH:mm')}</div>
          </div>
        );
      },
    }, {
      title: '操作',
      width: 180,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row p-t-1">
            {!record.report && <IconButton type="start" tip="Start" onClick={() => {
              Question.startLink('examination', record);
            }} />}
            {(record.report && !record.report.isFinish) && <IconButton className="m-r-2" type="continue" tip="Continue" onClick={() => {
              Question.continueLink('examination', record);
            }} />}
            <IconButton type="restart" tip="Restart" onClick={() => {
              this.restart(record);
            }} />
          </div>
        );
      },
    }, {
      title: '报告',
      width: 30,
      align: 'right',
      render: (record) => {
        if (!record.report || !record.report.isFinish) return null;
        return (
          <div className="table-row p-t-1">
            <IconButton type="report" tip="Report" onClick={() => {
              Question.reportLink(record);
            }} />
          </div>
        );
      },
    }];
    this.inited = false;
    return {
    };
  }

  init() {
    const { id } = this.params;
    Main.getExaminationParent(id).then(result => {
      const navs = result.map(row => {
        row.title = `${row.titleZh}${row.titleEn}`;
        return row;
      });
      this.cat = navs.filter(row => row.isAdapt > 0).length > 0;
      this.qxCat = navs.filter(row => row.isAdapt > 1).length > 0;
      Main.getExaminationNumber().then(nums => {
        this.nums = nums;
        this.inited = true;
        this.setState({ navs });
        this.refreshData();
      });
    });
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    this.setState(data);
    if (this.inited) this.refreshData();
  }

  refreshData() {
    if (this.cat) {
      Question.getExaminationInfo().then((result) => {
        this.setState({ examination: result });
      });
    }
    this.refreshExamination();
  }

  refreshExamination() {
    Question.getExaminationList(Object.assign({ structId: this.params.id }, this.state.search))
      .then((result) => {
        this.setState({ list: result.list, total: result.total });
      })
      .catch(err => {
        asyncSMessage(err.message, 'warn');
        // linkTo('/examination');
      });
  }

  restart(item) {
    asyncConfirm('提示', '是否重置', () => {
      Question.restart(item.paper.id).then(() => {
        this.refresh();
      });
    });
  }

  resetCat() {
    asyncConfirm('提示', '是否重置', () => {
      Question.resetCat().then(() => {
        this.refresh();
      });
    });
  }

  renderView() {
    const { list, navs, search, examination = {} } = this.state;
    const { finish } = search;
    return (
      <div>
        <div className="content">
          <Breadcrumb separator=">">
            <Breadcrumb.Item href="/examination">模考</Breadcrumb.Item>
            {(navs || []).map(row => {
              return <Breadcrumb.Item>{row.title}</Breadcrumb.Item>;
            })}
          </Breadcrumb>
          <ListTable
            rightAction={<div hidden={!this.qxCat}>
              <span>有效期至:{examination.expireTime && formatDate(examination.expireTime, 'YYYY-MM-DD')}</span>
              {examination.reset && <span>第一遍模考成绩<Switch checked={this.state.showPrev} onChange={() => {
                this.setState({ showPrev: !this.state.showPrev });
              }} /></span>}
              {!examination.reset && examination.canReset && <Button size="small" radius onClick={() => {
                this.resetExamination();
              }}>
                Reset</Button>}
              {!examination.reset && !examination.canReset && <Tooltip overlayClassName="gray" placement="top" title="全部模考做完才可重置">
                <a>
                  <Button size="small" disabled radius>
                    Reset
                  </Button>
                </a >
              </Tooltip>}
            </div>}
            filters={[
              {
                type: 'radio',
                checked: finish,
                list: [{ key: '0', title: '未完成' }, { key: '1', title: '已完成' }],
                onChange: item => {
                  if (item.key === finish) {
                    this.search({ finish: null });
                  } else if (item.key === '0') {
                    this.search({ finish: 0 });
                  } else if (item.key === '1') {
                    this.search({ finish: 1 });
                  } else {
                    this.search({ finish: null });
                  }
                },
              },
            ]}
            data={list}
            columns={this.qxCat ? this.qxCatColumns : (this.cat ? this.catColumns : this.columns)}
          />
        </div>
      </div>
    );
  }
}