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 { RestartConfirmModal } from '../../../components/OtherModal';
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: 210,
        align: 'left',
        render: record => {
          let progress = 0;
          if (record.report) {
            progress = formatPercent(record.report.userNumber, record.report.questionNumber);
          }
          return [
            <div className="table-row" style={{ paddingRight: 40 }}>
              <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>,
            this.state.showPrev && record.prevReport && (
              <div className="table-row prev t-3">
                <div className="night f-s-16">
                  {record.title}
                  {record.prevPaper && record.prevPaper.paperNo > 0
                    ? String.fromCharCode(64 + record.prevPaper.paperNo)
                    : ''}
                </div>
              </div>
            ),
          ];
        },
      },
      {
        title: 'Total',
        width: 110,
        align: 'left',
        render: record => {
          return [
            <div className="table-row">
              <div className="night f-s-16 f-w-b">
                {record.report ? `${record.report.score.totalScore}分${record.report.score.totalRank}th` : '-分-th'}
              </div>
              <div className="f-s-12">全站: {Math.round(record.totalScore / record.totalTimes)}分</div>
            </div>,
            this.state.showPrev && record.prevReport && (
              <div className="table-row prev t-3">
                <div className="night f-s-16 f-w-b">
                  {record.prevReport.score.totalScore}分{record.prevReport.score.totalRank}th
                </div>
                <div className="f-s-12">全站: {Math.round(record.secondTotalScore / record.secondTotalTimes)}分</div>
              </div>
            ),
          ];
        },
      },
      {
        title: 'Verbal',
        width: 110,
        align: 'left',
        render: record => {
          return [
            <div className="table-row">
              <div className="night f-s-16 f-w-b">
                {record.report ? `${record.report.score.verbalScore}分${record.report.score.verbalRank}th` : '-分-th'}
              </div>
              <div className="f-s-12">全站: {Math.round(record.verbalScore / record.totalTimes)}分</div>
            </div>,
            this.state.showPrev && record.prevReport && (
              <div className="table-row prev t-3">
                <div className="night f-s-16 f-w-b">
                  {record.prevReport.score.verbalScore}分{record.prevReport.score.verbalRank}th
                </div>
                <div className="f-s-12">全站: {Math.round(record.secondVerbalScore / record.secondTotalTimes)}分</div>
              </div>
            ),
          ];
        },
      },
      {
        title: 'Quant',
        width: 110,
        align: 'left',
        render: record => {
          return [<div className="table-row">
            <div className="night f-s-16 f-w-b">
              {record.report ? `${record.report.score.quantScore}分${record.report.score.quantRank}th` : '-分-th'}
            </div>
            <div className="f-s-12">全站: {Math.round(record.quantScore / record.totalTimes)}分</div>
          </div>,
          this.state.showPrev && record.prevReport && (
            <div className="table-row prev t-3">
              <div className="night f-s-16 f-w-b">
                {record.prevReport.score.quantScore}分{record.prevReport.score.quantRank}th
              </div>
              <div className="f-s-12">全站: {Math.round(record.secondQuantScore / record.secondTotalTimes)}分</div>
            </div>
          ),
          ];
        },
      },
      {
        title: 'IR',
        width: 110,
        align: 'left',
        render: record => {
          return [<div className="table-row">
            <div className="night f-s-16 f-w-b">
              {record.report ? `${record.report.score.irScore}分${record.report.score.irRank}th` : '-分-th'}
            </div>
            <div className="f-s-12">全站: {Math.round(record.irScore / record.totalTimes)}分</div>
          </div>,
          this.state.showPrev && record.prevReport && (
            <div className="table-row prev t-3">
              <div className="night f-s-16 f-w-b">
                {record.prevReport.score.irScore}分{record.prevReport.score.irRank}th
              </div>
              <div className="f-s-12">全站: {Math.round(record.secondIrScore / record.secondTotalTimes)}分</div>
            </div>
          ),
          ];
        },
      },
      {
        title: '做题时间',
        width: 100,
        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>,
          this.state.showPrev && record.prevReport && (
            <div className="table-row prev t-3">
              <div>{formatDate(record.prevReport.updateTime, 'YYYY-MM-DD')}</div>
              <div>{formatDate(record.prevReport.updateTime, 'HH:mm')}</div>
            </div>
          ),
          ];
        },
      },
      {
        title: '操作',
        width: 110,
        align: 'left',
        render: record => {
          return [<div className="table-row p-t-1">
            {!record.report && (
              <IconButton
                className="m-r-5"
                type="start"
                tip="Start"
                onClick={() => {
                  Question.startLink('examination', record);
                }}
              />
            )}
            {record.report && !record.report.isFinish && (
              <IconButton
                type="continue"
                tip="Continue"
                onClick={() => {
                  Question.continueLink('examination', record);
                }}
              />
            )}
          </div>,
          this.state.showPrev && record.prevReport && (
            <div className="table-row prev" />
          ),
          ];
        },
      },
      {
        title: '报告',
        width: 50,
        align: 'right',
        render: record => {
          return [<div className="table-row p-t-1">
            {record.report && !!record.report.isFinish && (
              <IconButton
                className="m-r-5"
                type="report"
                tip="Report"
                onClick={() => {
                  Question.reportLink(record);
                }}
              />
            )}
          </div>,
          this.state.showPrev && (
            <div className="prev">
              {record.prevReport && (
                <IconButton
                  type="report"
                  tip="Report"
                  onClick={() => {
                    Question.reportPrevLink(record);
                  }}
                />
              )}
            </div>
          ),
          ];
        },
      },
    ];
    this.catColumns = [
      {
        title: '模考',
        width: 210,
        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: 110,
        align: 'left',
        render: record => {
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">
                {record.report ? `${record.report.score.totalScore}分${record.report.score.totalRank}th` : '-分-th'}
              </div>
              <div className="f-s-12">全站: {Math.round(record.totalScore / record.totalTimes)}分</div>
            </div>
          );
        },
      },
      {
        title: 'Verbal',
        width: 110,
        align: 'left',
        render: record => {
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">
                {record.report ? `${record.report.score.verbalScore}分${record.report.score.verbalRank}th` : '-分-th'}
              </div>
              <div className="f-s-12">全站: {Math.round(record.verbalScore / record.totalTimes)}分</div>
            </div>
          );
        },
      },
      {
        title: 'Quant',
        width: 110,
        align: 'left',
        render: record => {
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">
                {record.report ? `${record.report.score.quantScore}分${record.report.score.quantRank}th` : '-分-th'}
              </div>
              <div className="f-s-12">全站: {Math.round(record.quantScore / record.totalTimes)}分</div>
            </div>
          );
        },
      },
      {
        title: 'IR',
        width: 110,
        align: 'left',
        render: record => {
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">
                {record.report ? `${record.report.score.irScore}分${record.report.score.irRank}th` : '-分-th'}
              </div>
              <div className="f-s-12">全站: {Math.round(record.irScore / record.totalTimes)}分</div>
            </div>
          );
        },
      },
      {
        title: '做题时间',
        width: 100,
        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: 110,
        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);
                  }}
                />
              )}
              {record.report && <IconButton
                type="restart"
                tip="Restart"
                onClick={() => {
                  this.restart(record);
                }}
              />}
            </div>
          );
        },
      },
      {
        title: '报告',
        width: 50,
        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: 210,
        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.finishTimes : 0} size="small" />
              </div>
            </div>
          );
        },
      },
      {
        title: 'Total',
        width: 110,
        align: 'left',
        render: () => {
          return (
            <div className="table-row">
              <div className="f-s-12">仅CAT模考<br />提供分数</div>
            </div>
          );
        },
      },
      {
        title: 'Verbal',
        width: 110,
        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: 110,
        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: 110,
        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: 100,
        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: 110,
        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);
                  }}
                />
              )}
              {record.report && <IconButton
                type="restart"
                tip="Restart"
                onClick={() => {
                  this.restart(record);
                }}
              />}
            </div>
          );
        },
      },
      {
        title: '报告',
        width: 50,
        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() {
    Question.resetCat().then(() => {
      this.refresh();
    });
  }

  renderView() {
    const { list, navs, search, examination = {}, reset } = 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.setState({ reset: true });
                    }}
                  >
                    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.qxCatColumns}
          />
        </div>

        <RestartConfirmModal show={reset} onConfirm={() => this.resetCat()} onCancel={() => this.setState({ reset: false })} />
      </div>
    );
  }
}