import React, { Component } from 'react';
import './index.less';
import { formatPercent } from '../../../../src/services/Tools';

function getKey(type, index, selected, answer) {
  return `${(selected[type] || [])[index] ? 'selected' : ''} ${(answer[type] || [])[index] ? 'true' : 'false'}`;
}
function getDoubleKey(type, index, selected, answer, position) {
  return `${((selected[type] || [])[index] || [])[position] ? 'selected' : ''} ${((answer[type] || [])[index] || [])[position] ? 'true' : 'false'}`;
}

export default class AnswerList extends Component {
  render() {
    return <div className="answer-list">{this.renderDetail()}</div>;
  }

  renderDetail() {
    const { type } = this.props;
    switch (type) {
      case 'single':
        return this.renderList();
      case 'double':
        return this.renderTable();
      default:
        return <div />;
    }
  }

  renderList() {
    const { selected = {}, answer = {}, show, list = [], distributed = [], type } = this.props;
    const count = distributed.reduce((x, y) => x + y, 0);
    return (
      <div className="list">
        {list.map((item, index) => {
          return (
            <div className={`item ${getKey(type, index, selected, answer)} ${show ? 'show' : ''}`}>
              <div className="icon" />
              <div className="text">{item}</div>
              {show && <div className="total">{formatPercent(distributed[index], count, false)}用户选择该选项</div>}
            </div>
          );
        })}
      </div>
    );
  }

  renderTable() {
    const { selected = {}, answer = {}, show, list = [], type, first, second } = this.props;
    return (
      <table border="1" bordercolor="#d8d8d8">
        <thead>
          <tr className="bg">
            <th align="center" width="100" className="t-c">
              {first}
            </th>
            <th align="center" width="100" className="t-c">
              {second}
            </th>
            <th />
          </tr>
        </thead>
        <tbody>
          {list.map((item, index) => {
            return (
              <tr>
                <td align="center" className="bg">
                  <div className={`item ${getDoubleKey(type, index, selected, answer, 0)} ${show ? 'show' : ''}`}><div className="icon" /></div>
                </td>
                <td align="center" className="bg">
                  <div className={`item ${getDoubleKey(type, index, selected, answer, 1)} ${show ? 'show' : ''}`}><div className="icon" /></div>
                </td>
                <td>{item}</td>
              </tr>);
          })}
        </tbody>
      </table>
    );
  }
}