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() {
    const { title, sonType } = 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 + "&sonType=" + sonType,
                });
              }}
            >
              {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 == "我的公出" && !!v.assistAidName) || title == "我的协单" || title === "协单审核") &&
                    <View
                      className="select"
                      onClick={e => {
                        e.stopPropagation();
                        this.props.opinion(title, v)
                      }}
                    >
                      协单意见
                    </View>
                  }
                  {
                    (title == "我的协单" || title === "协单审核") &&
                    v.status === 2 &&
                    v.type === 3 &&
                    <View
                      className="reject"
                      onClick={e => {
                        e.stopPropagation();
                        this.props.opens(v.id)
                      }}
                    >
                      驳回协单
                    </View>
                  }
                  {/* {
                    title === "协单审核" &&
                    <View
                      className="select"
                      onClick={e => {
                        e.stopPropagation();
                        this.props.onSelect(v)
                      }}
                    >
                      查看协单意见
                    </View>
                  } */}
                </View>
                <View className="userName">
                  <View className="uNtext">
                    公出地点:{v.districtName}
                  </View>
                </View>
                <View className="releaseStarts">
                  开始时间:{v.releaseStarts}
                  {/* this.props.type === 0 &&  */}
                  {(v.alone == 2 && v.assist == 1) ? null :
                    ((this.props.type === 0 && v.status === 2) && (
                      v.type === 3
                        ? v.publicAssistAdvice > 0
                          ? <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
                          className="punchClock"
                          onClick={(e) => {
                            e.stopPropagation();
                            Taro.eventCenter.trigger("GoPunchIn", v);
                            Taro.switchTab({
                              url: "/pages/punchClock/index",
                            });
                          }}
                        >
                          {(v.clockIn === 1 || v.clockIn === 2) ? "更新打卡" : "去打卡"}
                        </View>
                    ))}
                  {/* {(v.type === 3 && v.publicAssistAdvice === 0) ? null : (v.status === 2 &&)(<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>)} */}
                </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">
                  {v.alone == 2 && v.assist == 1
                    ? <View className="clockIn" style={{ color: "#6eb173" }}>无需打卡</View>
                    : <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;
