import React, { Component } from 'react';
import styles from './style.css';
import titleIcon from '../../Repair/images/dropdown_icon@2x.png';

class PublicCarItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDetail: false,
    };
  }
  toggleDetail = () => {
    this.setState(({ showDetail }) => ({
      showDetail: !showDetail,
    }));
  };
  getCategoryValue = str => {
    let list = str ? JSON.parse(str) : [];
    let item = list.find(item => item.checked);
    return item ? item.name : '';
  };
  dealHandle = e => {
    const { dealHandle, data } = this.props;
    if (dealHandle && data.dealResult === 1) {
      e.stopPropagation();
      e.preventDefault();
      dealHandle(data.id);
    }
  };
  render() {
    const { showDetail } = this.state;
    const { data } = this.props;
    return (
      <div className={styles.wrap}>
        <div
          className={data.dealResult === 1 ? styles.titleDealing : styles.title}
        >
          <i
            className={
              showDetail ? styles.titleIconShowDetail : styles.titleIcon
            }
          >
            <img src={titleIcon} alt="" />
          </i>
        </div>
        <div
          className={`${styles.content} ${
            showDetail ? styles.showDetailContent : ''
          }`}
          onClick={this.toggleDetail}
        >
          {data.dealResult === 1 ? (
            <div className={styles.dealing} onClick={this.dealHandle}>
              处理中
            </div>
          ) : data.dealResult === 2 ? (
            <div className={styles.dealedY}>已同意</div>
          ) : (
            <div className={styles.dealedN}>不同意</div>
          )}
          {showDetail
            ? [
                <div key="time" className={styles.listLine}>
                  <div className={styles.listLabel}>用车时间：</div>
                  <div className={styles.listValue}>{data.createDate}</div>
                </div>,
                <div key="type" className={styles.listLine}>
                  <div className={styles.listLabel}>用车类型：</div>
                  <div className={styles.listValueMutLine}>
                    {this.getCategoryValue(data.categoryName)}
                  </div>
                </div>,
                <div key="line" className={styles.listLine}>
                  <div className={styles.listLabel}>用车路线：</div>
                  <div className={styles.listValueMutLine}>
                    {data.lineDescription}
                  </div>
                </div>,
                <div key="department" className={styles.listLine}>
                  <div className={styles.mLineItem}>
                    <div className={styles.listLabel}>用车部门：</div>
                    <div className={styles.listValue}>{data.department}</div>
                  </div>
                  <div className={styles.mLineItem}>
                    <div className={styles.listLabel}>申请人：</div>
                    <div className={styles.listValue}>{data.name}</div>
                  </div>
                </div>,
                <div key="userCount" className={styles.listLine}>
                  <div className={styles.listLabel}>用车人数：</div>
                  <div className={styles.listValue}>{data.userCount}人</div>
                </div>,
                <div key="beginDate" className={styles.listLine}>
                  <div className={styles.listLabel}>开始时间：</div>
                  <div className={styles.listValue}>{data.beginDate}</div>
                </div>,
                <div key="endDate" className={styles.listLine}>
                  <div className={styles.listLabel}>结束时间：</div>
                  <div className={styles.listValue}>{data.endDate}</div>
                </div>,
                <div
                  key="dealName"
                  className={`${styles.listLine} ${
                    data.dealResult === 1
                      ? styles.dealingColor
                      : styles.dealedColor
                  }`}
                >
                  <div className={styles.listLabel}>处理人：</div>
                  <div className={styles.listValue}>
                    {data.dealResult === 1 ? '处理中' : data.dealName}
                  </div>
                </div>,
                <div
                  key="dealDate"
                  className={`${styles.listLine} ${
                    data.dealResult === 1
                      ? styles.dealingColor
                      : styles.dealedColor
                  }`}
                >
                  <div className={styles.listLabel}>处理时间：</div>
                  <div className={styles.listValue}>
                    {data.dealResult === 1 ? '待处理后显示' : data.dealDate}
                  </div>
                </div>,
                <div
                  key="carPlate"
                  className={`${styles.listLine} ${
                    data.dealResult === 1
                      ? styles.dealingColor
                      : styles.dealedColor
                  }`}
                >
                  <div className={styles.listLabel}>派车车牌：</div>
                  <div className={styles.listValueMutLine}>
                    {data.dealResult === 1
                      ? '待处理后显示'
                      : data.carPlate
                      ? data.carPlate
                      : '无'}
                  </div>
                </div>,
                data.dealResult === 3 ? (
                  <div
                    key="dealOpinion"
                    className={`${styles.listLine} ${styles.dealedColor}`}
                  >
                    <div className={styles.listLabel}>处理意见：</div>
                    <div className={styles.listValueMutLine}>
                      {data.dealOpinion}
                    </div>
                  </div>
                ) : null,
              ]
            : [
                <div key="time" className={styles.listLine}>
                  <div className={styles.listLabel}>用车时间：</div>
                  <div className={styles.listValue}>{data.createDate}</div>
                </div>,
                <div key="department" className={styles.listLine}>
                  <div className={styles.mLineItem}>
                    <div className={styles.listLabel}>用车部门：</div>
                    <div className={styles.listValue}>{data.department}</div>
                  </div>
                  <div className={styles.mLineItem}>
                    <div className={styles.listLabel}>申请人：</div>
                    <div className={styles.listValue}>{data.name}</div>
                  </div>
                </div>,
                <div key="type" className={styles.listLine}>
                  <div className={styles.listLabel}>用车类型：</div>
                  <div className={styles.listValue}>
                    {this.getCategoryValue(data.categoryName)}
                  </div>
                </div>,
                <div key="line" className={styles.listLine}>
                  <div className={styles.listLabel}>用车路线：</div>
                  <div className={styles.listValue}>{data.lineDescription}</div>
                </div>,
              ]}
        </div>
      </div>
    );
  }
}

export default PublicCarItem;
