import React, { Component } from 'react';
import "./index.less";

const elm = {
  a: <div className="letter-element"><span className="color-orange">A</span>班次A: <em>9:00〜10:00</em></div>,
  b: <div className="letter-element"><span className="color-green">B</span>班次B: <em>10:00〜13:00</em></div>,
  c: <div className="letter-element"><span className="color-cyan">C</span>班次C: <em>13:00〜18:00</em></div>,
  d: <div className="letter-element"><span className="color-purple">D</span>班次D: <em>13:00〜18:00</em></div>,
  xiu: <div className="letter-element"><span className="color-blue">休</span>休息</div>
};
const elmL = {
  a: <span className="color-orange">A</span>,
  b: <span className="color-green">B</span>,
  c: <span className="color-cyan">C</span>,
  d: <span className="color-purple">D</span>,
  e: <span className="color-purple">E</span>,
  xiu: <span className="color-blue">休</span>,
};
export default class LetterElment extends Component {
  render() {
    let tag = elm;
    const name = this.props.name && this.props.name.toLowerCase();
    const type = this.props.type && this.props.type.toLowerCase();
    tag = elm;

    if (type) {
      tag = elmL;
    }

    if (name) {
      
      let s1 = ['a','e','i','m','q','u','y'];
      let s2 = ['b','f','j','n','r','v','z'];
      let s3 = ['c','g','k','o','s','w'];
      let s4 = ['d','h','l','p','t','x'];
      let s5 = ['休'];

      // return tag[name];
      if(s1.includes(name)){
        return <span className="color-orange">{name.toUpperCase()}</span>
      }
      if(s2.includes(name)){
        return <span className="color-green">{name.toUpperCase()}</span>
      }
      if(s3.includes(name)){
        return <span className="color-cyan">{name.toUpperCase()}</span>
      }
      if(s4.includes(name)){
        return <span className="color-purple">{name.toUpperCase()}</span>
      }
      if(s5.includes(name)){
        return <span className="color-blue">休</span>
      } else {
        // console.log('班次图标没有对应名称的图标，请检查传入值和图标数组');
        return '';
      }
    } else {
      return tag.a;
    }
    // return ''
  }
}