import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Image, Button } from "@tarojs/components";
import Skeleton from "taro-skeleton";
import { getClockState } from "../../utils/tools";
import ListBottomStart from "../../components/common/listBottomStart";
import Select from "../applyReimbursement/select";
import "./index.less";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      visible: "",
    };
  }

  onClose() {
    this.setState({
      visible: "",
    })
  }

  render() {
    return (
      <View className="indexPage">
        <View className="list">
          {
            this.props.list.length === 0 && this.props.listState === "LOADING" &&
            this.props.typelist?.map((v) => (
              <Skeleton key={v} title row={3} avatarShape="square" loading />
            ))
          }
          {this.props.list.length > 0 && this.props.list?.map((v, k) => (
            <View key={k} className="item">
              <View className="infor">
                <View className="title">
                  <View className="aname">
                    {v.aname}提交的公出申请
                    {v.updateStatus == 1 && <View className="aIcon">改</View>}
                  </View>
                  <View className="createTimes">{v.createTimes}</View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    公出企业:{v.userNames}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    公出地点:{v.districtName}
                  </View>
                </View>
                <View className="releaseStarts">
                  开始时间:{v.releaseStarts}
                </View>
                {
                  v.status == 2 &&
                  <View
                    className="punchClock"
                    onClick={() => {
                      this.props.initiate(v.id)
                    }}
                  >
                    发起报销
                  </View>
                }
                <View className="releaseEnds">
                  结束时间:{v.releaseEnds}
                </View>
                {
                  v.assistAidName != null && v.assistAidName != "" &&
                  <View className="coOder">
                    技术协单:{v.assistAidName.replace(/,/g, " ")}
                  </View>
                }
                {
                  v.assistantName != null && v.assistantName != "" &&
                  <View className="coOder">
                    协单助手:{v.assistantName.replace(/,/g, " ")}
                  </View>
                }
                <View className="examine">{v.adminExamine}</View>
                <View className="bottomContent">
                  <View className="clockIn"
                    style={{ color: ['red', "#6eb173", '#dbc037'][v.clockIn] }}
                  >{['未打卡', '已打卡', '异常打卡'][v.clockIn]}</View>
                  <View
                    className="status"
                    style={{ color: getClockState(v.status).color, }}
                  >
                    {(v.status === 0 || v.status === 4) && v.rejectName}{getClockState(v.status).title}
                  </View>
                </View>
              </View>
            </View>
          ))}
          <ListBottomStart
            state={this.props.listState}
            reload={() => {
              this.props.onRefresh;
            }}
          />
        </View>
        {/* 发起报销类型选择 */}
        {/* {this.state.visible != "" &&
          <Select
            prid={this.state.id}
            visible={this.state.visible}
            onClose={this.onClose.bind(this)}
          />} */}

      </View>
    );
  }
}

export default List;
