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

class RepairItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDetail: false,
    };
  }
  toggleDetail = () => {
    this.setState(({ showDetail }) => ({
      showDetail: !showDetail,
    }));
  };
  dealHandle = e => {
    const { dealHandle, data } = this.props;
    if (dealHandle && data.dealState === 1) {
      e.stopPropagation();
      e.preventDefault();
      dealHandle(data.id);
    }
  };
  showViewHandle = (e, imgList, index) => {
    e.stopPropagation();
    const { showView } = this.props;
    showView && showView(imgList, index);
  };
  render() {
    const { showDetail } = this.state;
    const { data } = this.props;
    let imgList = data.uploadImg ? data.uploadImg.split(',') : [];
    return (
      <div className={styles.wrap}>
        <div
          className={data.dealState === 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.dealState === 1 ? (
            <div className={styles.dealing} onClick={this.dealHandle}>
              处理中
            </div>
          ) : (
            <div className={styles.dealed} onClick={this.dealHandle}>
              已处理
            </div>
          )}
          {showDetail
            ? [
                <div key="time" className={styles.listLine}>
                  <div className={styles.listLabel}>报修时间：</div>
                  <div className={styles.listValue}>{data.createDate}</div>
                </div>,
                <div key="area" className={styles.listLine}>
                  <div className={styles.listLine2ItemLeft}>
                    <div className={styles.listLabel}>报修区域：</div>
                    <div className={styles.listValue}>{data.area}</div>
                  </div>
                  <div className={styles.listLine2ItemRight}>
                    <div className={styles.listLabel}>报修项目：</div>
                    <div className={styles.listValue}>{data.term}</div>
                  </div>
                </div>,
                <div key="address" className={styles.listLineArea}>
                  <div className={styles.listLabel}>报修地址：</div>
                  <div className={styles.listValueMutLine}>{data.address}</div>
                </div>,
                <div key="name" className={styles.listLine}>
                  <div className={styles.listLine2ItemLeft}>
                    <div className={styles.listLabel}>报修人：</div>
                    <div className={styles.listValue}>{data.name}</div>
                  </div>
                  <div className={styles.listLine2ItemRight}>
                    <div className={styles.listLabel}>报修人tel：</div>
                    <div className={styles.listValue}>
                      {data.repairCellphone}
                    </div>
                  </div>
                </div>,
                <div
                  key="uploadImg"
                  className={`${styles.listLine} ${styles.listLineImg}`}
                >
                  {imgList[0] &&
                    imgList.map((item, idx) => (
                      <div
                        key={idx}
                        className={styles.imgItem}
                        onClick={e => this.showViewHandle(e, imgList, idx)}
                      >
                        <img src={item} alt="" />
                      </div>
                    ))}
                </div>,
              ]
            : [
                <div key="time" className={styles.listLine}>
                  <div className={styles.listLabel}>报修时间：</div>
                  <div className={styles.listValue}>{data.createDate}</div>
                </div>,
                <div key="name" className={styles.listLine}>
                  <div className={styles.listLine2ItemLeft}>
                    <div className={styles.listLabel}>报修人：</div>
                    <div className={styles.listValue}>{data.name}</div>
                  </div>
                  <div className={styles.listLine2ItemRight}>
                    <div className={styles.listLabel}>报修人tel：</div>
                    <div className={styles.listValue}>
                      {data.repairCellphone}
                    </div>
                  </div>
                </div>,
                <div key="address" className={styles.listLineArea}>
                  <div className={styles.listLabel}>报修事项：</div>
                  <div className={styles.listValue}>{data.affair}</div>
                </div>,
              ]}
        </div>
      </div>
    );
  }
}

export default RepairItem;
