import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Image } 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;
    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 />
            ))
            : null}
          {this.props.list.map((v, k) => (
            <View
              key={k}
              className="item"
              onClick={() => {
                Taro.navigateTo({
                  url: "/pages/egressDetails/index?id=" + v.id + "&index=" + k + "&status=" + seeView,
                });
              }}
            >
              {v.status === 3 ? (
                <View className="revoke">
                  <Image src={RevokeWhite} className="revokeImg" />
                </View>
              ) : null}
              <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">
                  公出企业:
                  {v.nickname}
                </View>
                <View className="userName">
                  公出地点:
                  {v.userName}
                </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 ? "更新打卡" : "去打卡"}
                    </View>
                  ) : null}
                </View>
                <View className="releaseEnds">结束时间:{v.releaseEnds}</View>
                {
                  v.assistAidName != null && v.assistAidName != "" &&
                  <View className="coOder">
                    技术协单:{v.assistAidName.replace(/,/g, " ")}
                  </View>
                }
                <View className="bottomContent">
                  {v.clockIn === 1 ? (
                    <View className="clockIn" style={{ color: "#6eb173" }}>
                      已打卡
                    </View>
                  ) : (
                    <View className="clockIn" style={{ color: "#dbc037" }}>
                      未打卡
                    </View>
                  )}
                  <View
                    className="status"
                    style={{
                      color: getClockState(v.status).color,
                    }}
                  >
                    {getClockState(v.status).title}
                  </View>
                </View>
              </View>
            </View>
          ))}
          <ListBottomStart
            state={this.props.listState}
            reload={() => {
              this.props.onRefresh;
            }}
          />
        </View>
      </View>
    );
  }
}

export default MyList;
