import { View } from "@tarojs/components";
import React, { Component } from "react";
import { AtFloatLayout, AtTimeline } from "taro-ui";

import 'taro-ui/dist/style/components/float-layout.scss';
import 'taro-ui/dist/style/components/button.scss';
import './index.less';


class InterviewHisList extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }

    this.handleClose = this.handleClose.bind(this);
  }

  handleClose() {
    this.props.onClose();
  }

  renderStatusName(data) {
    if (data.prStatus == 3) {
      return <View className="statusName red">已撤销</View>
    } else if (data.prStatus == 4) {
      return <View className="statusName blue">已驳回</View>
    }
    return null;
  }

  render() {
    const hisItems = this.props.list.map(record => {
        return { title: record.createTime, content: [record[this.props.type] || '空'] }
    })
    return (
        <AtFloatLayout isOpened={this.props.isOpened} title={this.props.title} scrollY onClose={this.handleClose}>
          {/* <AtTimeline 
              pending 
              items={hisItems}
          >
          </AtTimeline> */}
          <View className="time-list">
            { this.props.list.map(item => (
              <View className="time-list-item">
                <View className="time-list-item-dot"></View>
                <View className={[3,4].indexOf(item.prStatus) > -1 ? 'time-list-item__content grey' : 'time-list-item__content'}>
                  { this.renderStatusName(item) }
                  <View className="title">{ item.createTime }</View>
                  <View className="content">{ item[this.props.type] || '空' }</View>
                </View>
              </View>
            )) }
            
          </View>
        </AtFloatLayout>
    )
  }
}

export default InterviewHisList;
