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 RevokeWhite from "../../image/revokeWhite.png";
import "./index.less";

class MyList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let seeView = this.props.seeView;
    const { title } = this.props
    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"
              onClick={() => {
                Taro.navigateTo({
                  url: "/pages/egressDetails/index?id=" + v.id + "&index=" + k + "&status=" + title,
                });
              }}
            >
              {v.publicAgain == 1 && <View className="itype">再次</View>}
              {v.status === 3 &&
                <View className="revoke">
                  <Image src={RevokeWhite} className="revokeImg" />
                </View>}
              <View className="infor">
                <View className="title">
                  <View className="aname">
                    {v.type === 3 ? v.mainName : 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>
                  {
                    title == "我的公出" &&
                    (v.type === 0 || v.type === 1 || v.type === 2) &&
                    v.status !== 3 &&
                    <View
                      className="reject"
                      onClick={e => {
                        e.stopPropagation();
                        this.props.again(v)
                      }}
                    >
                      再次公出
                    </View>
                  }
                  {
                    (title == "我的协单" || title === "查看协单") &&
                    v.status === 2 &&
                    v.type === 3 &&
                    <View
                      className="reject"
                      onClick={e => {
                        e.stopPropagation();
                        this.props.opens(v.id)
                      }}
                    >
                      驳回协单
                    </View>
                  }
                </View>
                <View className="userName">
                  <View className="uNtext">
                    公出地点:{v.districtName}
                  </View>
                </View>
                <View className="releaseStarts">
                  开始时间:{v.releaseStarts}
                  {this.props.type === 0 && v.status !== 3 ? (
                    <View
                      className="punchClock"
                      onClick={(e) => {
                        e.stopPropagation();
                        Taro.eventCenter.trigger("GoPunchIn", v);
                        Taro.switchTab({
                          url: "/pages/punchClock/index",
                        });
                      }}
                    >
                      {(v.clockIn === 1 || v.clockIn === 2) ? "更新打卡" : "去打卡"}
                    </View>
                  ) : null}
                </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="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>
      </View>
    );
  }
}

export default MyList;
