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> ); } }